CSS 속성 - Grid (1)
(1) Grid 개요
CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다.
Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하여 좀 더 복잡한 레이아웃을 위해 우리는 CSS Grid를 사용할 수 있습니다.
CSS Grid는 예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈 입니다
파이어폭스 브라우저로 보기 쉽기 때문에 보기 좋은 브라우저에서 공부하는게 좋다고 한다
Grid Properties
CSS Grid는 CSS Flex와 같이 Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분되어 있습니다.
Container는 Items를 감싸는 부모 요소이며, 그 안에서 각 Item을 배치할 수 있습니다.
Grid Container Properties
Grid Container를 위한 속성들은 다음과 같습니다.
속성, 의미
Display : 그리드 컨테이너(Container)를 의미
Grid-template-rows : 명시적 행(Track)의 크기를 정의
Grid-template-columns : 명시적 열(Track)의 크기를 정의
Grid-template-areas : 영역(Area) 이름을 참조해 템플릿 생성
Grid-template : grid-template-xxx의 단축 속성
row-gap(grid-row-gap) :
…
…
================
(2) Grid Containers 속성 - display
Display
Grid Container(컨테이너)를 정의합니다.
정의된 컨테이너의 자식 요소들은 자동으로 Grid Items(아이템)로 정의됩니다.
그리드를 사용하기 위해 컨테이너에 필수로 작성합니다!
값, 의미
Grid : Block 특성의 Grid Containers를 정의
Inline-grid : Inline 특성의 Grid Containers를 정의
.container {
Display: grid;
}
(예시)
<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>
</div>
.container {
display: grid;
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 1fr);
border: 4px solid lightgray;
}
.item {
border: 10px solid red;
}
.item:nth-child(1) {
grid-row: 1 / 3;
grid-column: 1 / 3;
}
.item:nth-child(2) {
grid-row: 1 / 3;
}
.item:nth-child(4) {
grid-row: 4 / 5;
grid-column: -1 / -3;
}
================
(3) Grid Containers 속성 - grid-template-areas
지정된 그리드 영역 이름(grid-area)을 참조해 그리드 템플릿을 생성합니다.
grid-area는 Grid Container가 아닌 Grid Item에 적용하는 속성 입니다.
(예시)
.container {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"header header header"
"main main aside"
"footer footer footer"
}
header { grid-area: header; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
(예시2)
<div class="container">
<div class="item">HEADER</div>
<div class="item">MAIN</div>
<div class="item">ASIDE</div>
<div class="item">FOOTER</div>
</div>
.container {
width: 600px;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"header header header"
"main . aside"
". footer footer"
}
.item {
border: 10px solid red;
}
.item:nth-child(1) {
grid-area: header;
}
.item:nth-child(2) {
grid-area: main;
}
.item:nth-child(3) {
grid-area: aside;
}
.item:nth-child(4) {
grid-area: footer;
}
================
(4) Grid Containers 속성 - row-gap, column-gap, gap
## Row-gap(grid-row-gap)
각 행과 행 사이의 간격(Gutter)을 지정합니다.
더 명확하게는 그리드 선(Grid Line)의 크기를 지정한다고 표현할 수 있습니다.
.container {
Row-gap: 크기;
}
## column-gap(grid-column-gap)
각 열과 열 사이의 간격(Gutter)을 지정합니다.
(예시)
<div class="container">
<div class="item">HEADER</div>
<div class="item">MAIN</div>
<div class="item">ASIDE</div>
<div class="item">FOOTER</div>
</div>
.container {
width: 600px;
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"header header header"
"main . aside"
". footer footer";
row-gap: 30px;
column-gap: 15px;
gap: 30px 15px;
}
.item {
border: 10px solid red;
}
.item:nth-child(1) {
grid-area: header;
}
.item:nth-child(2) {
grid-area: main;
}
.item:nth-child(3) {
grid-area: aside;
}
.item:nth-child(4) {
grid-area: footer;
}
Gap(grid-gap)
각 행과 행, 열과 열 사이의 간격(Gutter)을 지정합니다.
(예시)
.container {
Gap: <grid-row-gap> <grid-column-gap>;
}
참고자료 : https://heropy.blog/2019/08/17/css-grid
================
(5) Grid Containers 속성 - grid-auto-rows, grid-auto-columns
Grid-auto-rows
(중요!!) 암시적 행(Track)의 크기를 정의합니다.
아이템(Item)이 grid-template-rows 로 정의한 명시적 행 외부에 배치되는 경우 암시적
행의 크기가 적용됩니다.
Grid-auto-columns
암시적 열(Track)의 크기를 정의합니다.
아이템(Item)이 grid-template-columns로 정의한 명시적 열 외부에 배치되는 경우 암시적
열의 크기가 적용됩니다.
(예시)
.container {
width: 600px;
display: grid;
grid-template-rows: repeat(2, 100px);
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 100px;
grid-auto-colums: 1fr;
}
.item:nth-child(3) {
grid-row: 3 / 4;
Grid-columns: 3 / 4;
}
다음과 같이 아이템이 배치되는 위치에 맞게 암시적 행과 열의 개수가 생성됩니다.
암시적 크기가 적용된 행과 열은 양수 라인 번호만 사용할 수 있습니다. (음수 사용 불가)
================
(6) Grid Containers 속성 - grid-auto-flow
배치하지 않은 아이템(Item)을 어떤 방식의 ‘자동 배치 알고리즘’으로 처리할지 정의합니다.
배치한 아이템은 grid-area(이하 개별 속성 포함)를 사용한 아이템을 의미합니다.
값, 의미 , 기본값
Row , 각 행 축(왼쪽에서 오른쪽으로 가는 수평축)을 따라 차례로 배치
Column , 각 열 축(수직축)을 따라 차례로 배치
Row dense(dense) , 각 행 축을 따라 차례로 배치, 빈 영역 메움!
Column dense , 각 열 축을 따라 차례로 배치, 빈영역 메움!
다음은 row와 row dense 에 대한 예제 입니다.
참고자료 : https://heropy.blog/2019/08/17/css-grid/
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
.container {
width: 600px;
display: grid;
grid-tempalte-rows: repeat(3, 100px);
grid-tempalte-columns: repeat(3, 1fr);
grid-auto-flow: dense;
}
.item {
border: 10px solid red;
}
.item:nth-child(1) {
grid-column: span 2;
}
.item:nth-child(2) {
grid-column: -1 / -3;
}
================
(7) Grid Containers 속성 - grid-template-rows, grid-template-columns
Grid-template-rows
명시적 행(Track)의 크기를 정의합니다.
동시에 라인(Line)의 이름도 정의할 수 있습니다.
fr (fraction, 공간 비율) 단위를 사용할 수 있습니다.
repeat() 반복 함수를 사용할 수 있습니다.
사용 방법은 grid-template-columns와 같습니다.
참고자료 : https://heropy.blog/2019/08/17/css-grid/
각 라인은 행(Row, Track)과 열(Column, Track)의 개수대로 숫자(양수/음수) 라인 이름이 자동으로 지정되어
있어서, 꼭 필요한 경우가 아니면 라인 이름을 정의
(예시)
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
.container {
width: 600px;
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 1fr [center-start] 1fr [center-end] 1fr;
grid-auto-flow: dense;
}
.item {
border: 10px solid red;
}
.item:nth-child(1) {
grid-column: center-start / center-end;
}
## Grid-template-columns
명시적 열(Track)의 크기를 정의합니다.
동시에 라인(Line)의 이름도 정의할 수 있습니다.
fr(fraction, 공간 비율) 단위를 사용할 수 있습니다.
repeat() 함수를 사용할 수 있습니다.
사용 방법은 grid-template-rows와 같습니다.
참고자료 : https://heropy.blog/2019/08/17/css-grid/
(예시)
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
.container {
width: 600px;
display: grid;
grid-template-columns: repeat(2, 100px 200px);
}
.item {
border: 10px solid red;
}
================
(8) Grid Items 속성 - grid-row, grid-column, grid-area
## grid-row
Grid-row-start과 grid-row-end 의 단축 속성입니다.
각 속성을 /로 구분하는 것에 주의해주세요
.item {
Grid-row: <grid-row-start> / <grid-row-end>;
}
각 코드 블록 내 아이템(.item)들은 모두 같은 의미 입니다.
.item {
Grid-row-start: 1;
Grid-row-end: 2;
}
.item {
Grid-row: 1 / 2;
}
—-> 같은 결과이다
## grid-area
Grid-row-start, grid-column-start, grid-row-end 그리고 grid-column-end의 단축 속성입니다.
혹은 grid-template-areas가 참조할 영역(Area)이름을 설정할 수도 있습니다.
영역 이름을 설정할 경우 grid-row와 grid-column 개념은 무시됩니다.
(예시)
.item {
grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;
grid-area: 영역이름;
}
.item {
Grid-row: 2 / 3;
Grid-column: span 2 / -1;
}
.item {
Grid-area: 2 / span 2 / 3 / -1;
}
================
(9) Grid Containers 속성 - grid-template
grid-template-rows, grid-template-columns 그리고 grid-template-areas의 단축 속성 입니다.
.container {
Grid-template: <grid-template-rows> / <grid-template-columns>;
Grid-template: <grid-template-areas>;
}
다음과 같이 작성할 수도 있습니다.
.container {
Grid-template:
[1행시작선이름] “AREAS” 행너비 [1행끝선이름]
[2행시작선이름] “AREAS” 행너비 [2행끝선이름]
/ <grid-template-columns>;
}
.container {
display: grid;
grid-template-rows: 80px 350px 130px;
grid-template-columns: 2fr 100px 1fr;
grid-template-areas:
"header header header"
"main . aside"
"footer footer footer";
}
위에 코드와 아래 코드는 같은 결과를 도출한다.
.container {
display: grid;
grid-template:
"header header header" 80px
"main . aside" 350px
"footer footer footer" 130px
/2fr 100px 1fr
}
================
(10) Grid Containers 속성 - grid
grid-template-xxx과 grid-auto-xxx의 단축 속성 입니다.
(예시)
.container {
Grid: <grid-template>;
Grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;
Grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;
}
각 코드 블록 내 컨테이너(.container)들은 모두 같은 의미 입니다.
(예시)
.container {
grid: <grid-template-rows> / <grid-template-columns>;
}
.container {
grid: 100px 200px / 1fr 2fr;
}
.container {
grid-template-rows: 100px 200px;
grid-template-columns: 1fr 2fr;
}
grid-auto-flow를 작성할 때는 auto-flow 키워드를 사용합니다.
/로 구분해 작성하는 위치가 곧 row, column 값을 의미합니다.
따라서, row, column 값은 작성하지 마세요.
dense 값은 auto-flow 뒤에 붙여줍니다.
(예제1)
.container {
grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;
}
.container {
grid: 100px 100px / auto-flow 150px;
}
.container {
grid-template-row: 100px 100px;
grid-auto-flow: column;
grid-auto-columns: 150px;
}
(예제2)
.container {
Grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;
}
.container{
Grid: auto-flow 150px / 100px 100px;
}
.container {
grid-template-columns: 100px 100px;
grid-auto-flow: row;
grid-auto-rows: 150px;
}
(예제3)
.container {
Grid: auto-flow dense 150px / 100px 100px;
}
.container {
grid-template-columns: 100px 100px;
grid-auto-flow: row dense;
grid-auto-rows: 150px;
}