목차
grid-area 예제 - 그리드 아이템 영역 '위치/크기' 직접 지정 grid-area 정의 grid-area 구문 grid-area 예제 - 그리드 아이템 영역 '이름'만 지정 후 참조
grid-area 예제 - 그리드 아이템 영역 '위치/크기' 직접 지정
[목차]
[span 키워드로 영역 크기 지정 방식]
※ span 키워드를 이용해 지정 개수만큼 행열 확장.
<style>
.grid-box {
display: grid;
grid-template-columns : auto 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;
}
.a {
grid-area: 2 / 1 / span 2 / span 3; /* 2행부터 2개행, 1열부터 3개열 확장 */
}
</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>
결과보기
[끝행과 끝열로 영역 크기 지정]
※ 주의: 행과 열의 끝 좌표는 포함 X
<style>
.a { grid-area: 1 / 1 / 2 / 2; } /* 1행부터 2행 앞까지, 1열부터 2열 앞까지 */
.b { grid-area: 1 / 2 / 2 / 3; }
.c { grid-area: 1 / 3 / 2 / 4; }
.d { grid-area: 2 / 1 / 3 / 2; }
.e { grid-area: 2 / 2 / 3 / 3; }
.f { grid-area: 2 / 3 / 3 / 4; }
.grid-box {
display: grid;
grid-auto-columns : 50px;
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. grid-template-columns 속성은 grid-auto-columns 속성을 덮어씀.
grid-area 정의
그리드 아이템 영역의 '위치/크기'를 지정하거나 아이템의 '이름'을 지정. (아래 속성을 일괄 지정 가능한 단축 속성)
1.
영역 '이름' 지정 방식으로 사용 경우, grid-template-areas 속성에서 해당 이름을 참조해 영역 지정함.
2.
기본값: auto / auto / auto / auto
상속여부: X
애니가능: O
CSS버전: CSS Grid Layout Module Level 1
JS구문: object .style.gridArea="1 / 2 / span 2 / span 3";
3.
IE 제외한 주요 최신 브라우저 모두 지원 .
4. MDN grid-area 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area
grid-area 구문
selector {grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname ;}
[속성값]
grid-row-start
아이템 영역 시작행 좌표grid-column-start
아이템 영역 시작열 좌표
grid-row-end
아이템 영역 끝행 좌표 (포함 X)
span number grid-column-end span number
itemname
아이템 이름.
grid-area 예제 - 그리드 아이템 영역 '이름'만 지정 후 참조
[목차]
[1행의 모든 열을 확장]
<style>
.a {
grid-area: hz;
}
.grid-box {
display: grid;
grid-template-areas: 'hz 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">d</div>
<div class="d">d</div>
<div class="e">e</div>
<div class="f">f</div>
</div>
결과보기
[1행의 2열만 확장]
<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>
결과보기
[행열 확장]
<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">d</div>
<div class="d">d</div>
<div class="e">e</div>
<div class="f">f</div>
<div class="g">g</div>
</div>
결과보기
[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-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>
결과보기
