목차
grid-column 예제 - 크기 확장 방식 grid-column 정의 grid-column 구문 grid-column 예제 - 위치 지정 방식
grid-column 예제 - 크기 확장 방식
<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-column: 1 / span 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>
결과보기
grid-column 정의
아이템의 시작열 위치(또는, 확장)와 끝열 위치(또는, 확장)를 일괄 지정 가능한 단축속성.
1. cf.
2.
기본값: auto / auto
상속여부: X
애니가능: O
CSS버전: CSS Grid Layout Module Level 1
JS구문: object .style.gridColumn="2 / span 3";
3.
IE 제외한 주요 최신브라우저 모두 지원 .
4. MDN grid-column 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column
grid-column 구문
selector {grid-column: grid-column-start / grid-column-end | initial | inherit;}
[속성값]
grid-column-start / grid-column-end
시작열 위치 (기본값: auto) / 끝열 위치 (기본값: auto)
각 위치에 span n 사용해, n 개 컬럼만큼 확장 가능.
grid-column-end 속성에 양수 지정 시, 해당 양수 포함 X 음수 가능하며, 행의 맨 마지막부터 기산하며, 해당 음수 포함 O
initial
이 속성의 기본값 사용.
inherit
부모요소의 속성값 상속.
grid-column 예제 - 위치 지정 방식
<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-column: 1 / 4;
}
</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>
결과보기
