CSS3 : Grid 레이아웃 2부 그리드 템플릿 + 속기형 + 행,열 간격

https://webty.tistory.com/152?category=880488 

CSS3 : Grid 레이아웃 1부 grid와 행/열 크기 구성법

 

---

 

Grid Template 그리드 템플릿 영역

* Grid Cell : 4개의 그리드 라인이 모여 그려지는 공간을 그리드 셀 이라고 합니다.(유닛이라 부르기도 함)

* Grid Area : Grid Cell(또는 유닛)이 묶인 영역으로 식별자명을 작성하여 영역을 구분합니다. 요소를 배치할 때 사용하는 영역입니다.

* Grid cell이 묶인 영역에 grid area을 명칭하여 크기 및 위치를 조정하는 기능을 그리드 템플릿이라고 합니다.

* Grid Area 템플릿 배치 시 기본적인 태그 item 순서에 따라 입력 순서를 정해야합니다. 

ex) item1 item2 item3 item4 (O)

ex) item1 item4 item3 item2 (X)

 

 

이미지 출처 : https://yamoo9.gitbook.io/css-grid/css-grid-term

 

 

Grid Template 적용하기 <기본>

1. HTML 작성하기

<div id="grid-container">
  <div class="item1">a</div>
  <div class="item2">b</div>
</div>

 

2. CSS grid 적용과 각 grid cell을 묶어 grid-area 식별자 적용하기

#grid-container {display:grid;}
#grid-container .item1 {grid-area:item1;}
#grid-container .item2 {grid-area:item2;}

 

ⓒ 3. 식별자를 활용하여 grid 템플릿(template) 영역 설정하기

▽ grid row track 1행에 grid-area 식별자 item1 item2 배치

#grid-container {
  display:grid;
  grid-template-areas:'item1 item2';
}

 

 

▽ grid row track 1행에 grid-area 식별자 item1 배치, 2행에 item2 배치

#grid-container {
  display:grid;
  grid-template-areas:
  	'item1' 
  	'item2';
}

 

 

---

 

ⓒ Grid Template 적용하기 <활용1>

<div id="grid-container">
  <div class="grid-item item1">a</div>
  <div class="grid-item item2">b</div>
  <div class="grid-item item3">c</div>
  <div class="grid-item item4">d</div>
</div>

#grid-container .item1 {grid-area:item1}
#grid-container .item2 {grid-area:item2}
#grid-container .item3 {grid-area:item3}
#grid-container .item3 {grid-area:item4}

 

 

ⓒ

row1 track에 grid-area item 1 2 3 4

모두 배치 후 각 column track 값 입력하기

#grid-container {
  display:grid;
  grid-template-areas:'item1 item2 item3 item4';
  grid-template-columns:repeat(2, 100px) repeat(2, 200px);
}

 

 

ⓒ

row1 track에 grid-area 1 2

row2 track에 grid-area 3 4

배치 후 1행/2행 row track 값 입력하기

#grid-container {
  display:grid;
  grid-template-areas:
    'item1 item2' 
    'item3 item4';
  grid-template-rows:50px 100px;
}

 

 

ⓒ

row1 track grid-area 1 1 1

row2 track grid-area 2 3 3

row3 track grid-area 4 4 4

배치 후 각 column track / row track 값 입력하기

* 이름을 2번 이상 반복하면 병합됩니다.

 

#grid-container {
  display:grid;
  grid-template-areas:
    'item1 item1 item1' /* 1행 item1 3개 병합 */
    'item2 item3 item3' /* 2행 item2 1개 배치, item3 2개 병합 */
    'item4 item4 item4';/* 3행 item4 3개 병합*/
  grid-template-columns:100px 100px 100px;
  grid-template-rows:50px 100px 100px;
}

 

 

ⓒ Grid Template 마침표(.) , none 활용

* 마침표(.)는 비어있는 그리드 셀을 의미합니다.

* none은 grid-area(그리드영역)으로 정의되지 않은 grid-cell(그리드셀)을 의미합니다.

