css grid 조금 더 알아보기 4

▼▽ Grid가 처음이신 분들은 이전 포스팅을 한번 보시고 오시길 추천드립니다. :) ▼▽

[IT기록 - 개발자/CSS] - css grid 조금 더 알아보기 3

[IT기록 - 개발자/CSS] - css grid 조금 더 알아보기 2

[IT기록 - 개발자/CSS] - css grid 조금 더 알아보기 1

[IT기록 - 개발자/CSS] - css grid 세상에서 가장 쉽게 이해하기

css grid 세상에서 가장 쉽게 이해하기

---

1. auto-fit / auto-fill

 auto-fit과 auto-fill은 browser가 columne의 size를 자동으로 설정하게 하고, 각 요소들을 wrapping 하도록 합니다. 이는, browser의 넓이가 작아질 때, column이 over flow 되지 않고 자동으로 새로운 행을 생성하여 정렬시킵니다. 이때 fr(fraction unit)의 경우도 비슷한 거 아닌가?라고 생각하실 수 있습니다. 하지만 fr의 경우에는 새로운 행을 만들지 않고, 주어진 column의 개수를 유지합니다. 따라서 browser의 넓이가 작아지면 화면상에 보이지 않고 over-flow 됩니다. 

 auto-fit과 auto-fill은 똑같은 것 같지만 차이가 있습니다. 둘의 차이가 무엇이지 알아보겠습니다.

 

●  auto-fit

• browser의 넓이에 따라 row안에 가능한 한 많은 column이 들어갑니다. 하지만 설정한 column의 넓이가 있더라도 browser의 넓이가 그 이상일 경우에는 row의 모든 가능한 넓이를 채우기 위해 column의 넓이를 자동으로 늘립니다. (row에 빈 공간 없이 column의 넓이를 증가시키면서라도 row의 공간을 채웁니다.

●  auto-fill

• browser의 넓이에 따라 row안에 가능한 한 많은 column이 들어가서 row가 채워집니다. ( 하나의 row에 들어가는 column의 갯수가 중요).
• minmax()등에 의한 설정은 유지합니다.

예시를 통해 좀 더 이해해 보겠습니다. ( 결과창 좌측아래에 0.5X로 확인하시면 차이를 확인할 수 있습니다)

 

See the Pen XwONoz by kim jihae (@saea) on CodePen.

 

repeat()을 사용하여 column을 정의했습니다. column의 width를 minmax를 사용해서 minimun 100px, maximum 1fr로 설정했습니다. 그리고 auto-fit과 auto-fill을 사용해서 하나의 row당 차지하는 columns의 갯수를 정의했습니다. 이러한 자동으로 정렬하도록 하는 것은 화면 넓이에 따라 자동으로 반응하게 하여 media quary의 기능을 일부 대체하기도 합니다.

 

 정리하자면, auto-fit과 auto-fill의 차이는 row에 더 많은 columns이 들어갈 수 있는 공간이 있을 때, columns의 크기가 변하느냐 본래의 크기를 유지하느냐 입니다.

 auto-fit을 사용할 경우에는 columns가 row의 빈공간을 채우기 위해 늘어나게 됩니다. 반면에 auto-fill을 사용할 경우에는  row에 빈 공간이 있더라도 columns의 길이는 설정값이 유지됩니다.

 

 grid의 편리한 기능 들 중 하나가 위와 같이 자동으로 열과 행의 크기 및 개수가 조정되는 것입니다. 더 작은 화면에서는 columns의 개수는 줄어들고, rows의 갯수는 늘어나게 됩니다. 반대로 더 큰 화면에서는 columns의 개수가 늘어나고 rows의 개수가 줄어들게 됩니다. 게다가 화면이 커졌을 경우에 빈 공간을 유지할지, 혹은 빈공간 없이 화면 전체를 채울지도 설정할 수 있습니다. 이러한 기능을 사용하게 된다면 따로 media quary를 작성하는 수고로움을 덜 수 있습니다.