본문 바로가기

Webstoryboy

Category

Explanation

CSS

[CSS] grid-area

grid-area

grid-area


grid-area

grid-area

정의(Definition)

  • grid-area 속성은

문법(Syntax)

grid-area

/* 단위 속성 */

Sample1

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

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

더보기

인스타그램 보기 바로가기

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

유튜브 영상보기 바로가기