CSS Grid는 2차원의 레이아웃 시스템이다.
Flexible Box도 좋지만 더 복잡한 레이아웃에는 Grid가 더 간단할 수 도 있다.
Grid 속성
Grid는 Flex와 같이 Container와 Item 두가지 개념으로 구분된다.
Container는 Item들을 감싸는 부모요소이다.
Grid Container
display 속성
Gride Container 를 정의한다.
정의된 요소의 자식 요소들은 자동으로 Grid Item으로 정의된다.
속성값
- grid : Block 레벨 요소의 Grid Container 정의
- inline-grid : Iline 레벨 요소의 Grid Container 정의
grid-template-rows 속성
명시적 행의 크기를 정의한다 동시에 라인의 이름도 정의할 수 있으며 fr(fraction , 공간 비율)단위 사용가능 repeat() 함수 사용 가능
.container {
display: grid;
grid-template-rows: 1행크기 2행크기 ...;
grid-template-rows: [선이름] 1행크기 [선이름] 2행크기 [선이름] ...;
}각 라인은 행과 열의 객수대로 숫자 라인이름이 자동으로 지정되어 있어 특별한 경우가 아니면 이름을 지정해 줄 필요는 없다.
.container {
width: 400px;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
}
grid-template-columns 속성
명시적 열의 크기를 정의한다
동시에 라인의 이름도 정의할 수 있으며 fr(fraction , 공간 비율)단위 사용가능
repeat() 함수 사용 가능
.container {
display: grid;
grid-template-columns: 1열크기 2열크기 ...;
grid-template-columns: [선이름] 1열크기 [선이름] 2열크기 [선이름] ...;
}1200px 너비의 12컬럼 그리드를 정의한다면 다음과 같다
.container {
width: 1200px;
grid-template-columns: repeat(12, 100px);
}grid-template-areas 속성
지정된 그리드 영역이름을 참조해 그리드 템플릿을 생성한다.
grid-area는 grid item에 적용하는 속성!!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: grid;
gap : 10px 10px;
grid-template-rows: repeat(3, 200px);
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"header header header"
"main main aside"
"footer footer footer";
}
header {
grid-area: header;
background-color: rgb(187, 84, 84);
}
main {
grid-area: main;
background-color: rgb(84, 163, 187);
}
aside {
grid-area: aside;
background-color: rgb(84, 187, 118);
}
footer {
grid-area: footer;
background-color: rgb(154, 71, 170);
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<header>Header</header>
<main>Main</main>
<aside>Aside</aside>
<footer>Footer</footer>
</div>
</body>
</html>
마침표나 none 을 입력해 빈 영역을 지정할 수 있다.
.container {
display: grid;
gap : 10px 10px;
grid-template-rows: repeat(4, 200px);
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"header header header"
"main . aside"
"main . aside"
"footer footer footer";
}
grid-template 속성
gride-template-rows , grid-template-columns , grid-template-areas의 단축 속성이다.
.container {
grid-template:
[1행시작선이름] "AREAS" 행너비 [1행끝선이름]
[2행시작선이름] "AREAS" 행너비 [2행끝선이름]
/ <grid-template-columns>;
}.container {
display: grid;
grid-template:
"header header header" 80px
"main main aside" 350px
"footer footer footer" 130px
/ 2fr 100px 1fr;
}
header { grid-area: header; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
gap 속성
각 행과 행 열과 열 사이의 간격을 지정한다.
.container {
display: grid;
grid-template:
"header header header" 80px
"main main aside" 350px
"footer footer footer" 130px
/ 2fr 100px 1fr;
gap: 10px 20px;
/*gap : 열의 간격 행의 간격*/
}
grid-auto-rows 속성
암시적 행의 크기를 정의한다.
아이템이 grid-template-rows로 정의한 행 외부에 배치되는 경우 암시적 행의 크기가 적용된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
width: 300px;
height: 200px;
display: grid;
grid-template-rows: 100px 100px; /* 명시적 2개 행 정의 */
grid-template-columns: 150px 150px; /* 명시적 2개 열 정의 */
grid-auto-rows: 50px; /* 그 외(암시적) 행의 크기 정의 */
}
.item:nth-child(3) {
grid-row: 3 / 4;
}
.item:nth-child(1){
background-color: rgb(145, 41, 41);
}
.item:nth-child(2){
background-color: rgb(41, 145, 102);
}
.item:nth-child(3){
background-color: rgb(41, 103, 145);
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
grid-auto-columns 속성
암시적 열의 크기를 정의한다.
아이템이 grid-template-columns로 정의한 열 외부에 배치되는 경우 암시적 열의 크기가 적용된다.
.container {
width: 300px;
height: 200px;
display: grid;
grid-template-rows: 100px 100px; /* 명시적 2개 행 정의 */
grid-template-columns: 150px 150px; /* 명시적 2개 열 정의 */
grid-auto-rows: 50px; /* 그 외(암시적) 행의 크기 정의 */
grid-auto-columns: 50px; /* 그 외(암시적) 열의 크기 정의 */
}
align-content 속성
그리드 컨텐츠를 수직 정렬한다.
그리드 컨텐츠의 세로 너비가 그리드 컨테이너보다 작아야 사용이 가능하다.
flexbox의 align-items속성과 사용방법이 같음
justify-content 속성
그리드 컨텐츠를 수평 정렬한다.
그리드 컨텐츠의 가로 너비가 그리드 컨테이너보다 작아야 사용이 가능하다.
flexbox의 justify-content속성과 사용방법이 같음
place-content 속성
align-content와 justify-content의 단축 속성이다
하나만 입력하면 두 속성에 모두 적용된다.
.container {
place-content: <align-content> <justify-content>;
}align-items 속성
그리드 아이템들을 수직 정렬한다.
그리드 아이템의 세로 너비가 자신이속한 그리드의 행보다 작아야 사용이 가능하다.
flexbox의 align-items속성과 사용방법이 같음
justify-items 속성
그리드 아이템들을 수평 정렬한다.
그리드 아이템의 가로 너비가 자신이속한 그리드의 열보다 작아야 사용이 가능하다.
flexbox의 justify-content속성과 사용방법이 같음
place-items 속성
align-items와 justify-items의 단축 속성이다
하나만 입력하면 두 속성에 모두 적용된다.
.container {
place-items: <align-items> <justify-items>;
}Grid Items
정의된 컨테이너의 자식 요소들은 자동으로 Grid Items가 된다.
grid-row 속성
그리드 아이템을 배치하기 위해 그리드 선의 시작위치와 끝 위치를 지정한다.
.item {
grid-row: <grid-row-start> / <grid-row-end>;
}각 속성을 /로 구분한다.
grid-row 속성
그리드 아이템을 배치하기 위해 그리드 선의 시작위치와 끝 위치를 지정한다.
.item {
grid-column: <grid-column-start> / <grid-column-end>;
}각 속성을 /로 구분한다.
.item:nth-child(3) {
grid-row: 3 / 4;
grid-column: 2 / 4;
}
align-self
단일 그리드 아이템을 수직 정렬한다.
그리드 아이템의 세로 너비가 자신이 속한 그리드행의 크기보다 작아야한다.
위에있는 정렬하는 속성들과 사용방법은 같다.
justify-self
단일 그리드 아이템을 수평 정렬한다.
그리드 아이템의 가로 너비가 자신이 속한 그리드행의 크기보다 작아야한다.
place-self
align-self와 justify-self의 단축 속성이다. 하나의 값만 입력하면 두 속성에 모두 적용된다.
.item {
place-self: <align-self> <justify-self>;
}