본문 바로가기
Front-end/Web

CSS속성 - Grid

by 안녕주 2021. 2. 12.

1. Grid 개요

  • Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공
  • Flexible Box는 비교적 단순한 1차원 레이아웃을 위해 사용
  • CSS Grid는 예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈이다.
  • Container(컨테이너)와 Item(아이템)이라는 두 가지 개념으로 구분, Container는 Items를 감싸는 부모 요소이며, 그 안에서 각 Item을 배치할 수 있다.

-1) 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) 행과 행 사이의 간격(Line)을 정의
column-gap(grid-column-gap) 열과 열 사이의 간격(Line)을 정의
gap(grid-gap) xxx-gap의 단축 속성
grid-auto-rows 암시적인 행(Track)의 크기를 정의
grid-auto-columns 암시적인 열(Track)의 크기를 정의
grid-auto-flow 자동 배치 알고리즘 방식을 정의
grid grid-template-xxx과 grid-auto-xxx의 단축 속성
align-content 그리드 콘텐츠(Grid Contents)를 수직(열 축) 정렬
justify-content 그리드 콘텐츠를 수평(행 축) 정렬
place-content align-content와 justify-content의 단축 속성
align-items 그리드 아이템(Items)들을 수직(열 축) 정렬
justify-items 그리드 아이템들을 수평(행 축) 정렬
place-items align-items와 justify-items의 단축 속성

 

-2) Grid Item 속성

속성 의미
grid-row-start 그리드 아이템(Item)의 행 시작 위치 지정
grid-row-end 그리드 아이템의 행 끝 위치 지정
grid-row grid-row-xxx의 단축 속성(행 시작/끝 위치)
grid-column-start 그리드 아이템의 열 시작 위치 지정
grid-column-end 그리드 아이템의 열 끝 위치 지정
grid-column grid-column-xxx의 단축 속성(열 시작/끝 위치)
grid-area 영역(Area) 이름을 설정하거나, grid-row와 grid-column의 단축 속성
align-self 단일 그리드 아이템을 수직(열 축) 정렬
justify-self 단일 그리드 아이템을 수평(행 축) 정렬
place-self align-self와 justify-self의 단축 속성
order 그리드 아이템의 배치 순서를 지정
z-index 그리드 아이템의 쌓이는 순서를 지정

 

2. Grid Containers 속성 - display

: Grid Container(컨테이너)를 정의

  • 정의된 컨테이너의 자식 요소들은 자동으로 Grid Items(아이템)로 정의
  • 그리드를 사용하기 위해 컨테이너에 필수로 작성해야한다.
값 의미
grid Block 특성의 Grid Container를 정의
inline-grid Inline 특성의 Grid Container를 정의

 

- display를 명시해줘야한다.

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
.container{
  display: inline-grid; /*inline 요소같은 grid*/
  width: 300px;
  height: 250px;
  border: 4px solid gray;
}
.item{
  border: 2px dashed red;
}

3. Grid Containers 속성 기초 - grid-template-rows, grid-template-columns

-1) grid-template-rows

: 행의 크기를 정의

  • 라인(Line)의 이름도 정의할 수 있다.
  • fr(fraction, 공간 비율) 단위를 사용할 수 있다.
  • repeat() 함수를 사용할 수 있다.

-2) grid-template-columns

: 열의 크기를 정의

  • 라인(Line)의 이름도 정의할 수 있다.
  • fr(fraction, 공간 비율) 단위를 사용할 수 있다.
  • repeat() 함수를 사용할 수 있다.

- 예제 : grid-template-rows와 grid-template-columns 사용

<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>
.container{
  display: grid;
  grid-template-rows: repeat(2,100px); /*100px 100px 과 동일*/
  grid-template-columns: repeat(3,1fr); /*1fr 1fr 1fr 과 동일*/
  border: 4px solid gray;
}
.item{
  border: 2px dashed red;
}

참고 사진

4. Grid Items 속성 기초 - grid-row, grid-column

-1) grid-row

