grid-area
grid-area
grid-area
grid-area
정의(Definition)
- grid-area 속성은
문법(Syntax)
grid-area
/* 단위 속성 */
Sample1 
콘텐츠 내부 요소의 정렬 상태를 설정하는 예제입니다.
결과
box1
HTML
<div class="grid"> <div class="selected">box1</div> </div>CSS
.grid { background: #f3e5f5; padding: 20px; border-radius: 5px; display: grid; grid-gap: 10px; grid-template-columns: 200px 200px 200px; grid-template-rows: repeat(3,minmax(100px,auto)); grid-template-areas: "a a a" "b c c" "b c c"; } .grid > div { background: #ce93d8; color: #fff; border-radius: 3px; text-align: center; width: 200px; display: flex; align-items: center; justify-content: center; }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: 200px 200px 200px; grid-template-rows: repeat(3,minmax(100px,auto)); grid-template-areas: "a a a" "b c c" "b c c"; } .grid > div { background: #ce93d8; color: #fff; border-radius: 3px; text-align: center; width: 200px; display: flex; align-items: center; justify-content: center; } </style> </head> <body> <div class="grid"> <div class="selected">box1</div> </div> <div class="choice"> <a href="#">reset</a> <a href="#">grid-area: a / a / a / a;</a> <a href="#">grid-area: b / b / b / b;</a> <a href="#">grid-area: c / c / c / c;</a> <a href="#">grid-area: a / a / b / b;</a> <a href="#">grid-area: 2 / 1 / 2 / 4;</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 .selected").attr("style",ass); }); </script> </body> </html>
호환성(Compatibility) 
더보기
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| grid-area | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
