Grid
css grid는 2차원 레이아웃 시스템을 제공한다.
두 방향(가로-세로) 레이아웃 시스템 (2차원)
부모 요소인 div.container를 Grid Container(그리드 컨테이너)라고 부르고,
자식 요소인 div.item들을 Grid Item(그리드 아이템)이라고 부른다.
Grid는 Flex와 마찬가지로 컨테이너와 아이템 두가지로 나눈다.
컨테이너 item을 감싸는 부모요소
그 안에 item들을 배치한다. (컨테이너의 자식요소)
그리드 라인(Grid Line): Grid 셀을 구분하는 선
그리드 트랙(Grid Track): 두 개의 그리드 라인 사이의 공간, Grid의 행(Row) 또는 열(Column)
그리드 셀(Grid Cell): Grid의 한 칸을 가리킴
그리드 영역(Grid Area): Grid 라인으로 둘러싸인 사각형 영역으로, 그리드 셀의 집합
그리드 갭(gap): Grid 셀 사이의 간격
Grid 컨테이너 속성1
display: grid 컨테이너를 정의한다.
block 특성으로 컨테이너를 정의한다.
display: inline-grid; : inline 특성을 가지는 grid 컨테이너
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid 컨테이너 속성1</title>
<style>
.container1{
width: 300px;
height: 300px;
border: 4px solid green;
display: grid;
}
.container1 .item1{
border: 2px dashed orange; /*dashed: 점선*/
}
.container2{
width: 300px;
height: 300px;
border: 4px solid blue;
display: inline-grid;
}
.container2 .item2{
border: 2px dashed orange; /*dashed: 점선*/
}
</style>
</head>
<body>
<div class="container1">
<div class="item1">1</div>
<div class="item1">2</div>
<div class="item1">3</div>
</div>
<div class="container1">
<div class="item1">4</div>
<div class="item1">5</div>
<div class="item1">6</div>
</div>
<div class="container2">
<div class="item2">11</div>
<div class="item2">22</div>
<div class="item2">33</div>
</div>
<div class="container2">
<div class="item2">44</div>
<div class="item2">55</div>
<div class="item2">66</div>
</div>
</body>
</html>
Grid 컨테이너 속성2
그리드 형태 정의
grid-template-rows: 행의 크기를 정의하며 행의 이름도 정의할 수 있다.
grid-template-columns: 열의 크기 및 열의 이름도 정의가능하다.
grid-template-rows: 1행크기 2행크기 ...;
grid-template-rows: [선이름] 1행크기 [선이름] 2행크기 [선이름] ...;
grid-template-columns: 1열크기 2열크기 ...;
grid-template-columns: [선이름] 1열크기 [선이름] 2열크기 [선이름] ...;
예시)
.container{
display: grid;
grid-template-rows: 300px 50px 100px; (세로의 길이를 각각 300 50 100개로 나눈다.)
grid-template-columns: 200px 50px (가로 길이를 각각 200 50으로 나눈다.)
}
repeat(반복횟수, 반복값):행 높이 또는 열 너비를 반복해서
지정한다.
두번째 인수를 몇번 만큼 반복한다.
예시)
grid-template-rows: 100px 100px; : 1행크기, 2행크기
=> grid-template-rows: repeat(2, 100px);
grid-template-columns: 200px 200px 200px;
=> grid-template-columns: repeat(3, 200px);
fr(fraction, 공간 비율): fr은 fraction, 숫자 비율대로 트랙의 크기를 나눈다.
1fr 1fr => 2개의 행 또는 열이 컨테이너 전체 크기에 1 : 1 비율로 채워진다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid 컨테이너 속성2</title>
<style>
.container{
width: 300px;
height: 300px;
border: 4px solid green;
display: grid;
grid-template-rows: repeat(2,1fr);
grid-template-rows: repeat(2,100px); /*100px로 나누고 2번 반복한다.*/
grid-template-columns: repeat(3,1fr);
grid-template-columns: repeat(3,100px 200px);
}
.container .item{
border: 2px dashed orange; /*dashed: 점선*/
}
</style>
</head>
<body>
<div class="container">
<div class="item">11</div>
<div class="item">22</div>
<div class="item">33</div>
<div class="item">44</div>
<div class="item">55</div>
<div class="item">66</div>
</div>
</body>
</html>
Grid 컨테이너 속성3
Grid Area
그리드 area 영역이름을 작성해서 템플릿을 작성해서 아이템들을 저장한다.
grid-template-areas:
"header header header"
"main .aside"
". footer footer" ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid컨테이너속성3(그리드 Area)</title>
<style>
/*
그리드 area 영역이름을 작성해서 템플릿을 작성해서
아이템들을 저장한다.
*/
.container{
width: 600px;
grid-template-rows: repeat(3,100px); /*100px씩 3개*/
grid-template-columns: repeat(3,1fr); /*3등분 해라*/
border: 4px solid dodgerblue;
display: grid;
/*각 item 요소마다 grid-areas 속성으로 영역 이름을 지정하고
grid-template-areas로 렌더링한다.
item 영역을 비워두려면 .none 을 찍는데 대부분 . 찍는다.
*/
grid-template-areas:
"header header header"
"main .aside"
". footer footer" ;
/* gap을 이용해서 간격을 설정 */
row-gap: 30px;
column-gap: 10px;
/* 한줄로 쓰기 : gap: 30px 10px; */
}
.container .item{
border: 6px solid red;
}
.container .item:nth-child(1){
grid-area: header;
}
.container .item:nth-child(2){
grid-area: main;
}
.container .item:nth-child(3){
grid-area: aside;
}
.container .item:nth-child(4){
grid-area: footer;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Header</div>
<div class="item">Main</div>
<div class="item">Aside</div>
<div class="item">Footer</div>
</div>
</body>
</html>
Grid 컨테이너 속성4
grid-auto-flow: 배치하지 않은 item들을 어떤 자동 배치 알고리즘으로 처리할지 지정한다.
=> row: 기본값, 행 방향으로 차례대로 배치된다. 빈 영역은 그냥 비워둔다.
=> row dense: 행 방향으로 차례대로 배치된다. 배치하지 않은 item이 빈 영역을 자동으로 채운다.
=> column: 열 방향으로 차례대로 배치된다. 빈 영역은 그냥 비워둔다.
=> column dense: 열 방향으로 차례대로 배치된다. 배치하지 않은 item이 빈 영역을 자동으로 채운다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>grid 컨테이너 속성4</title>
<style type="text/css">
.container1 {
width: 600px;
border: 4px solid dodgerblue;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row;
}
.container1 .item1 {
border: 4px solid red;
}
.container1 .item1:nth-child(1) {
grid-column: 1 / 3;
background-color: yellowgreen;
}
.container1 .item1:nth-child(2) {
grid-column: 2 / 4;
background-color: skyblue;
}
.container2 {
width: 600px;
border: 4px solid dodgerblue;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: row dense;
}
.container2 .item2 {
border: 4px solid red;
}
.container2 .item2:nth-child(1) {
grid-column: 1 / 3;
background-color: yellowgreen;
}
.container2 .item2:nth-child(2) {
grid-column: 2 / 4;
background-color: skyblue;
}
.container3 {
width: 600px;
border: 4px solid dodgerblue;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: column;
}
.container3 .item3 {
border: 4px solid red;
}
.container3 .item3:nth-child(1) {
grid-column: 2 / 4;
background-color: yellowgreen;
}
.container3 .item3:nth-child(2) {
grid-column: span 2;
background-color: skyblue;
}
.container4 {
width: 600px;
border: 4px solid dodgerblue;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: column dense;
}
.container4 .item4 {
border: 4px solid red;
}
.container4 .item4:nth-child(1) {
grid-column: 2 / 4;
background-color: yellowgreen;
}
.container4 .item4:nth-child(2) {
grid-column: span 2;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="container1">
<div class="item1">1</div>
<div class="item1">2</div>
<div class="item1">3</div>
<div class="item1">4</div>
</div><br/>
<div class="container2">
<div class="item2">1</div>
<div class="item2">2</div>
<div class="item2">3</div>
<div class="item2">4</div>
</div><br/>
<div class="container3">
<div class="item3">1</div>
<div class="item3">2</div>
<div class="item3">3</div>
<div class="item3">4</div>
</div><br/>
<div class="container4">
<div class="item4">1</div>
<div class="item4">2</div>
<div class="item4">3</div>
<div class="item4">4</div>
</div><br/>
</body>
</html>
Grid 컨테이너 속성5
justify-content: 컨테이너 내부에서 item들을 수평으로 정렬한다.
=> start: 기본값, 컨테이너 시작점(왼쪽)에 맞춰 정렬한다.
=> center: 컨테이너 수평 가운데로 정렬한다.
=> end: 컨테이너 끝점(오른쪽)에 맞춰 정렬한다.
=> space-around: 컨테이너에 표시되는 item의 좌, 우 여백을 같게 정렬한다.
=> space-between: 컨터이너에 표시되는 첫 번째 item은 왼쪽에 붙이고 마지막 item은 오른쪽에 붙인 후
item 사이의 간격을 균등하게 정렬한다.
=> space-evenly: 컨테이너에 표시되는 모든 item 사이의 여백을 균등하게 배치한다.
align-content: 컨테이너 내부에서 item들을 수직으로 정렬한다.
=> start: 기본값, 컨테이너 시작점(위쪽)에 맞춰 정렬한다.
=> center: 컨테이너 수직 가운데로 정렬한다.
=> end: 컨테이너 끝점(아래쪽)에 맞춰 정렬한다.
=> space-around: 컨테이너에 표시되는 item의 상, 하 여백을 같게 정렬한다.
=> space-between: 컨터이너에 표시되는 첫 번째 item은 위쪽에 붙이고 마지막 item은 아래쪽에 붙인 후
item 사이의 간격을 균등하게 정렬한다.
=> space-evenly: 컨테이너에 표시되는 모든 item 사이의 여백을 균등하게 배치한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>grid 컨테이너 속성</title>
<style type="text/css">
.container {
width: 450px;
height: 450px;
border: 2px solid red;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
justify-content: space-evenly;
align-content: space-evenly;
}
.container .item {
border: 2px solid blue;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>
Grid 컨테이너 속성 실습1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid컨테이너속성_실습</title>
<style>
.container{ /* 그리드 갯수,크기 조정 */
width: 600px;
grid-template-rows: repeat(3,100px); /*rows: 100px씩 3개*/
grid-template-columns: repeat(3,1fr); /*cloumns: 3등분 해라*/
border: 4px solid dodgerblue;
display: grid;
/* 그리드 템플릿 */
grid-template-areas:
"header header header"
"main main aside"
"footer footer footer" ;
/* gap을 이용해서 간격을 설정 */
row-gap: 30px;
column-gap: 10px;
}
.container .item{
border: 6px solid red;
}
.container .item:nth-child(1){
grid-area: header;
background-color: red;
}
.container .item:nth-child(2){
grid-area: main;
background-color: yellow;
}
.container .item:nth-child(3){
grid-area: aside;
background-color: green;
}
.container .item:nth-child(4){
grid-area: footer;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Header</div>
<div class="item">Main</div>
<div class="item">Aside</div>
<div class="item">Footer</div>
</div>
</body>
</html>
Grid 컨테이너 속성 실습2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid컨테이너속성_실습2</title>
<style>
.container{ /* 그리드 갯수,크기 조정 */
width: 600px;
grid-template-rows: repeat(4,100px); /* rows: 100px씩 4개*/
grid-template-columns: repeat(3,1fr); /*columns :3등분*/
border: 4px solid dodgerblue;
display: grid;
/* 그리드 템플릿 */
grid-template-areas:
"header header header"
"main . ."
"main . aside"
"footer footer footer" ;
/* gap을 이용해서 간격을 설정 */
row-gap: 30px;
column-gap: 10px;
}
.container .item{
border: 6px solid red;
}
.container .item:nth-child(1){
grid-area: header;
background-color: red;
}
.container .item:nth-child(2){
grid-area: main;
background-color: yellow;
}
.container .item:nth-child(3){
grid-area: aside;
background-color: green;
}
.container .item:nth-child(4){
grid-area: footer;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Header</div>
<div class="item">Main</div>
<div class="item">Aside</div>
<div class="item">Footer</div>
</div>
</body>
</html>
