![[CSS 개념잡기] Grid 정복하기 [CSS 개념잡기] Grid 정복하기](http://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fdm79p9%2Fbtrgg4tctxN%2FFDJqPGyeG8ynfG85JCf1e1%2Fimg.png)
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 정복하기