CSS grid-auto-columns: 그리드 자동 생성 열 크기 설정
Baseline넓은 지원
모든 주요 브라우저가 지원하는 기능입니다.
CSS grid-auto-columns 속성은 암시적으로 생성된 그리드 열 또는 열 패턴의 크기를 설정합니다.
.grid {
grid-auto-columns: auto;
/* grid-auto-columns: min-content; */
/* grid-auto-columns: 50px; */
/* grid-auto-columns: 50px 100px; */
}.grid {
width: 300px;
border: 1px solid #ccc;
color: #fff;
display: grid;
grid-auto-rows: 30px;
gap: 8px;
padding: 8px;
}
.item {
background: #f0f0f0;
color: #000;
display: flex;
align-items: center;
border: 1px solid #ccc;
justify-content: center;
font-size: 1.25rem;
font-weight: 700;
}
.item:nth-child(1) {
background: #24c0a5;
color: #fff;
grid-column: 1 / span 2;
}
.item:nth-child(2) {
background: #0043ff;
color: #fff;
}
.item:nth-child(3) {
background: #b42809;
color: #fff;
}
.item:nth-child(4) {
background: #ffb800;
color: #fff;
}<div class="grid">
<div class="item">1번</div>
<div class="item">2번</div>
<div class="item">3번</div>
<div class="item">4번</div>
<div class="item">5번</div>
<div class="item">6번</div>
<div class="item">7번</div>
<div class="item">8번</div>
<div class="item">9번</div>
<div class="item">10번</div>
<div class="item">11번</div>
</div>불러오는 중...
그리드 아이템이 grid-template-columns로 정의된 열로 배치되지 않을 때, 아이템을 담기 위한 암시적 그리드 열이 생성됩니다. 이는 grid-column을 열 범위 밖으로 설정하거나, 자동 배치 알고리즘이 추가 열을 생성할 때 발생할 수 있습니다.
예컨대 위 예시의 그리드 열은 정의되지 않았고, 대신 span 2로 두 열을 차지한다고만 지정했으므로 두 개의 암시적 그리드 열이 생성되고, 나머지 그리드 아이템들도 두 열에 적절히 배치됩니다.
구문
selector {
/* 키워드 값 */
grid-auto-columns: min-content;
grid-auto-columns: max-content;
grid-auto-columns: auto;
/* <length> 값 */
grid-auto-columns: 100px;
grid-auto-columns: 20cm;
grid-auto-columns: 50vmax;
/* <percentage> 값 */
grid-auto-columns: 10%;
grid-auto-columns: 33.3%;
/* <flex> 값 */
grid-auto-columns: 0.5fr;
grid-auto-columns: 3fr;
/* minmax() 값 */
grid-auto-columns: minmax(100px, auto);
grid-auto-columns: minmax(max-content, 2fr);
grid-auto-columns: minmax(20%, 80vmax);
/* fit-content() 값 */
grid-auto-columns: fit-content(400px);
grid-auto-columns: fit-content(5cm);
grid-auto-columns: fit-content(20%);
/* 여러 track-size 값 */
grid-auto-columns: min-content max-content auto;
grid-auto-columns: 100px 150px 390px;
grid-auto-columns: 10% 33.3%;
grid-auto-columns: 0.5fr 3fr 1fr;
grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);
grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);
/* 전역 값 */
grid-auto-columns: inherit;
grid-auto-columns: initial;
grid-auto-columns: revert;
grid-auto-columns: revert-layer;
grid-auto-columns: unset;
}값
<length>열의 너비를 지정하는 양의 길이입니다.
<percentage>그리드 컨테이너의 블록 크기에 상대적인 크기를 나타내는 양의
<percentage>값입니다. 그리드 컨테이너의 크기가 트랙들의 크기에 의해 결정되는 경우라면<percentage>는auto로 취급됩니다.<flex>fr단위를 붙인 양의 크기입니다. 트랙의 플렉스 계수를 지정합니다. 각각의<flex>크기 트랙들은 그리드 컨테이너의 남은 크기를 계수에 비례해 나눠가집니다.minmax()의 매개변수가 아닌 단독 사용 시minmax(auto, <flex>)로 해석됩니다. 즉2fr은minmax(auto, 2fr)과 같습니다.max-content그리드 트랙을 차지하는 그리드 아이템들의 최대 내용 기여 중 가장 큰 값을 나타내는 키워드입니다.
min-content그리드 트랙을 차지하는 그리드 아이템들의 최소 내용 기여 중 가장 큰 값을 나타내는 키워드입니다.
minmax(min, max)트랙의 크기를
min이상max이하로 정의하는 함수입니다.max가min보다 작으면max는 무시되고 함수는min과 같은 것으로 처리합니다. 최대 값으로<flex>를 지정하면 트랙의 플렉스 계수를 설정합니다. 최소 값에는<flex>를 지정할 수 없습니다.auto최대 크기로서 사용 시, 트랙 내 아이템들의
max-content중 제일 큰 것을 나타냅니다.최소 크기로서 사용 시, 트랙 내 아이템들의 최소 크기 (
min-width,min-height) 중 제일 큰 것을 나타냅니다. 언제나 그런 건 아니지만 대개min-content크기와 같습니다.minmax()의 매개변수가 아닌 단독 사용 시, 최대 크기로서 사용했을 때와 최소 크기로서 사용했을 때의 사이를 나타냅니다. 대부분의 경우minmax(min-content, max-content)와 비슷하게 동작합니다.auto트랙 크기는 [align-content]와 [justify-content] 속성에 의해 늘어날 수 있습니다. 따라서 기본 설정에서auto크기의 트랙은 그리드 컨테이너의 남은 공간을 모두 차지합니다.fit-content( [ <length> | <percentage> ] )max(minimum, min(limit, max-content))와 같습니다. minimum은auto최소 값이고, limit은fit-content()의 매개변수로 전달한 트랙 크기 함수와 같습니다. 결론적으로minmax(auto, max-content)와minmax(auto, limit)중 작은 것으로 계산됩니다.
명세
브라우저 호환성
| 데스크톱 | 모바일 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| iOS | Android | ||||||||
| Safari | Chrome | Firefox | Safari | Safari WebView | Chrome | Android WebView | Firefox | Samsung Internet | |
grid-auto-columns | |||||||||
같이 보기
grid-auto-rows: 자동 생성 행 크기 설정