그리드 레이아웃
CSS에서 레이아웃을 작성하기 위한 새로운 속성입니다.
그리드 레이아웃
Grid 속성
| 속성 | 설명 |
|---|---|
| grid | grid 속성은 그리드 레이아웃을 정의합니다. |
| grid-area | grid-area |
| grid-auto-columns | grid-auto-columns는 열의 크기를 설정합니다. |
| grid-auto-flow | grid-auto-flow는 자동 배치 방식을 설정합니다. |
| grid-auto-rows | grid-auto-rows는 행의 크기를 설정합니다. |
| grid-column | grid-column |
| grid-column-end | grid-column-end |
| grid-column-gap | grid-column-gap |
| grid-column-start | grid-column-start |
| grid-gap | grid-gap |
| grid-row | grid-row는 그리드 아이템의 단축 속성을 설정합니다. |
| grid-row-end | grid-row-end는 그리드 아이템 행의 끝 위치를 설정합니다. |
| grid-row-gap | grid-row-gap는 그리드 아이템 행의 간격을 설정합니다. |
| grid-row-start | grid-row-start는 그리드 아이템 행의 시작 위치를 설정합니다. |
| grid-template | grid-template |
| grid-template-areas | grid-template-areas |
| grid-template-columns | grid-template-columns은 열의 크기를 설정합니다. |
| grid-template-rows | grid-template-rows |
Sample1 
콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.
결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex</title>
<style>
/* option */
.grid {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
counter-reset: items;
}
.column {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
min-height: 100px;
color: #fff;
padding: 10px;
}
.column::before {
counter-increment: items;
content: counter(items);
}
/* grid */
.grid1 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
/* grid-template-columns: 50px 50px 1fr 1fr 1fr 1fr 1fr 1fr; */
/* grid-template-columns: repeat(8, 50px); */
/* grid-template-columns: repeat(8, 1fr); */
/* grid-template-columns: repeat(auto-fill, 50px); */
/* grid-template-columns: 200px repeat(auto-fill, 100px) 300px; */
grid-gap: 2%;
}
</style>
</head>
<body>
<div class="grid grid1">
<div class="column column1"></div>
<div class="column column1"></div>
<div class="column column1"></div>
<div class="column column1"></div>
<div class="column column1"></div>
<div class="column column1"></div>
<div class="column column1"></div>
<div class="column column1"></div>
</div>
</body>
</html>Sample2
콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.
결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex</title>
<style>
/* option */
.grid {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
counter-reset: items;
}
.column {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
min-height: 100px;
color: #fff;
padding: 10px;
}
.column::before {
counter-increment: items;
content: counter(items);
}
/* grid */
.grid2 {
display: grid;
/* grid-template-columns: 50px 50px 50px 150px 50px 50px 50px 50px; */
grid-template-columns: 1fr 1fr 1fr 2fr 1fr 1fr 1fr 1fr;
grid-gap: 2%;
}
</style>
</head>
<body>
<div class="grid grid2">
<div class="column column2"></div>
<div class="column column2"></div>
<div class="column column2"></div>
<div class="column column2"></div>
<div class="column column2"></div>
<div class="column column2"></div>
<div class="column column2"></div>
<div class="column column2"></div>
</div>
</body>
</html>Sample3
콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.
결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex</title>
<style>
/* option */
.grid {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
counter-reset: items;
}
.column {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
min-height: 100px;
color: #fff;
padding: 10px;
}
.column::before {
counter-increment: items;
content: counter(items);
}
/* grid */
.grid3 {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-gap: 2%;
}
.column3:last-child {
/* grid-column-start: 1; */
/* grid-column-end: 9; */
grid-column: span 1 / 9;
}
</style>
</head>
<body>
<div class="grid grid3">
<div class="column column3"></div>
<div class="column column3"></div>
<div class="column column3"></div>
<div class="column column3"></div>
</div>
</body>
</html>Sample4
콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.
결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex</title>
<style>
/* option */
.grid {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
counter-reset: items;
}
.column {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
min-height: 100px;
color: #fff;
padding: 10px;
}
.column::before {
counter-increment: items;
content: counter(items);
}
/* grid */
.grid4 {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-gap: 2%;
}
.column4:first-child {
grid-column: span 1 / 6;
}
</style>
</head>
<body>
<div class="grid grid4">
<div class="column column4"></div>
<div class="column column4"></div>
<div class="column column4"></div>
<div class="column column4"></div>
</div>
</body>
</html>Sample5
콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.
결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex</title>
<style>
/* option */
.grid {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
counter-reset: items;
}
.column {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
min-height: 100px;
color: #fff;
padding: 10px;
}
.column::before {
counter-increment: items;
content: counter(items);
}
/* grid */
.grid5 {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-gap: 2%;
}
.column5:nth-child(2) {
grid-column: 2 / 4;
}
.column5:nth-child(3) {
grid-column: 4 / 6;
}
.column5:last-child {
grid-column: 8 / 9;
}
</style>
</head>
<body>
<div class="grid grid5">
<div class="column column5"></div>
<div class="column column5"></div>
<div class="column column5"></div>
<div class="column column5"></div>
</div>
</body>
</html>Sample6
콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.
결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex</title>
<style>
/* option */
.grid {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
counter-reset: items;
}
.column {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
min-height: 100px;
color: #fff;
padding: 10px;
}
.column::before {
counter-increment: items;
content: counter(items);
}
/* grid */
.grid6 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.column6:nth-child(3) {grid-column: 1 / 3;}
</style>
</head>
<body>
<div class="grid grid6">
<div class="column column6"></div>
<div class="column column6"></div>
<div class="column column6"></div>
<div class="column column6"></div>
<div class="column column6"></div>
</div>
</body>
</html>Sample7
콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.
결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex</title>
<style>
/* option */
.grid {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
counter-reset: items;
}
.column {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
min-height: 100px;
color: #fff;
padding: 10px;
}
.column::before {
counter-increment: items;
content: counter(items);
}
/* grid */
.grid7 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 20px;
height: 400px;
}
</style>
</head>
<body>
<div class="grid grid7">
<div class="column column7"></div>
<div class="column column7"></div>
<div class="column column7"></div>
<div class="column column7"></div>
<div class="column column7"></div>
<div class="column column7"></div>
<div class="column column7"></div>
<div class="column column7"></div>
<div class="column column7"></div>
</div>
</body>
</html>Sample8
콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.
결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex</title>
<style>
/* option */
.grid {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
counter-reset: items;
}
.column {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
min-height: 100px;
color: #fff;
padding: 10px;
}
.column::before {
counter-increment: items;
content: counter(items);
}
/* grid */
.grid8 {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
grid-gap: 20px;
}
</style>
</head>
<body>
<div class="grid grid8">
<div class="column column8"></div>
<div class="column column8"></div>
<div class="column column8"></div>
<div class="column column8"></div>
<div class="column column8"></div>
<div class="column column8"></div>
<div class="column column8"></div>
<div class="column column8"></div>
<div class="column column8"></div>
</div>
</body>
</html>Sample9
콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.
결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex</title>
<style>
/* option */
.grid {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
counter-reset: items;
}
.column {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
min-height: 100px;
color: #fff;
padding: 10px;
}
.column::before {
counter-increment: items;
content: counter(items);
}
/* grid */
.grid9 {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 20px;
}
.column9:nth-child(1) {
grid-column: span 2;
grid-row: span 2;
}
.column9:nth-child(3) {
grid-column: span 2;
grid-row: span 2;
}
.column9:last-child {
grid-column: span 5 / 6;
}
</style>
</head>
<body>
<div class="grid grid9">
<div class="column column9"></div>
<div class="column column9"></div>
<div class="column column9"></div>
<div class="column column9"></div>
<div class="column column9"></div>
<div class="column column9"></div>
<div class="column column9"></div>
<div class="column column9"></div>
<div class="column column9"></div>
<div class="column column9"></div>
</div>
</body>
</html>Sample10
콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.
결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex</title>
<style>
/* option */
.grid {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
counter-reset: items;
}
.column {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
min-height: 100px;
color: #fff;
padding: 10px;
}
.column::before {
counter-increment: items;
content: counter(items);
}
/* grid */
.grid10 {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(3, 1fr);
/* grid-template-rows: repeat(3, 100px); */
grid-template-rows: repeat(3, minmax(100px, auto));
grid-template-areas:
"a a a"
"b c c"
"b c c"
"d d d";
}
.column10:nth-child(1) {grid-area: a;}
.column10:nth-child(2) {grid-area: b;}
.column10:nth-child(3) {grid-area: c;}
.column10:nth-child(4) {grid-area: d;}
</style>
</head>
<body>
<div class="grid grid10">
<div class="column column10"></div>
<div class="column column10"></div>
<div class="column column10"></div>
<div class="column column10"></div>
</div>
</body>
</html>Sample11
콘텐츠 요소의 상하 관계 정렬 상태를 설정하는 예제입니다.
결과
TOTAL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex</title>
<style>
/* option */
.grid {
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
counter-reset: items;
}
.column {
border-radius: 3px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
box-sizing: border-box;
box-shadow: 0 2px 2px rgba(0,90,250,0.05), 0 4px 4px rgba(0,90,250,0.05), 0 8px 8px rgba(0,90,250,0.05), 0 16px 16px rgba(0,90,250,0.05);
min-height: 100px;
color: #fff;
padding: 10px;
}
.column::before {
counter-increment: items;
content: counter(items);
}
/* grid */
.grid11 {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, 150px);
grid-auto-rows: 150px;
grid-auto-flow: dense;
}
.column11:nth-of-type(2) {
grid-column: span 2;
}
.column11:nth-of-type(5) {
grid-column: span 2;
grid-row: span 2;
}
.column11:nth-of-type(7) {
grid-row: span 2;
}
</style>
</head>
<body>
<div class="grid grid11">
<div class="column column11"></div>
<div class="column column11"></div>
<div class="column column11"></div>
<div class="column column11"></div>
<div class="column column11"></div>
<div class="column column11"></div>
<div class="column column11"></div>
<div class="column column11"></div>
<div class="column column11"></div>
<div class="column column11"></div>
</div>
</body>
</html>
