[CSS] Grid의 auto를 알아보자

grid-auto-rows/columns

크기가 지정되지 않은 grid track의 크기를 지정할 수 있는 프로퍼티

See the Pen auto by summermong (@summermong) on CodePen.

 

이미지 갤러리를 만들 때 각 행의 높이를 200px로 지정하고 싶다.

이 때 grid-template-rows로 200px인 grid track 3개를 생성하려고 한다.

그래서 grid-template-rows: repeat(3, 200px)를 추가하지만 텍스트가 200px 밖으로 빠져나가게 된다.

 

이를 해결하기 위해 카드의 기본 크기는 200px이면서 넘치는 내용이 빠져나가지 않게 minmax()라는 grid 함수를 사용해 카드의 크기를 자동으로 늘리려고 한다. 이 함수는 크기의 최대, 최소를 설정하며 minmax(최솟값, 최댓값)을 받는다.

 

See the Pen Untitled by summermong (@summermong) on CodePen.

 

3번째 줄까지 최소 200px, 최대 auto로 지정을 해두었는데 이 때 photos에 추가 이미지가 계속 들어온다면 4번째 줄부터는 해당 스타일링이 적용되지 않게 된다. 왜냐하면 3번째 줄까지만 지정을 해둔 것이기 때문인데, 이를 보완하기 위해 grid-auto가 사용된다.

 

See the Pen auto2 by summermong (@summermong) on CodePen.

 

이 때 grid-auto-rows: minmax(200px, auto)를 지정하면 자동적으로 모든 행들의 최소 높이는 200px, 최대 auto로 행의 갯수와 상관 없이 크기를 지정할 수 있게 된다!

---

grid-auto-flow

grid가 자동으로 배치되는 방향을 결정한다.

See the Pen auto3 by summermong (@summermong) on CodePen.

 

카드 3이 카드 2의 옆에 붙지 않고 그 다음 줄에 오게 됐다.

grid-template-columns에서 2열로 정의했기 때문에 자동으로 두 번째 행에 배치된 것이다.

 

See the Pen auto4 by summermong (@summermong) on CodePen.

 

이 때 위와 같이 grid-auto-flow를 추가하면 아까와 달리 카드 3이 카드 2 뒤에 온 것을 볼 수 있다.

grid-auto-flow는 row, column외에도 dense row, dense column이라는 값을 갖는데.

dense가 붙으면 동일하게 자동 배치되는 방향을 정하지만 '밀집한' 형태로 정렬한다는 차이가 있다.

 

See the Pen dense by summermong (@summermong) on CodePen.

 

카드 1이 두 번째 열에서 시작되도록 지정했다.

grid-auto-flow: row dense로 수정하면 아래 이미지처럼 카드 3의 오른쪽에 있던 카드 2가 빈 공간으로 밀집하게 된다.

 

---

grid

지금까지 grid-template와 grid-auto는 grid로 축약해서 나타낼 수 있다.

grid: <grid-template>;
grid: <grid-template-rows> / auto-flow <grid-auto-columns>;
grid: auto-flow <grid-auto-rows> / <grid-template-columns>;

이 때 auto-flow를 사용할 때는 반드시 해당 키워드를 작성하고 위치를 고려해야 한다.

만약 / 뒤에 auto-flow를 쓰게 되면 column이 적용되고, 반대로 앞에 쓰게 되면 row가 적용된다.