2차원(행과 열)의 레이아웃 시스템을 제공
Grid CSS 속성
-
gap: item끼리 띄어주는 속
-
grid-template-columns, grid-template-rows
-
공백으로 구분된 값 목록 그리드의 열과 행을 정의
-
값은 트랙 크기를 나타내고 그 사이의 공간은 grid line 격자선을 나타냄
-
grid-template-columns
-
repeat: 반복적인 패턴을 보이는 다수의 열이나 행을 더 압축된 형태로 작성
grid-template-columns: repeat(2, 60px);
-
1fr
grid-template-columns: repeat(2, 20px 1fr);
-
-
실습
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.grid {
display: grid;
grid-template-columns: 100px 100px;
}
.grid div:nth-child(1) {
background-color: lightblue;
}
.grid div:nth-child(2) {
background-color: lightpink;
}
.grid1 {
display: grid;
grid-template-columns: 100px 100px 200px;
margin-top: 30px;
}
.grid1 div:nth-child(1) {
background-color: lightblue;
}
.grid1 div:nth-child(2) {
background-color: lightpink;
}
.grid1 div:nth-child(3) {
background-color: lightblue;
}
.grid2 {
display: grid;
grid-template-columns: 100px 1fr 2fr;
margin-top: 30px;
gap: 20px;
}
.grid2 div:nth-child(1) {
background-color: lightblue;
}
.grid2 div:nth-child(2) {
background-color: lightpink;
}
.grid2 div:nth-child(3) {
background-color: lightblue;
}
.gridContainer {
margin-top: 3rem;
padding: 10px;
display: grid;
background-color: antiquewhite;
grid-template-columns: auto auto auto;
}
.gridContainer div:nth-child(1) {
grid-column-start: 1;
grid-column-end: 3;
}
</style>
</head>
<body>
<div class="grid">
<div>item1</div>
<div>item2</div>
</div>
<div class="grid1">
<div>item1</div>
<div>item2</div>
<div>item3</div>
</div>
<div class="grid2">
<div>item1</div>
<div>item2</div>
<div>item3</div>
</div>
<div class="gridContainer">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>
