[CSS 개념잡기] Grid 정복하기

8. Grid 1) grid grid의 개요 웹페이지를 위한 2차원 레이아웃 시스템이다.

행(row)과 열(column)이 존재함 gutters(gap) container : display flex와 마찬가지로 외부 container와 내부 item이 있다. container : grid-template-rows, grid-template-columns 몇 개의 행, 열을 가질 것인지 설정한다.

단위 값을 명시 해줘야함 명시한 값의 개수만큼 자리 차지함 fr : 대비되는 비율 repeat(반복할 횟수 n, 값 명시) : 반복 함수 .container { grid-template-rows: 1fr 1fr /* 2개의 행 */ grid-template-columns: 100px 100px 50px.....

원문링크 : [CSS 개념잡기] Grid 정복하기