CSS Grid Layout : Align items, Align content, Justify self, Align self, Grid auto rows, Grid auto columns, Grid auto flow

지난 시간까지는 justify-items와 justify-content 속성에 대해 이해를 해봤습니다. 이제부터는 Grid Layout을 공부해보도록 하겠습니다. 

 

---

 

▒ Align items와 Align content속성

 

이제는 items와 content속성을 같이 봐야 할 것 같습니다. Grid 영역내에 어떻게 변하는지 지난 시간 기준으로는 items는 Box item에 직접 영향을 미치고 content는 전체 Grid에 전체 영향을 미쳤습니다. 

 

이제 Align items와 Align content를 같은 개념으로 보면 상하로 변동이 있을겁니다. 

 

다음 브라우저를 기준으로 설명해 보겠습니다. 

 

 

 

상기 브라우저에 대해 잠깐 설명하면 이동하는 위치를 보기 위해서 <main>태그 높이를 더 주었습니다. 상기 그림은 Default이기 때문에 align-items: start와 align-content: start를 나타냅니다. 

 

그럼 관련된 속성값을 적용한 브라우저 표시내역을 보겠습니다. 

 

▶ Align items 속성

 

① align-items: end

 

 

② align-items: center

 

 

③ align-items: stretch

 

이제 Box item의 놀이를 고정된 높이가 아닌 min-height인 최소 높이로 지정한 후 stretch 속성값을 주도록 하겠습니다. 

 

 

 

▶ Align content 속성

 

이제는 수직으로 Grid 자체가 움직이는 속성을 공부할 겁니다. 

 

① align-content: end

 

 

 

② align-content: center

 

 

 

③ align-content: space-between

 

이 속성값은 수직 기준으로 맨 위와 맨 아래에 Grid가 배치되고 중간(between)의 여백을 두게 됩니다. 

 

 

④ align-center: space-around

 

이 속성값은 위 아래 중간의 Grid 공간이 동일하게 배분됩니다. 중간은 위 Grid의 50% 아래 Grid의 50%의 공간이 합쳐진다고 보면 됩니다. 

 

 

 

⑤ align-center: space-evenly

 

말 그대로 위 아래 중간의 공간이 동일하게 배정이 됩니다. 

 

 

---

 

▒ Justify self 속성과 Align self 속성

 

현재까지의 Grid의 위치 개념을 정리하면 다음과 같습니다.

 

① Justify 속성은 좌우로 움직인다.

② Align 속성은 상하로 움직인다. 

③ Items가 들어가면 Box items들의 위치 변경이다. 

④ Content가 들어가면 Content를 감싸고 있는 Grid의 위치 변경이다. 

 

그러면 Box items속에 있는 개별 Box에 대한 위치 조정은 Self라는 영어를 붙힙니다. 

 

역시 속성값으로는 start, end, center, stretch(기본값)이 있습니다. 지금까지 해 온 예제를 가지고 A Box에는 align-self: end와 B Box에는 justify-self: end의 속성값을 주겠습니다. CSS는 다음과 같습니다.

 

 

 

그럼 다음과 같이 브라우저에 나타납니다. 

 

 

 

---

 

▒ Grid Auto Rows 와 Grid Auto Columns

 

지금까지는 Grid수를 결정하고 CSS를 작성했습니다만, 현실에서는 Box 요소들이 추가가 되거나 삭제를 시켜야 할 경우가 많습니다. 예를 온라인 쇼핑몰에서는 상품이 추가가 되거나 삭제되는 경우 Grid를 다시 설정하고 하는 복잡한 경우가 생깁니다. 

 

이러한 경우를 대비하여 자동으로 Grid를 배정할 수 있는 속성이 Grid Auto Rows와 Grid Auto Columns이 있습니다. 

 

지금까지 작성한 다음 브라우저를 기준으로 보겠습니다. 

 

 

 

여기서는 Grid Auto Rows 수평기준으로만 예를 들겠습니다. 

 

CSS <main> 태그에 grid-auto-rows의 속성값을 500px로 지정하겠습니다. 그리고 HTML에 Box B를 3개더 더 복사해서 붙혀 넣겠습니다. 브라우저를 보겠습니다. 

 

 

상기 이미지를 보면 5번째 Box B의 Grid의 높이가 자동으로 500px 추가가 된 것을 볼 수 있습니다. grid-auto-columns도 같은 방식으로 이해하면 됩니다. 

 

---

 

▒ Grid Auto Flow 속성

 

Grid Auto Flow 속성을 쓰면 추가되는 Box 크기만큼 자동으로 Grid가 생성됩니다. 위 예제에서 CSS에 grid-auto-rows: 500px 대신 grid-auto-flow: rows로 다음과 같이 지정하겠습니다. 

 

 

그러면 브라우저에는 다음과 같이 Grid가 조정이 됩니다. 

 

 

 

---

 

지금까지 Grid에 대한 내용을 살펴 보았습니다. 무엇보다 개념이해가 중요하다고 생각되어 다른 강좌에서 보여지지 않는 부분을 연구해서 같이 공유 하였습니다. 

 

거의 CSS에 관하여 90%정도 진도가 나간것 같습니다. 조금만 더 힘 내도록 하시죠.