Grid

1. 그리드 나누기

.container {
  border: 5px dashed #cacfd9;
  width: 500px;
  height: 500px;
  display: grid;
  grid-template: 250px 150px 100px / 100px 300px 100px;
  /*세로(row)로 각 250, 150, 100,
  	가로(column)로 각 100, 300, 100*/ 
}

• 상대적인 값 지정시 fr을 사용한다.
• minmax(200px, 300px) 최소 크기 200, 최대 300
• minmax(200px, 1fr) 최소 크기 200, 최대 1fr(최소값은 fr 사용 불가)
• repeat(6, 1fr) 1fr을 6번 반복
• gap 간격 넣기

2. 크기 미리 정해두기

grid-auto-rows; grid-auto-colums;

grid-template에서 명시적으로 정하지 않았을 때 쓰는 크기

.container {
  border: 5px dashed #cacfd9;
  width: 500px;
  height: 500px;
  display: grid;
  grid-template-columns: repeat(3, 1fr) ;
  grid-auto-rows: 200px;
  gap: 16px 32px;
}

.container {
  border: 5px dashed #cacfd9;
  width: 500px;
  height: 500px;
  display: grid;
  grid-template-columns: repeat(3, 1fr) ;
  grid-auto-rows: 50px 100px 200px;
  gap: 16px 32px;
}

3. 원하는 위치에 요소 배치하기

grid-column grid-row

green box

grid-row:3;
grid-column:2;

green box
그리드 라인으로 배치 (테두리부터 1번, 뒤부터 -1)

grid-row:3 / 5;
grid-column:2 / -2;

span으로 배치

grid-row:3 / span 2;
grid-column:2 / span 3;

3. 이름으로 배치하기

grid-area 로 영역에 이름 주기
grid-template-areas 이름으로 배치하기, 칸을 비우고 싶다면 .마침표를 써준다.

.red {
 grid-area: r;
 }
 ...
.container {
  grid-template-areas:
  "r g"
  "r b";
 }