: grid-row-start과 grid-row-end의 단축 속성 (각 속성을 /로 구분)

  • 원하는 item을 원하는 위치에 두기위해 사용

-2) grid-column

: grid-column-start과 grid-column-end의 단축 속성 (각 속성을 /로 구분)

  • 원하는 item을 원하는 위치에 두기위해 사용

- 예제 : grid-row, grid-column을 사용해서 원하는 위치에 div 두기

<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>
.container{
  width: 600px;
  margin:30px;
  display: grid;
  grid-template-rows: repeat(4,100px);
  grid-template-columns: repeat(3,1fr);
  border: 4px solid gray;
}
.item{
  border: 10px solid red;
  font-size: 30px;
}
.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;
}

 

5. 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; }

 

- 예제 : grid-template-areas로 영역 지정

<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{
  border: 4px solid gray;
  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;
}

 

6. Grid Containers 속성 기초 - row-gap, column-gap, gap

-1) row-gap

: 각 행과 행 사이의 간격을 지정 (더 정확하게는 그리드 선(Grid Line)의 크기를 지정한다고 표현)

 

-2) column-gap

: 각 열과 열 사이의 간격을 지정

 

-3) 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{
  border: 4px solid gray;
  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; /*row-gap, column-gap의 단축속성*/
}
.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;
}

 

7. Grid Containers 속성 기초 - grid-auto-rows, grid-auto-columns

-1) grid-auto-rows

: 암시적 행(Track)의 크기를 정의

  • 아이템(Item)이 grid-template-rows로 정의한 명시적 행 외부에 배치되는 경우 암시적 행의 크기가 적용
.container {
  width: 300px;
  height: 200px;
  display: grid;
  grid-template-rows: 100px 100px; /* 명시적 2개 행 정의 */
  grid-template-columns: 150px 150px; /* 명시적 2개 열 정의 */
  grid-auto-rows: 100px; /* 그 외(암시적) 행의 크기 정의 */
}
.item:nth-child(3) {
  grid-row: 3 / 4;
}

 

-2) grid-auto-columns

: 암시적 열(Track)의 크기를 정의

  • 아이템(Item)이 grid-template-columns로 정의한 명시적 열 외부에 배치되는 경우 암시적 열의 크기가 적용
.container {
  width: 300px;
  height: 200px;
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 150px 150px;
  grid-auto-rows: 100px;
  grid-auto-columns: 100px;
}
.item:nth-child(3) {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

- 예제 : 암시적 행과 열, grid-auto-rows, grid-auto-columns

<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>
.container{
  width: 600px;
  display: grid;
  grid-template-rows: repeat(2, 100px);
  grid-template-columns: repeat(3, 1fr);
  border: 3px dashed lightgray;
  grid-auto-rows: 100px;
  grid-auto-columns: 1fr;
}
.item{
  border: 10px solid red;
}
.item:nth-child(1){
  grid-column: 1/3;
}
.item:nth-child(2){
  grid-column: 3/5;
}
.item:nth-child(3){
  grid-column: span 2;
}
.item:nth-child(4){
  grid-row: 5/7;
  grid-column: 6/7;
}

 

- 다음과 같이 아이템이 배치되는 위치에 맞게 암시적 행과 열의 개수가 생성된다.
암시적 크기가 적용된 행과 열은 양수 라인 번호만 사용할 수 있다.(음수 사용 불가)

8. Grid Containers 속성 기초 - grid-auto-flow

: 배치하지 않은 아이템(Item)을 어떤 방식의 ‘자동 배치 알고리즘’으로 처리할지 정의

  • 배치한 아이템은 grid-area(이하 개별 속성 포함)를 사용한 아이템을 의미
값 의미 기본값
row 각 행 축을 따라 차례로 배치(수평으로 흐르게) row
column 각 열 축을 따라 차례로 배치(수직으로 흐르게)  
row dense(dense) 각 행 축을 따라 차례로 배치, 빈 영역 메움!  
column dense 각 열 축을 따라 차례로 배치, 빈 영역 메움!  

 

- 예제1 : row, row dense

/* For row & row dense */
.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row || row dense || dense;
}
.item:nth-child(2) {
  grid-column: span 3;
}

 

