본문 바로가기

Webstoryboy

Category

Explanation

CSS

[CSS] grid-gap

grid-gap

grid-gap 속성은 grid-row-gap와 grid-column-gap 속성을 같이 사용합니다.


grid-gap

grid-gap

정의(Definition)

  • grid-gap 속성은

문법(Syntax)

grid-gap

/* 단위 속성 */

Sample1

콘텐츠 내부 요소의 정렬 상태를 설정하는 예제입니다.

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 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
grid-gap 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기