grid-auto-columns
grid-auto-columns
grid-auto-columns
grid-auto-columns
정의(Definition)
- grid-auto-columns 속성은
문법(Syntax)
grid-auto-columns
/* 단위 속성 */
Sample1 
콘텐츠 내부 요소의 정렬 상태를 설정하는 예제입니다.
결과
box1
box2
box3
box4
box5
box6
box7
reset grid-auto-columns: 200px grid-auto-columns: 300px grid-auto-columns: 400px grid-auto-columns: 10% grid-auto-columns: 20% grid-auto-columns: 1fr grid-auto-columns: 1fr 2fr grid-auto-columns: min-content; grid-auto-columns: max-content; grid-auto-columns: minmax(100px, auto) grid-auto-columns: minmax(20%, 80vmax); grid-auto-columns: fit-content(400px); grid-auto-columns: 200px 250px 390px; grid-auto-columns: 0.5fr 3fr 1fr;
HTML
<div class="grid"> <div>box1</div> <div>box2</div> <div>box3</div> <div>box4</div> <div>box5</div> <div>box6</div> <div>box7</div> </div>CSS
.grid { background: #f3e5f5; padding: 20px; border-radius: 5px; display: grid; grid-gap: 10px; grid-template-rows: 100px 100px 100px; grid-template-areas: "a b c"; grid-auto-columns: 200px; } .grid > div { background: #ce93d8; color: #fff; border-radius: 3px; text-align: center; width: 200px; display: flex; align-items: center; justify-content: center; } .grid > div.selected TOTAL
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grid</title> <style> .choice a .grid { background: #f3e5f5; padding: 20px; border-radius: 5px; display: grid; grid-gap: 10px; grid-template-rows: 100px 100px 100px; grid-template-areas: "a b c"; grid-auto-columns: 200px; } .grid > div { background: #ce93d8; color: #fff; border-radius: 3px; text-align: center; width: 200px; display: flex; align-items: center; justify-content: center; } .grid > div.selected </style> </head> <body> <div class="grid"> <div>box1</div> <div>box2</div> <div>box3</div> <div>box4</div> <div>box5</div> <div>box6</div> <div>box7</div> </div> <div class="choice"> <a href="#">reset</a> <a href="#">grid-auto-columns: 200px</a> <a href="#">grid-auto-columns: 300px</a> <a href="#">grid-auto-columns: 400px</a> <a href="#">grid-auto-columns: 10%</a> <a href="#">grid-auto-columns: 20%</a> <a href="#">grid-auto-columns: 1fr</a> <a href="#">grid-auto-columns: 1fr 2fr</a> <a href="#">grid-auto-columns: min-content;</a> <a href="#">grid-auto-columns: max-content;</a> <a href="#">grid-auto-columns: minmax(100px, auto)</a> <a href="#">grid-auto-columns: minmax(20%, 80vmax);</a> <a href="#">grid-auto-columns: fit-content(400px);</a> <a href="#">grid-auto-columns: 200px 250px 390px;</a> <a href="#">grid-auto-columns: 0.5fr 3fr 1fr;</a> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(".choice a").on("click",function(e){ e.preventDefault(); }); $(".choice a").click(function(){ var ass = $(this).text(); $(".grid").attr("style",ass); }); </script> </body> </html>
호환성(Compatibility) 
더보기
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| grid-auto-columns | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
