Grid
컨테이너가 grid 의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것
html
<body>
<div class="container">
<div class=box>layout1</div>
<div class=box>layout2</div>
<div class=box>layout3</div>
<div class=box>layout4</div>
<div class=box>layout5</div>
<div class=box>layout6</div>
<div class=box>layout7</div>
<div class=box>layout8</div>
</div>
</body>.container{display : grid}
grid-template-rows/columns
- grid-template-rows
:행(row)의 배치 - grid-template-columns
:열(column)의 배치
grid-template-columns: 1fr 1fr; //1열 크기 1fr 2열 크기 1fr
grid-template-rows: 1fr 1fr 1fr 1fr;
// repeat(반복횟수, 반복값)
grid-template-columns: repeat(2, 1fr) //2개열 1fr 반복
grid-template-rows: repeat(4, 1fr); //4행 1fr 반복 
행과 열을 이용한 공간 조정 및 배치
grid-template-columns: repeat(3, 1fr)
grid-template-rows: repeat(2, 1fr); 
.box:nth-child(1) {
grid-column:1/4; // 1번박스를 세로축 1번부터 4번까지 늘린다
}
.box:nth-child(3) {
grid-column:span 2; // 3번 박스가 셸을 2개 이용한다
}
그리고 기존 2행으로 지정했으나 공간 배치에 따라 새로 생겨난 행과 열을 암시적 행 , 암시적 열이라고 부른다
암시적행을 다루는 속성은
grid-auto-columns
grid-auto-rows1)minmax 함수
- minmax(최소값, 최대값)
grid-template-rows: repeat(1, minmax(100px,auto); //최소값 100px 최대값 자동
2) row-gap / column-gap / gap
- grid 셀 사이의 간격을 설정 또는 컨테이너와 셀의 간격을 설정
: row-gap : 행과 행사이의 거리
: column-gap : 열과 열사이의 거리
: gap : 셀과의 거리
