목차
grid 예제 - 직접 지정 방식 grid 정의 grid 구문 grid 예제 - 영역 이름 사용 방식 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 정의
아래 그리드 속성들을 일괄 지정 가능한 단축속성.
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>
결과보기
