grid-template-areas
grid-template-areas 속성은 아이템의 위치를 설정합니다.
grid-template-areas
grid-template-areas 속성은 아이템의 위치를 설정합니다.
정의(Definition)
- grid-template-areas 속성은 아이템의 위치를 설정합니다.
문법(Syntax)
grid-template-areas: length;
Sample1 
콘텐츠 내부 요소의 정렬 상태를 설정하는 예제입니다.
결과
box1
box2
box3
HTML
<div class="grid"> <div>box1</div> <div>box2</div> <div>box3</div> </div>CSS
.grid { background: #f3e5f5; padding: 20px; border-radius: 5px; display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(3, minmax(50px,auto)); grid-template-areas: "box1 box1 box1" "box2 box2 box2" "box3 box3 box3"; } .grid > div { background: #ce93d8; color: #fff; border-radius: 3px; display: flex; align-items: center; justify-content: center; } .grid > div:nth-child(1) .grid > div:nth-child(2) .grid > div:nth-child(3) 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-columns: 1fr 1fr 1fr; grid-template-rows: repeat(3, minmax(50px,auto)); grid-template-areas: "box1 box1 box1" "box2 box2 box2" "box3 box3 box3"; } .grid > div { background: #ce93d8; color: #fff; border-radius: 3px; display: flex; align-items: center; justify-content: center; } .grid > div:nth-child(1) .grid > div:nth-child(2) .grid > div:nth-child(3) </style> </head> <body> <div class="grid"> <div>box1</div> <div>box2</div> <div>box3</div> </div> <div class="choice"> <a href="#">reset</a> <a href="#">grid-template-areas: "box1 box1 box1" "box2 box3 box3" "box2 box3 box3";</a> <a href="#">grid-template-areas: "box2 box2 box1" "box2 box2 box3" "box2 box2 box3";</a> <a href="#">grid-template-areas: "box1 box1 ." "box1 box1 ." ". box2 box3";</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-template-areas | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
