grid를 만들 때, 초기에 설정한 그리드 아이템 외에 추가로 아이템들을 동적으로 추가하고 싶을 수 있다.
이때 grid-auto-rows와 grid-auto-columns, grid-auto-flow를 사용하면
사전에 그리드 아이템으로 지정하지 않은 아이템들을 그리드에 배치할 수 있다.
사용 방법
grid-auto-rows : 지정되지 않은 그리드 아이템의 그리드 열(column)의 크기 지정
grid-auto-columns : 지정되지 않은 그리드 아이템의 그리드 행(row)의 크기 지정
grid-auto-rows: 50px; /*세로(row) 크기 지정*/
grid-auto-columns: 50px; /*가로(column) 크기 지정*/
grid-auto-flow : 지정되지 않은 그리드 아이템을 어느 방향으로 놓을지 결정
gird-auto-flow: column; /*지정되지 않은 그리드 아이템을 가로로 배치 */
gird-auto-flow: row; /*지정되지 않은 그리드 아이템을 세로로 배치 */
사용예시
grid-auto-flow: column와 grid-auto-columns를 같이 사용하고
grid-auto-flow: row와 grid-auto-rows를 같이 사용한다.
(CSS) grid 3탄 : grid template 사용법
지난 포스팅에는 grid line, 그리고 grid 레이아웃을 변경시키는 방법에 대해 다루었다. 이번 포스팅에서는 grid template을 활용해 직관적으로 레이아웃을 만드는 방법에 대해 다루어보려고 한다.
lemu-devblog.tistory.com