* grid-area는 2번이상 연속해서 반복하지 않으면 병합되지 않습니다.

 

 

#grid-container {
  display:grid;
  grid-template-areas:
    'item1 item1 item2'
    'none . item3'
    'none item4 item4';
  grid-template-columns:100px 100px 100px;
  grid-template-rows:50px 100px 100px;
}

 

 

1. Grid-Basic-Layout0 (기본)

See the Pen Grid-Basic-Layout0 by yuna122212 (@yuna122212) on CodePen.

 

2. Grid-Basic-Layout1 (레이아웃 활용1)

See the Pen Grid-Basic-Layout1 by yuna122212 (@yuna122212) on CodePen.

 

 

3. Grid-Basic-Layout2 (레이아웃 활용2)

See the Pen Grid-Basic-Layout2 by yuna122212 (@yuna122212) on CodePen.

 

4. Grid-Basic-Layout-Responsive (반응형 레이아웃)

See the Pen Grid-Basic-Layout3(Responsive) by yuna122212 (@yuna122212) on CodePen.

 

 

 

 

---

 

 

ⓒ Grid Template 속기형(Shorthand) 속성

* 그리드 템플릿의 속성을 한번에 묶어서 빠르게 사용할 수 있는 것을 속기형이라고 합니다.

* 템플릿 행 / 열 / 영역명으로 설정이 가능합니다.

* none 3가지 설정 값을 모두 초기값으로 적용할 때 사용합니다.

 

 

1) ⓒ grid-template : grid-template-rows / grid-template-columns

grid-template-rows:repeat(2, 100px)

grid-template-columns:100px 200px 을 속기형으로 작성한다면? ▼

#grid-container {
  display:grid;
  grid-template:repeat(2, 100px) / 100px 200px
}

 

 

2) ⓒ grid-template : 'grid-area' grid-template-rows

grid-template-area:'item1' 'item2' 'item3'

grid-template-rows:100px 100px 100px 을 속기형으로 작성한다면? ▼

#grid-container {
  display:grid;
  grid-template:
    'item1' 100px
    'item2' 100px
    'item3' 100px;
}

 

 

 

 

 

 

3) ⓒ grid-template : 'grid-area' grid-template-rows / grid-template-columns

grid-template-area:'item1' 'item2'

grid-template-rows:100px 100px

grid-template-columns:100px 100px 을 속기형으로 작성한다면? ▼

#grid-container {
  display:grid;
  grid-template:
    'item1' 100px
    'item2' 100px / 100px 100px;
}

 

 

 

4) ⓒ grid: grid-template-rows / grid-template-columns

#grid-container {
  display:grid;
  grid:100px 80px / repeat(2, 100px);
}

 

 

---

 

 

Grid 행/열 사이 간격(gap) Grid Gutters

* 행과 열 사이 간격(Gap)을 Grid Gutters(그리드 거터)라고 합니다.

* 간격 방향에 따라 행 간격(Row Gutters), 열 간격(Column Gutters) 로 나뉩니다.

이미지 출처 :&nbsp;https://yamoo9.gitbook.io/css-grid/css-grid-term

 

 

Grid Gutters : 행 간격 조절하기(row-gap)

#grid-container {
  grid-template:repeat(3, 50px) / 100px;
  row-gap:10px;
}

 

 

 

 

 

Grid Gutters : 열 간격 조절하기(column-gap)

#grid-container {
  grid-template:100px / repeat(3, 50px);
  column-gap:10px;
}

 

 

 

Grid Gutters : 행+열 간격 조절하기(gap)

(ex) gap:row column

#grid-container {
  grid-template:repeat(2, 50px) / repeat(2, 100px);
  gap:30px 10px;
}

 

 

 

#grid-container {
  grid-template:repeat(2, 100px) / repeat(2, 100px);
  gap:10px; /* row+column 동시적용 */
}

 

 

 

 

 

 

3부 이어서 ▼

https://webty.tistory.com/155?category=880488 

CSS3 : Grid 레이아웃 3부 그리드 아이템 배치