[grid] CSS - grid-template-areas 속성(C) - 그리드 아이템의 컬럼 영역 지정 (= grid-template-areas속성 = 그리드템플릿에어리어속성)

1. grid-template-areas 예제 - 가로 영역 지정
2. grid-template-areas 정의
3. grid-template-areas 구문
4. grid-template-areas 예제 - 세로 영역 지정
5. grid-template-areas 예제 - header/ (left/main/right) / footer 레이아웃

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

 

<style>

.a {

  grid-area: hz;

}

.grid-box {

  display: grid;

  grid-template-areas: '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">d</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>

 

결과보기

grid-template-areas 정의

 

그리드 내 지정 아이템이 사용할 컬럼 영역을 지정.

 

---

 

1. 

• grid-area 속성으로 그리드 아이템의 영역 이름 지정 후, 그 이름을 grid-template-areas 속성에서 참조함. 
• grid-aria 속성이 grid-template-areas 속성보다 나중에 선언돼도 상관은 없으나, 가독성을 위해 되도록 먼저 표기 권장.
• 영역 지정할 '위치/범위'와 무관한 행은 따로 표시할 필요 X
• 이름 지정 안 된 컬럼은 마침표( . )로 표시함.
• 각 행에 속하는 컬럼군은 따옴표(' 또는 ")로 감싸서 구분.

 

2.

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

 

3.

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

 

4. MDN grid-template-areas 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

 

grid-template-areas 구문

 

selector {grid-template-areas: none|itemnames;}

 

---

[속성값]

 

none

이름 지정된 영역 없음. (기본값)

 

itemnames

각 열과 행이 표시되는 방식을 지정.

• 이름 O 아이템: 해당 이름으로 사용할 컬럼 영역 지정.
• 이름 X 아이템: 마침표(.)로 각각의 컬럼을 각각 지정.
• 각 행에 속하는 컬럼군: 따옴표(' 또는 ")로 감쌈.

 

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

 

<style>

.a {

  grid-area: hz;

}

.grid-box {

  display: grid;

  grid-template-areas:

    '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-areas 예제 - header/ (left/main/right) / footer 레이아웃

 

<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-areas:

  '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>

 

결과보기