Grid
display : grid
- 그리드 컨테이너 (Grid Container)
display: grid를 적용하는, Grid의 전체 영역이다. Grid 컨테이너 안의 요소들이 Grid 규칙의 영향을 받아 정렬된다고 생각하면 된다
- 그리드 아이템 (Grid Item)
Grid 컨테이너의 자식 요소다. 바로 이 아이템들이 Grid 규칙에 의해 배치된다.
- 그리드 트랙 (Grid Track)
Grid의 행(Row) 또는 열(Column)
- 그리드 셀 (Grid Cell)
Grid의 한 칸을 가리킨다.
- 그리드 라인(Grid Line)
Grid 셀을 구분하는 선
- 그리드 번호(Grid Number)
Grid 라인의 각 번호
- 그리드 갭(Grid Gap)
Grid 셀 사이의 간격
- 그리드 영역(Grid Area)
Grid 라인으로 둘러싸인 사각형 영역으로, 그리드 셀의 집합
기본 html 구조
<body>
<div class="grid">
<div class="header"></div>
<div class="content"></div>
<div class="nav"></div>
<div class="footer"></div>
</div>
</body>
grid-template-rows는 행(row)의 배치
grid-template-columns는 열(column)의 배치
.grid { display: grid; grid-template-columns: auto 200px; grid-template-rows: 100px repeat(2, 200px) 100px; }Auto : 자동으로 조절해줌
repeat함수 : 반복적으로 적는걸 방지해줌
grid-template-rows: 100px 100px 100px = grid-template-rows:repeat(3,100px)
Row & Column
.grid { display: grid; gap: 10px; grid-template-columns: repeat(4, 100px); grid-template-rows: repeat(4, 100px); } .header { background-color: #2ecc71; grid-column: 1 / -1; } .content { background-color: #3498db; grid-column: 1 /4; grid-row: 2/4; } .nav { background-color: #8e44ad; grid-row: 2/4; } .footer { background-color: #f39c12; grid-column: 1/-1; }
grid-column-start / end && grid-row-start / end 로 내가 원하는 가로 세로 줄 시작과 끝을 나타내서 자유롭게 구조를 설정해 줄 수 있다. 그리고 단축해서 grid-row / gird-column : start / end 로 나타낸다.