- 예제2 : column, column dense

/* For column & column dense */
.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column || column dense;
}
.item:nth-child(1) {
  grid-column: 2 / span 2;
}
.item:nth-child(2) {
  grid-column: span 2;
}

- 예제3 : 복합

<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: repeat(23, 100px);
  grid-template-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;
}

 

9. Grid Containers 속성 기초 - grid-template-rows, grid-template-columns

-1) grid-template-rows

: 명시적 행(Track)의 크기를 정의

  • 동시에 라인(Line)의 이름도 정의할 수 있다.
  • fr(fraction, 공간 비율) 단위를 사용할 수 있다.
  • repeat() 함수를 사용할 수 있다.
.container {
  display: grid;
  grid-template-rows: 1행크기 2행크기 ...;
  grid-template-rows: [선이름] 1행크기 [선이름] 2행크기 [선이름] ...;
} 			/*선이름에 대괄호 붙이기*/
/* 각 행의 크기를 정의합니다. */
.container {
  grid-template-rows: 100px 200px;
}
/* 동시에 각 라인의 이름도 정의할 수 있습니다. */
.container {
  grid-template-rows: [first] 100px [second] 200px [third];
}
/* 라인에 중복된 이름을 지정할 수 있습니다. */
.container {
  grid-template-rows: [row1-start] 100px [row1-end row2-start] 200px [row2-end];
}

- 꼭 필요한 경우가 아니면 라인 이름을 정의할 필요가 없다.

 

- 예시 : grid-template-rows 사용법

<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 / cent-end;
}

 

-2) grid-template-columns

: 명시적 열(Track)의 크기를 정의

  • 동시에 라인(Line)의 이름도 정의할 수 있다.
  • fr(fraction, 공간 비율) 단위를 사용할 수 있다.
  • repeat() 함수를 사용할 수 있다.

- repeat()함수 예시

.container {
  grid-template-columns: repeat(4, 100px 200px 50px);
  /* grid-template-columns: 100px 200px 50px 100px 200px 50px 100px 200px 50px 100px 200px 50px; */
}
.container {
  grid-template-columns: repeat(4, 1fr 2fr 3fr);
  /* grid-template-columns: 1fr 2fr 3fr 1fr 2fr 3fr 1fr 2fr 3fr 1fr 2fr 3fr; */
}

 

10. Grid Items 속성 - grid-row, grid-column, grid-area

-1) grid-row

: grid-row-start과 grid-row-end의 단축 속성 (각 속성을 /로 구분)

 

- 예시1 : 같은 블럭에 있는 코드는 같은 의미!

.item {
  grid-row-start: 1;
  grid-row-end: 2;
}
.item {
  grid-row: 1 / 2;
}

- 예시2: 같은 블럭에 있는 코드는 같은 의미! (span은 확장하는 개념)

.item {
  grid-row-start: 2;
  grid-row-end: span 3;
}
.item {
  grid-row: 2 / span 3;
}
.item {
  grid-row: 2 / 5;
}

- 예시3: 같은 블럭에 있는 코드는 같은 의미! (span은 확장하는 개념)

.item {
  grid-row-start: span 3;
  grid-row-end: 4;
}
.item {
  grid-row: span 3 / 4;
}
.item {
  grid-row: 1 / 4;
}

 

-2) grid-column

: grid-column-start과 grid-column-end의 단축 속성 (각 속성을 /로 구분)

 

 

-3) 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: 영역이름;
}

 

- 예시1 : 같은 블럭에 있는 코드는 같은 의미!

.item {
  grid-row: 2 / 3;
  grid-column: span 2 / -1;
}
.item {
  /* '시작 / 시작 / 끝 / 끝'임에 주의합시다! */
  grid-area: 2 / span 2 / 3 / -1;
}

 

 

11. 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>;
}

 

- 예시1 : 같은 블럭의 코드는 같은 내용

<div class="container">
  <header>HEADER</header>
  <main>MAIN</main>
  <aside>ASIDE</aside>
  <footer>FOOTER</footer>
