본문 바로가기

Webstoryboy

Category

Explanation

CSS

[CSS] grid-template-areas

grid-template-areas

grid-template-areas 속성은 아이템의 위치를 설정합니다.


grid-template-areas

grid-template-areas 속성은 아이템의 위치를 설정합니다.

정의(Definition)

  • grid-template-areas 속성은 아이템의 위치를 설정합니다.

문법(Syntax)

grid-template-areas: length;

Sample1

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

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

더보기

인스타그램 보기 바로가기

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

유튜브 영상보기 바로가기