.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, 최대 300minmax(200px, 1fr)
최소 크기 200, 최대 1fr(최소값은 fr 사용 불가)repeat(6, 1fr)
1fr을 6번 반복gap
간격 넣기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;
}
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;
grid-area
로 영역에 이름 주기
grid-template-areas
이름으로 배치하기, 칸을 비우고 싶다면 .
마침표를 써준다.
.red {
grid-area: r;
}
...
.container {
grid-template-areas:
"r g"
"r b";
}