목차
- grid-template-areas 예제 - 가로 영역 지정
- grid-template-areas 정의
- grid-template-areas 구문
- grid-template-areas 예제 - 세로 영역 지정
- 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>
결과보기