</div>
.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; }

/*구버전*/
.container {
  display: grid;
  grid-template-rows: 80px 350px 130px;
  grid-template-columns: 2fr 100px 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; }

 

 

12. 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>;
}

 

- 예시1 : 같은 블록 내 코드는 모두 같은 의미

.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;
}
.container {
  grid: <grid-template>;
}
.container {
  grid:
    "header header header" 80px
    "main main aside" 350px
    "footer footer footer" 130px
    / 2fr 100px 1fr;
}
.container {
  grid-template:
    "header header header" 80px
    "main main aside" 350px
    "footer footer footer" 130px
    / 2fr 100px 1fr;
}

 

 - grid-auto-flow

  • 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;
}       /*100px 짜리 행 두개*/ /*150px은 암시적열의 크기(grid-auto-columns*/
.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;
}

 

13. Grid Containers 속성 기초 - align-content, justify-content

-1) align-content

: 그리드 콘텐츠(Contents)를 수직(열 축) 정렬

  • 그리드 콘텐츠의 세로 너비가 그리드 컨테이너(Container)보다 작아야 한다.
값 의미 기본값
normal stretch와 같습니다. normal
start 시작점(위쪽) 정렬  
center 수직 가운데 정렬  
end 끝점(아래쪽) 정렬  
space-around 각 행 위아래에 여백을 고르게 정렬  
space-between 첫 행은 시작점에, 끝 행은 끝점에 정렬되고 나머지 여백으로 고르게 정렬  
space-evenly 모든 여백을 고르게 정렬  
stretch 열 축을 채우기 위해 그리드 콘텐츠를 늘림  

 

- 예제

.container {
  width: 450px;
  height: 450px;
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  align-content: <align-content>;
}

-2) justify-content

: 그리드 콘텐츠(Contents)를 수평(행 축) 정렬합니다.

  • 그리드 콘텐츠의 가로 너비가 그리드 컨테이너(Container)보다 작아야 한다.
값 의미 기본값
normal stretch와 같습니다. normal
start 시작점(왼쪽) 정렬  
center 수평 가운데 정렬  
end 끝점(오른쪽) 정렬  
space-around 각 열 좌우에 여백을 고르게 정렬  
space-between 첫 열은 시작점에, 끝 열은 끝점에 정렬되고 나머지 여백으로 고르게 정렬  
space-evenly 모든 여백을 고르게 정렬  
stretch 행 축을 채우기 위해 그리드 콘텐츠를 늘림  

 

- 예제

.container {
  width: 450px;
  height: 450px;
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  justify-content: <justify-content>;
}

14. Grid Containers 속성 기초 - align-items, justify-items

-1) align-items

: 그리드 아이템(Items)들을 수직(열 축) 정렬

  • 그리드 아이템의 세로 너비가 자신이 속한 그리드 행(Track)의 크기보다 작아야 한다.
값 의미 기본 값
normal stretch와 같습니다. normal
start 시작점(위쪽) 정렬  
center 수직 가운데 정렬  
end 끝점(아래쪽) 정렬  
stretch 열 축을 채우기 위해 그리드 아이템을 늘림  

 

-예제

.container {
  width: 450px;
  height: 450px;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  align-items: <align-items>;
}

 

-2) justify-items

: 그리드 아이템(Items)들을 수평(행 축) 정렬

  • 그리드 아이템의 가로 너비가 자신이 속한 그리드 열(Track)의 크기보다 작아야 한다.
값 의미 기본값
normal stretch와 같습니다. normal
start 시작점(왼쪽) 정렬  
center 수평 가운데 정렬  
end 끝점(오른쪽) 정렬  
stretch 행 축을 채우기 위해 그리드 아이템을 늘림  

 

-예제

.container {
  width: 450px;
  height: 450px;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  justify-items: <justify-items>;
}

 

15. Grid Items 속성 - align-self, justify-self

-1) align-self

