셀 자체를 정렬하기: justify-content / align-content / place-content

 

 

 

 

📌 justify-content 

: 셀을 그룹으로 묶어서 가로 방향으로 정렬

• grid container에 여분의 공간이 있는 경우에만 작용 ✨
• 부모 요소에 적용

 

• start
  - 기본값
• end
• center
• space-around
• space-evenly
• space-between

 

• grid container에 여분의 공간이 있는 경우에만 작용 ✨
  - grid-template-columns를 1fr로 설정하면 셀이 화면에 가득차서 여분의 공간이 없으므로 작동하지 않는다.

.father {
    display: grid;
    gap: 10px;
    height: 100vh;
    height: 100vh;
    grid-template-columns: repeat(5, 100px);
    grid-template-rows: repeat(2, 100px);
    background-color: lightblue;

    justify-content: center;
    align-content: center;
  }

.child {
    background-color: tomato;
    color: white;
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
}

 

 

 

---

 

 

📌 align-content

: 셀을 그룹으로 묶어서 세로 방향으로 정렬

• grid container에 여분의 공간이 있는 경우에만 작용 ✨

 

• start
  - 기본값
• end
• center
• space-around
• space-evenly
• space-between
  
  
  

---

 

 

📌 place-content: align-content(세로) justify-content(가로);

• 단축 속성: align-content + justify-content

.father {
   place-content: start end;
}

 

 

 

✨ 추가 공간 만드는 법

 

px 단위 사용하기!

• fr 단위를 사용하면 요소가 공간을 모두 차지해서 여유 공간이 없으므로 align-content, justify-content, place-content을 사용할 수 없음 ❌

.father {
   grid-template-columns: repeat(5, 100px);
   grid-template-rows: repeat(2, 100px);
   
   /* X */
   grid-template-columns: repeat(5, 1fr); 
   grid-template-rows: repeat(2, 1fr); 
}

 

 

 

---

 

 

출처

노마드코더 CSS Layout 마스터클래스