grid
grid
속성은 2차원(행과 열)의 레아이웃 시스템을 제공하는 속성이다. flex
속성은 1차원 레이아웃을 위하는 속성이며, grid
는 2차원으로써 좀 더 편한 레이아웃을 구성할 수 있도록 도와준다.
grid 레이아웃은 grid item이라는 자식 요소와 gird container라는 부모 요소 외에 track, line, cell, area와 같은 구성요소를 가지고 있다.
출처 : https://armadillo-dev.github.io/css/understanding-grid-layout/
- grid container : 전체 그리드 레이아웃을 의미한다.
- grid item : conatiner에 속해 있는 자식 요소들을 의미한다.
- grid track : 행 또는 열을 의미한다.
- grid line : grid track을 구분하는 선을 의미한다. 선의 번호는 1번부터 시작한다.
- grid cell : 그리드 레이아웃의 가장 작은 요소이며, 한 개의 행과 한 개의 열로 이루어져 있다.
- grid area : 다수의 cell로 이루어진 영역을 의미한다.
추가로 그리드에서 fr
이라는 단위를 사용하는데 fr(fractional unit)
는 사용 가능한 공간에 대한 비율을 의미한다.
.container {
grid-template-rows: 2fr 3fr 50px 20%;
}
그리드 컬럼의 3번째 행은 50px를 사용하고 1번째 행은 남은 공간의 2/5, 2번째 행은 3/5 만큼을 사용하게 된다.
grid container
grid 레이아웃 중 부모 요소에 해당하며 grid item이라는 복수의 자식 요소들을 포함하고 있다.
속성 | 설명 |
---|---|
display | Grid Container를 정의 |
grid-template-rows | 명시적 행(Track)을 정의 |
grid-template-columns | 명시적 열(Track)을 정의 |
grid-template-areas | 영역 이름을 참조하여 템플릿 생성 |
grid-template | grid-template- 의 축약 |
row-gap(grid-row-gap) | 행과 행 사이의 간격을 정의 |
column-gap(grid-column-gap) | 열과 열 사이의 간격을 정의 |
gap(grid-gap) | -gap 의 축약 |
grid-auto-rows | 암시적 행(Track)을 정의 |
grid-auto-columns | 암시적 열(Track)을 정의 |
grid-auto-flow | 자동 배치 알고리즘 방식 정의 |
grid | grid-template- 과 grid-auto- 의 축약 |
align-content | 수직 방향(열 축)의 정렬 방법 |
justify-content | 수평 방향(행 축)의 정렬 방법 |
place-content | align-content 와 justify-content 의 축약 |
align-items | 수직 방향(열 축)에서의 item 정렬 방법 |
justify-items | 수평 방향(행 축)에서의 item 정렬 방법 |
place-items | align-items 와 justify-items 의 축약 |
display
display
속성은 grid 레이아웃을 설정하기 위해 필요한 속성이다.
값 | 의미 |
---|---|
grid | Block 특성의 Container 정의 |
inline-grid | Inline 특성의 Container 정의 |
grid
로 지정된 Container는 Block 요소와 같은 성향을 가지며 inline-grid
로 지정된 Container는 Inline 요소와 같은 성향을 가진다.
grid-template-rows / grid-template-columns
grid-template-rows
속성은 명시적 행 크기를, grid-template-columns
속성은 명시적 열 크기를 정의하며 동시에 라인 이름도 정의할 수 있다.fr
단위를 사용할 수 있다.
.container {
display: grid;
grid-template-rows: [선이름] 1행크기 [선이름] 2행크기 ...;
grid-template-columns: [선이름] 1열크기 [선이름] 2열크기 ...;
}
<html>
<head>
<style>
.container {
display: grid;
background-color: skyblue;
grid-template-rows: 100px 200px 50px;
grid-template-columns: [first-column] 100px [second-column] 200px [third-column] auto;
}
#item {
border: 1px solid black;
background-color: springgreen;
}
</style>
</head>
<body>
<h1>grid-template-rows/columns</h1>
<div class="container">
<div class="item1" id="item">1</div>
<div class="item2" id="item">2</div>
<div class="item3" id="item">3</div>
<div class="item4" id="item">4</div>
<div class="item5" id="item">5</div>
<div class="item6" id="item">6</div>
<div class="item7" id="item">7</div>
<div class="item8" id="item">8</div>
<div class="item9" id="item">9</div>
</divc>
</body>
</html>
repeat()
함수를 이용하여 동일한 크기의 행/열을 간단하게 만들 수 있다.
.container {
display: grid;
background-color: skyblue;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
}
grid-template-areas
grid-template-areas
속성은 item에 지정된 영역 이름(grid-area
속성)을 참조하여 템플릿을 생성하며 .(마침표)
는 빈 영역을 의미한다.
<html>
<head>
<style>
.container {
display: grid;
width: 300px;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
grid-template-areas:
"header header header"
"nav . main"
"footer footer footer";
}
.header {
grid-area: header;
background-color: red;
}
.main {
grid-area: main;
background-color: chartreuse;
}
.nav {
grid-area: nav;
background-color: orange;
}
.footer {
grid-area: footer;
background-color: orchid;
}
div {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>grid-template-areas</h1>
<div class="container">
<div class="header">header</div>
<div class="main">main</div>
<div class="nav">nav</div>
<div class="footer">footer</div>
</divc>
</body>
</html>
grid-template
grid-template
속성은 grid-template-rows
, grid-template-column
, grid-template-areas
의 축약 속성이다.
.container {
grid-template: grid-template-rows / grid-template-columns;
grid-template: grid-template-areas;
}
.container {
grid-template:
"areas" 1행너비
"areas" 2행너비
/ grid-template-columns;
}
.container {
display: grid;
grid-template:
"header header header" 80px
"main main aside" 350px
"footer footer footer" 130px
/ 200px 100px auto;
}
.container {
display: grid;
grid-template-rows: 80px 350px 130px;
grid-template-columns: 200px 100px auto;
grid-template-areas:
"header header header"
"main main aside"
"footer footer footer";
}
grid-row-gap / grid-column-gap
grid-row-gap
속성은 각 행과 행 사이의 간격, grid-column-gap
속성은 각 열과 열 사이의 간격을 지정한다.
.container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
grid-row-gap: 5px;
grid-column-gap: 15px;
}
gap
gap
속성은 grid-row-gap
과 grid-column-gap
의 축약 속성으로 각 행과 행, 열과 열 사이의 간격을 지정한다.
.container {
gap: <grid-row-gap> <grid-column-gap>;
}
.container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
gap: 20px 10px;
/*
gap: 10px; grid-row-gap: 10px + grid-column-gap: 10px
gap: 10px 0; grid-row-gap
gap: 0 10px; grid-column-gap
*/
}
grid-auto-rows
grid-auto-rows
속성은 암시적 행의 크기를 정의하며 item이 grid-template-rows
로 정의한 명시적 행을 벗어난 범위에 있을 경우 적용된다.
.container {
display: grid;
height: 300px;
width: 300px;
background-color: skyblue;
grid-template-rows: repeat(2, 150px);
grid-template-columns: repeat(2, 150px);
grid-auto-rows: 50px;
}
.item2 {
grid-row: 5 / 6;
grid-column: 1 / 2;
}
grid-auto-column
grid-auto-column
속성은 암시적 열의 크기를 정의하며 item이 grid-template-columns
로 정의한 명시적 열을 벗어난 범위에 있을 경우 적용된다.
.container {
display: grid;
height: 300px;
width: 300px;
background-color: skyblue;
grid-template-rows: repeat(2, 150px);
grid-template-columns: repeat(2, 150px);
grid-auto-columns: 60px;
}
.item2 {
grid-row: 2 / 3;
grid-column: 4 / 5;
}
.container {
display: grid;
height: 300px;
width: 300px;
background-color: skyblue;
grid-template-rows: repeat(2, 150px);
grid-template-columns: repeat(2, 150px);
grid-auto-columns: 60px;
grid-auto-rows: 50px;
}
.item2 {
grid-row: 5 / 6;
grid-column: 4 / 5;
}
grid-auto-flow
grid-auto-flow
속성은 위치를 지정하지 않은 item을 '자동 배치 알고리즘'을 통해 배치한다.
값 | 의미 | 기본값 |
---|---|---|
row | 각 행 축을 따라 차례로 배치 | row |
column | 각 열 축을 따라 차례로 배치 | |
row dense | 각 행 축을 따라 빈 영역을 채우면서 차례로 배치 | |
column dense | 각 열 축을 따라 빈 영역을 채우면서 차례로 배치 |
row
- 각 행 축을 따라 차례로 배치한다.(기본값)
.container {
display: grid;
height: 300px;
width: 300px;
background-color: skyblue;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
grid-auto-flow: row;
}
.item2 {
grid-column: span 3;
}
row dense
- 각 행 축을 따라 빈 영역을 채우면서 차례로 배치한다.
.container {
display: grid;
height: 300px;
width: 300px;
background-color: skyblue;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
grid-auto-flow: row dense;
}
.item2 {
grid-column: span 3;
}
column
- 각 열 축을 따라 차례로 배치한다.
.container {
display: grid;
height: 300px;
width: 300px;
background-color: skyblue;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
grid-auto-flow: column;
}
.item1 {
grid-column: 2 / span 2;
}
.item2 {
grid-column: span 3;
}
column dense
- 각 열 축을 따라 빈 영역을 채우면서 차례로 배치한다.
.container {
display: grid;
height: 300px;
width: 300px;
background-color: skyblue;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
grid-auto-flow: column dense;
}
.item1 {
grid-column: 2 / span 2;
}
.item2 {
grid-column: span 3;
}
grid
grid
속성은 grid-template-
와 grid-auto-
의 축약 속성이다.
.container {
grid: <grid-template>;
grid: <grid-template-rows> / <grid-template-columns>;
grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;
grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;
}
.container {
grid:
"header header header" 80px
"main main aside" 100px
"footer footer footer" 130px
/ 200px 100px 1fr;
}
.container {
grid-template:
"header header header" 80px
"main main aside" 100px
"footer footer footer" 130px
/ 200px 100px 1fr;
}
.container {
grid: 100px 200px / 100px 200px;
}
.container {
grid-template-rows: 100px 200px;
grid-template-columns: 100px 200px;
}
grid-auto-flow
작성 시에는 auto-flow
키워드를 사용하며 dense
값은 auto-flow
키워드 뒤에 작성한다.
.container {
grid: auto-flow 150px / 100px 100px;
}
.container {
grid-template-columns: 100px 100px;
grid-auto-flow: row;
grid-auto-rows: 150px;
}
.container {
grid: auto-flow dense 150px / 100px 100px;
}
.container {
grid-template-columns: 100px 100px;
grid-auto-flow: row dense;
grid-auto-rows: 150px;
}
.container {
grid: 150px 150px / auto-flow 150px;
}
.container {
grid-template-row: 150px 150px;
grid-auto-flow: column;
grid-auto-columns: 150px;
}
align-content
align-content
속성은 그리드 콘텐츠를 수직 방향(열 축) 기준으로 정렬한다.
그리드 콘텐츠의 높이가 container 높이보다 작아야 한다.
값 | 의미 | 기본값 |
---|---|---|
normal | stretch 와 동일 |
normal |
start | 시작점으로 정렬 | |
end | 끝점으로 정렬 | |
center | 수직 방향 가운데 정렬 | |
stretch | 열 축을 container 공간에 채우기 위해 그리드 콘텐츠를 늘림 | |
space-between | 첫 행은 시작점, 마지막 행은 끝점에 정렬되고 나머지 여백으로 고르게 정렬 | |
space-around | 각 행 위아래에 여백을 고르게 정렬 | |
space-evenly | 모든 여백을 고르게 정렬 |
start
- 시작점을 기준으로 정렬한다.
.container {
display: grid;
height: 500px;
width: 480px;
background-color: skyblue;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
gap: 10px;
align-content: start;
}
end
- 끝점을 기준으로 정렬한다.
.container {
display: grid;
height: 500px;
width: 480px;
background-color: skyblue;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
gap: 10px;
align-content: end;
}
center
- 수직 방향 기준으로 container 중앙에 정렬한다.
.container {
display: grid;
height: 500px;
width: 480px;
background-color: skyblue;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
gap: 10px;
align-content: center;
}
stretch
- 열 축을 container 공간에 채우기 위해 그리드 콘텐츠를 늘린다.(기본값)
.container {
display: grid;
height: 500px;
width: 480px;
background-color: skyblue;
grid-template-columns: repeat(3, 100px);
gap: 10px;
align-content: stretch;
}
space-between
- 첫 행은 시작점에, 마지막 행은 끝점에 정렬되고 나머지 여백을 균등한 간격으로 정렬한다.
.container {
display: grid;
height: 500px;
width: 480px;
background-color: skyblue;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
gap: 10px;
align-content: space-between;
}
space-around
- 각 행 위아래 여백을 고르게 정렬한다.
.container {
display: grid;
height: 500px;
width: 480px;
background-color: skyblue;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
gap: 10px;
align-content: space-around;
}
space-evenly
- 모든 여백을 고르게 정렬한다.
.container {
display: grid;
height: 500px;
width: 480px;
background-color: skyblue;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
gap: 10px;
align-content: space-evenly;
}
justify-content
justify-content
속성은 그리드 콘텐츠를 수평 방향(행 축) 기준으로 정렬한다.
그리드 콘텐츠의 너비가 container 너비보다 작아야 한다.
값 | 의미 | 기본값 |
---|---|---|
normal | stretch 와 동일 |
normal |
start | 시작점으로 정렬 | |
end | 끝점으로 정렬 | |
center | 수평 방향 가운데 정렬 | |
stretch | 행 축을 container 공간에 채우기 위해 그리드 콘텐츠를 늘림 | |
space-between | 첫 열은 시작점, 마지막 열은 끝점에 정렬되고 나머지 여백으로 고르게 정렬 | |
space-around | 각 열 좌우에 여백을 고르게 정렬 | |
space-evenly | 모든 여백을 고르게 정렬 |
start
- 시작점을 기준으로 정렬한다.
.container {
display: grid;
height: 500px;
width: 480px;
background-color: skyblue;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
gap: 10px;
justify-content: start;
}
end
- 끝점을 기준으로 정렬한다.
.container {
display: grid;
height: 500px;
width: 480px;
background-color: skyblue;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
gap: 10px;
justify-content: end;
}
center
- 수평 방향 기준으로 container 중앙에 정렬한다.
.container {
display: grid;
height: 500px;
width: 480px;
background-color: skyblue;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
gap: 10px;
justify-content: center;
}
stretch
- 행 축을 container 공간에 채우기 위해 그리드 콘텐츠를 늘린다.(기본값)
.container {
display: grid;
height: 500px;
width: 480px;
background-color: skyblue;
grid-template-columns: repeat(3, 100px);
gap: 10px;
justify-content: stretch;
}
space-between
- 첫 열은 시작점에, 마지막 열은 끝점에 정렬되고 나머지 여백을 균등한 간격으로 정렬한다.
.container {
display: grid;
height: 500px;
width: 480px;
background-color: skyblue;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
gap: 10px;
justify-content: space-between;
}
space-around
- 각 열 좌우 여백을 고르게 정렬한다.
.container {
display: grid;
height: 500px;
width: 480px;
background-color: skyblue;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
gap: 10px;
justify-content: space-around;
}
space-evenly
- 모든 여백을 고르게 정렬한다.
.container {
display: grid;
height: 500px;
width: 480px;
background-color: skyblue;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
gap: 10px;
justify-content: space-evenly;
}
place-content
place-content
속성은 align-content
와 justify-content
를 설정하기 위한 축약 속성이다.
.container {
place-content: <align-content> <justify-content>;
}
.container {
place-content: start space-evenly;
}
.container {
align-content: start;
justify-content: space-evenly;
}
.container {
place-content: space-around;
}
.container {
align-content: space-around;
justify-content: space-around;
}
align-items
align-items
속성은 그리드 item들을 수직 방향(열 축) 기준으로 정렬한다.
그리드 item의 높이가 자신이 속한 그리드 셀의 높이보다 작아야 한다.
값 | 의미 | 기본값 |
---|---|---|
normal | stretch 와 동일 |
normal |
start | 시작점으로 정렬 | |
end | 끝점으로 정렬 | |
center | 수직 방향 가운데 정렬 | |
stretch | 열 축을 채우기 위해 item을 늘림 |
start
- 시작점을 기준으로 정렬한다.
.container {
display: grid;
width: 450px;
height: 450px;
background-color: skyblue;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
align-items: start;
}
#item {
border: 1px solid black;
width: 100px;
height: 100px;
background-color: springgreen;
}
end
- 끝점을 기준으로 정렬한다.
.container {
display: grid;
width: 450px;
height: 450px;
background-color: skyblue;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
align-items: end;
}
#item {
border: 1px solid black;
width: 100px;
height: 100px;
background-color: springgreen;
}
center
- 수직 방향 기준으로 가운데 정렬한다.
.container {
display: grid;
width: 450px;
height: 450px;
background-color: skyblue;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
align-items: center;
}
#item {
border: 1px solid black;
width: 100px;
height: 100px;
background-color: springgreen;
}
stretch
- 열 축을 채우기 위해 item을 늘린다.(기본값)
.container {
display: grid;
width: 450px;
height: 450px;
background-color: skyblue;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
align-items: stretch;
}
#item {
border: 1px solid black;
width: 100px;
background-color: springgreen;
}
justify-items
justify-items
속성은 그리드 item들을 수평 방향(행 축) 기준으로 정렬한다.
그리드 item의 너비가 자신이 속한 그리드 셀의 너비보다 작아야 한다.
값 | 의미 | 기본값 |
---|---|---|
normal | stretch 와 동일 |
normal |
start | 시작점으로 정렬 | |
end | 끝점으로 정렬 | |
center | 수평 방향 가운데 정렬 | |
stretch | 행 축을 채우기 위해 item을 늘림 |
start
: 시작점을 기준으로 정렬한다.
.container {
display: grid;
width: 450px;
height: 450px;
background-color: skyblue;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
justify-items: start;
}
#item {
border: 1px solid black;
width: 100px;
height: 100px;
background-color: springgreen;
}
end
- 끝점을 기준으로 정렬한다.
.container {
display: grid;
width: 450px;
height: 450px;
background-color: skyblue;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
justify-items: end;
}
#item {
border: 1px solid black;
width: 100px;
height: 100px;
background-color: springgreen;
}
center
- 수평 방향 기준으로 가운데 정렬한다.
.container {
display: grid;
width: 450px;
height: 450px;
background-color: skyblue;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
justify-items: center;
}
#item {
border: 1px solid black;
width: 100px;
height: 100px;
background-color: springgreen;
}
stretch
- 행 축을 채우기 위해 item을 늘린다.(기본값)
.container {
display: grid;
width: 450px;
height: 450px;
background-color: skyblue;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
justify-items: stretch;
}
#item {
border: 1px solid black;
height: 100px;
background-color: springgreen;
}
place-items
place-items
속성은 align-items
와 justify-items
를 설정하기 위한 축약 속성이다.
.container {
place-items: <align-items> <justify-items>;
}
.container {
place-items: start end;
}
.container {
align-items: start;
justify-items: end;
}
.container {
place-items: center;
}
.container {
align-items: center;
justify-items: center;
}
'CSS' 카테고리의 다른 글
[CSS] 애니메이션(Animation) (52) | 2022.03.18 |
---|---|
[CSS] Grid(2) (39) | 2022.03.17 |
[CSS] Flexbox(2) (61) | 2022.03.15 |
[CSS] Flexbox(1) (81) | 2022.03.14 |
[CSS] Transform (65) | 2022.03.13 |
댓글