[grid] CSS - Grid Intro - 그리드 소개 (※ 그리드 관련 속성 개괄)

1. grid 예제 - 3단 레이아웃
2. grid 예제 - 3열 구조
3. grid 정의 & 속성 개괄
4. grid 관련 주소

grid 예제 - 3단 레이아웃

 

<style>

.a { grid-area: header; }

.b { grid-area: left; }

.c { grid-area: main; }

.d { grid-area: right; }

.e { grid-area: footer; }

.grid-container {

  display: grid;

  grid-template-areas:

    'header header header header header header'

    'left main main main right right'

    'left footer footer footer footer footer';

  gap: 10px;

  background-color: pink;

  padding: 10px;

}

.grid-container > div {

  background-color: rgba(255, 255, 255, 0.8);

  text-align: center;

  padding: 10px 0;

  font-size: 30px;

}

</style>

<div class="grid-container">

  <div class="a">Header</div>

  <div class="b">Left</div>

  <div class="c">Main</div>  

  <div class="d">Right</div>

  <div class="e">Footer</div>

</div>

 

결과보기

grid 예제 - 3열 구조

 

<style>

.grid-container {

  display: grid;

  grid-template-columns: auto auto auto;

  background-color: pink;

  padding: 10px;

}

.grid-item {

  background-color: rgba(255, 255, 255, 0.8);

  border: 1px solid gray;

  padding: 20px;

  font-size: 30px;

  text-align: center;

}

</style>

<div class="grid-container">

  <div class="grid-item">1</div>

  <div class="grid-item">2</div>

  <div class="grid-item">3</div>  

  <div class="grid-item">4</div>

  <div class="grid-item">5</div>

  <div class="grid-item">6</div>  

  <div class="grid-item">7</div>

  <div class="grid-item">8</div>

  <div class="grid-item">9</div>  

</div>

 

결과보기 

---

PS. 컨네이너에 display:inline-grid 준 경우, 결과보기

 

grid 정의 & 속성 개괄

 [목차]

• [grid 의미]
• [그리드 선언]
• [행열 의미]
• [행열 '개수/영역']
• [행열 간격]
• [열 '위치/확장']
• [행 '위치/확장']
• [아이템 (수평/수직) 정렬]

 

---

[grid 의미]

 

• 그리드 (Grid) - 전체 가로 너비를 컬럼(column: 열)의 개수에 의해 자동 배분해 레이아웃 결정.
• 컨테이너 (Container) - 그리드 아이템을 감싸는 부모요소
• 아이템 (Item) - 그리드로 레이아웃 배치할 각각의 요소들

 

---

[그리드 선언]

컨테이너에  display:grid  (또는, display:inline-grid) 속성 추가.

 

• .grid-container { display: grid;} - 각 아이템이 전체 너비를 각 아이템 개수로 나눈 너비 만큼 너비 차지
• .grid-container { display: inline-grid; } - 각 아이템이 해당 내용만큼만 너비 차지.

 

---

[행열 의미]

 

• 행 (row : 로우) - 가로줄
• 열 (column :컬럼) - 세로줄

 

---

[행열 '개수/영역']

 

(1) 개별 지정

• grid-template 속성(C) : '행 / 열' 개수 및 확장 지정. 
• grid-template-rows 속성(C) ★ : '행' 개수 및 확장 지정.
• grid-template-columns 속성(C) ★ : '열' 개수 및 확장 지정.

 

(2) 일괄 지정

• grid-auto 속성(C) : 이런 속성은 존재 X
• grid-auto-rows 속성(C) ★ : '행' 일괄
• grid-auto-columns 속성(C) ★ : '열' 일괄

 

cf. 관련 속성

• grid 속성(C) - ★ 기호 붙은 6개 속성을 일괄지정 가능한 단축속성
• grid-auto-flow 속성(C) ★ - 아이템이 컨테이너를 채우는 방식 지정.
• grid-area 속성(I) - 아이템 영역 위치나 확장 지정.
• grid-template-area 속성(C) ★ - 그리드 행열 영역 지정.

---

[행열 간격]

 

(1) CSS3 부터

• gap 속성(C) : '행간/열간' 간격
• row-gap 속성(C) : '행간' 간격
• column-gap 속성(C) : '열간' 간격

 

(2) CSS3 이전

• grid-gap 속성(C) : '행간/열간' 간격
• grid-row-gap 속성(C) : '행간' 간격
• grid-column-gap 속성(C) : '열간' 간격

 
PS. CSS3에서 'grid-' 접두어 빼고 속성명 재명명함. 

---

[열 '위치/확장']

 

• grid-column 속성(I) : '시작열 / 끝열' 위치
• grid-column-start 속성 (I) : '시작열' 위치 
• grid-column-end 속성 (I) : '끝열' 위치

 

---

[행 '위치/확장']

 

• grid-row 속성 (I) : '시작행 / 끝행' 위치
• grid-row-start 속성 (I) : '시작행' 위치 
• grid-row-end 속성 (I) : '끝행' 위치

 

---

[아이템 (수평/수직) 정렬]

 

• justify-content 속성 - 수평정렬
• align-content 속성 - 수직정렬

PS. 이 속성들은 flex 레이아웃에서도 사용 가능.

grid 관련 주소

 

1분 코딩 님 - (flex + grid) 강의

https://youtu.be/eprXmC_j9A4

 

모질라 - grid 강의

https://developer.mozilla.org/en-US/docs/Web/CSS/grid