[grid] CSS - grid-template 속성 - 그리드 행열 및 영역 개별 지정 (= grid-template속성 = 그리드템플릿속성)

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

grid-template 예제 - 직접 지정 방식

 

<style>

.grid-box {

  display: grid;

  grid-template: 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>

 

결과보기

grid-template 정의

 

한번에 행과 열의 크기 및 영역을 개별 지정하는 단축속성.

• grid-template-rows 속성 - 행 높이 개별 지정
• grid-template-columns 속성 - 열 개수와 너비 개별 지정
• grid-template-areas 속성 - 명명된 아이템 사용해 레이아웃 구성.

 

---

 

1. 여러 예제 케이스

• grid-template: 100px / auto auto auto;
• grid-template: auto / 100px auto 100px;
• grid-template: auto / auto auto;
• grid-template: 100px 200px / auto auto auto;

 

2.

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

 

3.

IE 제외한 주요 최신브라우저 모두 지원.

 

4. MDN grid-template 예제보기

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

 

grid-template 구문

 

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

 

---

[속성값]

 

none

열과 행의 크기 지정 X (기본값)

 

grid-template-rows / grid-template-columns

행과 열의 크기를 각각 개별 지정.

 

grid-template-areas

명명된 아이템 사용해 레이아웃 구성.

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.

 

grid-template 예제 - 이름 사용 방식

 

<style>

.a {

  grid-area: hz;

}

.grid-box {

  display: grid;

  grid-template:

  '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-template 예제 - 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-template:

    '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">Header</div>

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

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

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

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

</div>

 

결과보기