[grid] CSS - grid 속성(C) - 그리드 레이아웃 단축속성 (= grid속성 = 그리드속성)

1. grid 예제 - 직접 지정 방식
2. grid 정의
3. grid 구문
4. grid 예제 - 영역 이름 사용 방식
5. grid 예제 - 3단 레이아웃 짜기

grid 예제 - 직접 지정 방식

 

<style>

.grid-box {

  display: grid;

  grid: 150px / auto auto auto;

  grid-gap: 10px;

  background-color: pink;

  padding: 10px;

}

.grid-box > div {

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

  text-align: center;

  padding: 10px 0;

  font-size: 30px;

}

</style>

<div class="grid-box">

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

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

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

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

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

  <div class="f">f</div>

</div>

 

결과보기

---

PS. 1,2행 모두 150px로 설정하려면 아래 속성값 사용.

grid: 150px 150px / auto auto auto;

 

grid 정의

 

아래 그리드 속성들을 일괄 지정 가능한 단축속성.

• grid-template-rows 속성 - 행 개수와 높이 개별 지정.
• grid-template-columns 속성 - 열 개수와 너비 개별 지정.
• grid-template-areas 속성 - 영역 지정.
• grid-auto-rows 속성 - 행 개수와 높이 일괄 지정.
• grid-auto-columns 속성 - 열 개수와 너비 일괄 지정.
• grid-auto-flow 속성 - 컨테이너 채우는 방식 지정.

 

---

 

1.

• 기본값: none none none auto auto row
• 상속여부: X
• 애니가능: O
• CSS버전: CSS Grid Layout Module Level 1
• JS구문: object.style.grid="300px / auto auto auto";

 

2.

주요 최신 브라우저 모두 지원. (IE는 10이상 부분 지원)

 

3. MDN grid 예제보기

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

 

grid 구문

 

selector {grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns|[grid-auto-flow] grid-auto-rows / grid-template-columns|initial|inherit;}

 

---

[속성값]

 

none

'행 또는 열'의 크기 지정 X (기본값) 

 

grid-template-rows / grid-template-columns

행 높이 개별 지정 / 열 개수와 너비 개별 지정

 

grid-template-areas

명명된 아이템 사용해 영역 지정.

 

grid-template-rows / grid-auto-columns

행 높이 개별 지정 / 열 너비 일괄 지정

 

grid-auto-rows / grid-template-columns

행 높이 일괄 지정 / 컬럼 개수와 너비 개별 지정

 

grid-template-rows / [grid-auto-flow] grid-auto-columns

행 개수와 너비 개별 지정 / [컨테이너 채우는 방식] 열 너비 일괄

• 주의: [] 기호는 선택사항 표시일 뿐, 실제로 표기하진 않음.

 

[grid-auto-flow] grid-auto-rows / grid-template-columns

[컨테이너 채우는 방식] 행 높이 일괄 / 컬럼 개수와 너비 개별 지정.

• 주의: [] 기호는 선택사항 표시일 뿐, 실제로 표기하진 않음.

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속. 

 

grid 예제 - 영역 이름 사용 방식

 

<style>

.a {

  grid-area: hz;

}

.grid-box {

  display: grid;

  grid:

  'hz hz . . .'

  'hz hz . . .';

  grid-gap: 10px;

  background-color: pink;

  padding: 10px;

}

.grid-box > div {

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

  text-align: center;

  padding: 10px 0;

  font-size: 30px;

}

</style>

<div class="grid-box">

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

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

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

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

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

  <div class="f">f</div>

  <div class="g">g</div>

  <div class="h">h</div>

  <div class="i">i</div>  

  <div class="j">j</div>

  <div class="k">k</div>

  <div class="l">l</div>  

</div>

 

grid 예제 - 3단 레이아웃 짜기

 

<style>

.a { grid-area: header; }

.b { grid-area: left; }

.c { grid-area: main; }

.d { grid-area: right; }

.e { grid-area: footer; }

.grid-box {

  display: grid;

  grid:

  'header header header header header header'

  'left main main main right right'

  'left footer footer footer footer footer';

  grid-gap: 10px;

  background-color: pink;

  padding: 10px;

}

.grid-box > div {

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

  text-align: center;

  padding: 10px 0;

  font-size: 30px;

}

</style>

<div class="grid-box">

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

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

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

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

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

</div>

결과보기