목차
grid-auto-columns 예제 - 그리드 열 너비 일괄 지정
grid-auto-columns 정의
grid-auto-columns 구문
grid-auto-columns 예제 - 그리드 열 너비 일괄 지정
<style>
.a { grid-area: 1 / 1 / 2 / 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: 100px;
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>
결과보기
grid-auto-columns 정의
그리드 열 너비 일괄 지정.
1.
2.
기본값: auto
상속여부: X
애니가능: O
CSS버전: CSS Grid Layout Module Level 1
JS구문: object .style.gridAutoColumns="150px";
3.
주요 최신브라우저 모두 지원 . (IE 10 이상 부분 지원.)
4. MDN grid-auto-columns 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns
grid-auto-columns 구문
selector {grid-auto-columns: auto|max-content|min-content|length |initial|inherit;}
[속성값]
auto
컨테이너 크기에 따라 컬럼 너비 자동 결정. (기본값)
max-content
행의 열 중 가장 내용이 많은 것 기준으로 컬럼 너비 결정.
min-content
행의 열 중 가장 내용이 적은 것 기준으로 컬럼 너비 결정.
length
px 등 길이 단위 사용해 컬럼 너비 지정.
initial
이 속성의 기본값을 사용.
inherit
부모요소의 속성값 상속.
주소 복사
랜덤 이동