목차
- grid-gap 예제 - 행열 간격 동일 경우
- grid-gap 정의
- grid-gap 구문
- grid-gap 예제 - 행열 간격 다른 경우
※ CSS3에서 gap으로 이름 바뀜.
grid-gap 예제 - 행열 간격 동일 경우
<style>
.grid-box {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 50px;
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-gap 정의
그리드 행열 간격을 한번에 지정 가능한 단축속성.
1.
CSS3에서 gap 으로 이름 바뀜.
2.
- 기본값: 0 0
- 상속여부: X
- 애니가능: O
- CSS버전: CSS Grid Layout Module Level 1
- JS구문: object.style.gridGap="50px 100px";
3.
IE 제외한 주요 최신 브라우저 모두 지원.
4. MDN grid-gap 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/gap
grid-gap 구문
selector {grid-gap: grid-row-gap grid-column-gap|initial|inherit;}
[속성값]
grid-row-gap
행간의 간격 (기본값: 0)
grid-column-gap
열간의 간격 (기본값: 0) (※ grid-row-gap 값과 동일 시, 생략 가능.)
initial
이 속성의 기본값 사용.
inherit
부모요소의 속성값 상속
PS. grid-row-gap과 grid-column-gap 값 동일 시, 1개만 적어됨 (예) grid-gap: 50px;
grid-gap 예제 - 행열 간격 다른 경우
<style>
.grid-box {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 25px 50px;
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>
결과보기
