grid-gap
grid-gap 속성은 grid-row-gap와 grid-column-gap 속성을 같이 사용합니다.
grid-gap
grid-gap
정의(Definition)
- grid-gap 속성은
문법(Syntax)
grid-gap
/* 단위 속성 */
Sample1 
콘텐츠 내부 요소의 정렬 상태를 설정하는 예제입니다.
결과
box1
box2
box3
box4
box5
box6
HTML
<div class="selected">box1</div> <div>box2</div> <div>box3</div> <div>box4</div> <div>box5</div> <div>box6</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: 100px 100px; } .grid > div { background: #ce93d8; color: #fff; border-radius: 3px; text-align: center; 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: 100px 100px; } .grid > div { background: #ce93d8; color: #fff; border-radius: 3px; text-align: center; display: flex; align-items: center; justify-content: center; } </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> <div class="choice"> <a href="#">reset</a> <a href="#">grid-gap: 10px;</a> <a href="#">grid-gap: 20px;</a> <a href="#">grid-gap: 0</a> <a href="#">grid-gap: 10%;</a> <a href="#">grid-gap: 10px 20px;</a> <a href="#">grid-gap: calc(20px + 10%);</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-gap | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
