grid그리드 레이아웃 | repeat(), minmax(), grid-area

기본 그리드 레이아웃

display: grid;

grid-template-columns: 1fr 1fr 1fr;

 

 

 

반응형 그리드 레이아웃

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

 

repeat()
함수는 첫 번째 매개변수에 반복 횟수를, 두 번째 매개변수에 반복될 항목의 값 또는 크기를 지정.

ex)
repeat(3, 1fr) : 3번 반복되며 각 반복에서 1fr의 너비를 갖는 열을 생성.

auto-fit
사용 가능한 공간에 맞춰서 그리드 항목들이 최대한으로 확장될 수 있도록 한다.
auto-fill
키워드는 사용 가능한 공간에 맞춰서 그리드 항목들을 최대한으로 채우도록 한다.

minmax()
최소 크기와 최대 크기를 지정하여 유연한 크기를 가지는 열 또는 행을 생성.

 

 

그리드 영역 지정

style="grid-area: header;"

display: grid;

grid-template-columns: 1fr 3fr;

grid-template-rows: auto 1fr auto;

grid-template-areas:

"header header"

"sidebar content"

"footer footer";

 

 

 

 

실습한 결과물

[McDonald] 맥도날드 홈페이지 클론코딩 | 그리드 레이아웃 반응형 웹