grid areas

Grid Areas

---

• 미리보기

grid-template-areas, grid-areas

grid-template-areas

---

• 그리드 시스템에서 레이아웃을 짤때 사용
• grid-container(부모)에서 grid-template-areas 로 정의하여 사용 가능하다

예시

.grid-container {
  background-color: #ff7052;
  display: grid;
  gap: 25px;

  grid-template-areas:
    'header header header header header header'
    'sec-1 sec-1 sec-2 sec-2 sec-3 sec-3'
    '. sec-4 sec-4 sec-4 sec-4 .'
    'sec-5 sec-5 sec-5 sec-6 sec-6 sec-6'
    'footer footer footer footer footer footer';
}

• 총 6개의 column과 4개의 row로 이루어져 있는 레이아웃을 선언했다
• 비어있는 공간은 " . " 으로 생략 가능하다

grid-template-areas만 정의

• 이제 각 그리드 안에 들어갈 아이템이 선언 되었으므로 각 자식의 이름을 정의해주면 적용이 된다

예시

  .header {
    background-color: chartreuse;
    grid-area: header;
  }

  .section-1 {
    background-color: darkseagreen;
    grid-area: sec-1;
  }

  .section-2 {
    background-color: chocolate;
    grid-area: sec-2;
  }

  .section-3 {
    background-color: cornflowerblue;
    grid-area: sec-3;
  }

  .section-4 {
    background-color: olivedrab;
    grid-area: sec-4;
  }

  .section-5 {
    background-color: darkkhaki;
    grid-area: sec-5;
  }

  .section-6 {
    background-color: dimgray;
    grid-area: sec-6;
  }

  .footer {
    background-color: darkorchid;
    grid-area: footer;
  }

전체 예시

(html)

<div className='grid-container'>
    <header className='header'>Header</header>
    <section className='section-1'>Section-1</section>
    <section className='section-2'>Section-2</section>
    <section className='section-3'>Section-3</section>
    <section className='section-4'>Section-4</section>
    <section className='section-5'>Section-5</section>
    <section className='section-6'>Section-6</section>
    <footer className='footer'>Footer</footer>
</div>

(sass)

.grid-container {
  background-color: #ff7052;
  display: grid;
  gap: 25px;

  grid-template-areas:
    'header header header header header header'
    'sec-1 sec-1 sec-2 sec-2 sec-3 sec-3'
    '. sec-4 sec-4 sec-4 sec-4 .'
    'sec-5 sec-5 sec-5 sec-6 sec-6 sec-6'
    'footer footer footer footer footer footer';

  header,
  section,
  footer {
    background-color: #fcc006;
    font-size: 20px;
    text-align: center;
    line-height: 150px;
    font-family: Arial, Helvetica, sans-serif;
  }

  .header {
    background-color: chartreuse;
    grid-area: header;
  }

  .section-1 {
    background-color: darkseagreen;
    grid-area: sec-1;
  }

  .section-2 {
    background-color: chocolate;
    grid-area: sec-2;
  }

  .section-3 {
    background-color: cornflowerblue;
    grid-area: sec-3;
  }

  .section-4 {
    background-color: olivedrab;
    grid-area: sec-4;
  }

  .section-5 {
    background-color: darkkhaki;
    grid-area: sec-5;
  }

  .section-6 {
    background-color: dimgray;
    grid-area: sec-6;
  }

  .footer {
    background-color: darkorchid;
    grid-area: footer;
  }
}

 

정리

---

부모 요소에 grid-template-areas 로 레이아웃을 짤 수 있고 이후 자식 요소에 grid-area로 이름을 정해주면 된다