: 단일 그리드 아이템(Item)을 수직(열 축) 정렬

  • 그리드 아이템의 세로 너비가 자신이 속한 그리드 행(Track)의 크기보다 작아야 한다.
값 의미 기본 값
normal stretch와 같습니다. normal
start 시작점(위쪽) 정렬  
center 수직 가운데 정렬  
end 끝점(아래쪽) 정렬  
stretch 열 축을 채우기 위해 그리드 아이템을 늘림  

 

-예제

.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
}
.item:nth-child(1) { align-self: start; }
.item:nth-child(2) { align-self: center; }
.item:nth-child(3) { align-self: end; }
.item:nth-child(4) { align-self: stretch; }

 

 

-2) justify-self

: 단일 그리드 아이템(Item)을 수평(행 축) 정렬

  • 그리드 아이템의 세로 너비가 자신이 속한 그리드 열(Track)의 크기보다 작아야 한다.
값 의미 기본값
normal stretch와 같습니다. normal
start 시작점(왼쪽) 정렬  
center 수평 가운데 정렬  
end 끝점(오른쪽) 정렬  
stretch 행 축을 채우기 위해 그리드 아이템을 늘림  

 

-예제

.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
}
.item:nth-child(1) { justify-self: start; }
.item:nth-child(2) { justify-self: center; }
.item:nth-child(3) { justify-self: end; }
.item:nth-child(4) { justify-self: stretch; }

 

16. Grid Items 속성 - order, z-index

-1) order

: 그리드 아이템이 자동 배치(정렬)되는 순서를 변경할 수 있다. (숫자가 작을수록 앞서 배치)

.container {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(3, 1fr);
}
.item:nth-child(1) { order: 1; }
.item:nth-child(3) { order: 5; }
.item:nth-child(5) { order: -1; }

 

-2) z-index

: z-index 속성을 이용해 아이템이 쌓이는 순서를 변경할 수 있다.

- position이라는 속성이 있어야 쓸 수 있었다.

.item:nth-child(1) {
  grid-area: 1 / 1 / 2 / 3;  /*1-->2 , 2-->3*/
}
.item:nth-child(2) {
  grid-area: 1 / 2 / 3 / 3;  /*1-->3 , 2-->3*/
  z-index: 1;
}
.item:nth-child(3) {
  grid-area: 2 / 2 / 3 / 4;   /*2-->3 , 2-->4*/
}

 

17. Grid Item 함수 - repeat, minmax, fit-content

-1) repeat ()

: repeat() 함수는 행/열(Track)의 크기 정의를 반복

  • ‘반복되는 횟수’와 ‘행/열의 크기 정의’를 인수로 사
  • grid-template-rows와 grid-template-columns에서 사용

- 예제 : repeat()

/* 9컬럼 그리드 */
.container {
  grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px;
}
.container {
  grid-template-columns: repeat(9, 100px);
}
.container {
  grid-template-rows: [row-start] 200px [row-end row-start] 200px [row-end];
  grid-template-columns: [col-start] 100px [col-end col-start] 100px [col-end col-start] 100px [col-end];
}
.container {
  grid-template-rows: repeat(2, [row-start] 200px [row-end]);
  grid-template-columns: repeat(3, [col-start] 100px [col-end]);
}
.container {
  grid-template: repeat(2, [row-start] 200px [row-end]) / repeat(3, [col-start] 100px [col-end]);
}                          /*row 정의*/                 /* column 정의*/

 

 

-2) minmax()

: minmax() 함수는 행/열(Track)의 ‘최소/최대 크기’를 정의

  • 첫 번째 인수는 ‘최솟값’이고 두 번째 인수는 ‘최댓값’이다.
  • grid-template-rows, grid-template-columns, grid-auto-rows 그리고 grid-auto-columns에서 사용

- 예제

container {
  grid-template-columns: minmax(100px, 1fr) minmax(200px, 1fr);
}

 

 

-3) fit-content()

: fit-content() 함수는 행/열(Track)의 크기를 그리드 아이템(Item)이 포함하는 내용(Contents) 크기에 맞춘다.

  • ‘내용의 최대 크기’를 인수로 사용한다.
  • minmax(auto, max-content)와 유사

-예제

.container {
  grid-template-columns: fit-content(300px) fit-content(300px);
}

- 예제 :fit-content

<div class="container">
  <div class="item">Hello Zo0~</div>
  <div class="item">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
.container{
  border: 5px solid lightgray;
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: fit-content(300px) fit-content(100%) ;
}
.item{
  border: 5px solid green;
}

 

18. Grid Items 단위 - fr, min-content, max-content

-1) fr

: fr(fractional unit)은 사용 가능한 공간에 대한 비율을 의미

.container {
  grid-template-columns: 1fr 2fr 100px 25%;
}

-예제  : fr을 사용해 남은 공간을 배분

<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{
  border: 5px solid lightgray;
  display: grid;
  grid-template-columns: 3fr 2fr 100px 25%;
}
.item{
  border: 5px solid green;
}

 

 

-2) min-content

: 그리드 아이템이 포함하는 내용(Contents)의 최소 크기를 의미

<div class="container">
  <div class="item">Hello HEROPY~</div>
  <!-- ... -->
</div>
.container {
  grid-template-columns: min-content 1fr;
}

- 한글을 사용하는 경우 word-break: keep-all;를 설정하면 정상적으로 동작

 

 

-3) max-content

: 그리드 아이템이 포함하는 내용(Contents)의 최대 크기를 의미

 

<div class="container">
  <div class="item">Hello HEROPY~</div>
  <!-- ... -->
</div>
.container {
  grid-template-columns: max-content 1fr;
}

- 예제 : 총 4컬럼 그리드를 생성하며 각 열(Track)은 최대 1fr 크기를 가지지만, max-content를 통해 포함된 그리드 아이템의 내용보다 작아질 수 없다.

.container {
  grid-template-columns: repeat(4, minmax(max-content, 1fr));
}

 

- 예제 

<div class="container">
  <div class="item">동해물과 백드산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 </div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>
.container{
  border: 5px solid lightgray;
  display: grid;
  grid-template-columns: min-content 1fr;
  word-break: keep-all;
}
.item{
  border: 5px solid green;
  font-size: 20px;
}

19. Grid Items 단위 - auto-fill, auto-fit

  • 행/열(Track)의 개수를 그리드 컨테이너(Container) 및 행/열 크기에 맞게 자동으로(암시적) 조정
  • repeat() 함수와 같이 사용하며, 행/열과 아이템(Item) 개수가 명확할 필요가 없거나 명확하지 않은 경우 유용 (반응형 그리드)
  • auto-fill과 auto-fit은 간단한 차이점을 제외하면 동일하게 동작

- 예시 : 4컬럼 그리드 예제에서 컨테이너의 크기가 아이템들을 수용하기 충분하지 않은 경우 아이템은 넘치기 시작한다.

.container {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}

- 예제 : 넘치는 것을 auto-fill으로 맞추기

<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 class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>
.container{
  width: 400px;
  border: 5px solid lightgray;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  grid-auto-rows: 100px;
  
}
.item{
  border: 5px solid green;
  font-size: 20px;
}

 

- auto-fill과 auto-fit의 차이

  • 차이점은 그리드 컨테이너가 하나의 행/열(Track)에 모든 아이템을 수용하고 남는 공간이 있을 때 발생
  • auto-fill은 남는 공간(빈 트랙)을 그대로 유지하고, auto-fit은 남는 공간을 축소
.container.auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.container.auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

 

Thanks to heropy.blog/2019/08/17/css-grid/

'Front-end > Web' 카테고리의 다른 글

SCSS 문법 - 주석, 데이터종류, 중첩, 변수, 가져오기, 연산, 재활용  (0) 2021.02.13
Sass(SCSS) 개요  (0) 2021.02.13
CSS 속성 - 플렉스  (0) 2021.02.12
CSS - 속성 - 애니메이션 & 다단  (0) 2021.02.11
CSS속성 - 전환 & 변환  (0) 2021.02.11

관련글

댓글

티스토리툴바