CSS Grid 수업필기 (4) - Grid Template Areas

    <div class="container">
      <header class="header"><h1>My Website</h1></header>
      <section class="content">
        <h3>Welcome To My Site</h3>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo suscipit
          reprehenderit aperiam repudiandae voluptatibus, expedita ex temporibus
          eos et mollitia velit vel molestias sint dolore at doloremque neque
          minima optio ad tempore quisquam perferendis esse non. Aliquam illum
          doloremque architecto! Rem voluptas at sunt sed enim eius laborum
          dolores quaerat?
        </p>
      </section>
      <aside class="sidebar">
        <h3>Contact Us</h3>
        <ul>
          <li>Some Company</li>
          <li>50 Main st, Boston MA</li>
          <li>something@something.com</li>
          <li>555-555-5555</li>
        </ul>
      </aside>
      <div class="box-1">
        <h3>Heading</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
          quisquam at veritatis a labore quod illo dolorem fugiat quas
          repellendus omnis odio eligendi ab, dolor necessitatibus, saepe
          aliquid quaerat aperiam.
        </p>
      </div>
      <div class="box-2">
        <h3>Heading</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
          quisquam at veritatis a labore quod illo dolorem fugiat quas
          repellendus omnis odio eligendi ab, dolor necessitatibus, saepe
          aliquid quaerat aperiam.
        </p>
      </div>
      <div class="box-3">
        <h3>Heading</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
          quisquam at veritatis a labore quod illo dolorem fugiat quas
          repellendus omnis odio eligendi ab, dolor necessitatibus, saepe
          aliquid quaerat aperiam.
        </p>
      </div>
      <div class="box-4">
        <h3>Heading</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores
          quisquam at veritatis a labore quod illo dolorem fugiat quas
          repellendus omnis odio eligendi ab, dolor necessitatibus, saepe
          aliquid quaerat aperiam.
        </p>
      </div>
      <footer class="footer"><p>Copyright &copy; 2019</p></footer>
    </div>

 .container {
        display: grid;
        grid-template-areas:
          'header header header header'
          'content content content sidebar'
          'box-1 box-2 box-3 box-4'
          'footer footer footer footer';
        grid-gap: 1rem;
      }

      .header,
      .content,
      .sidebar,
      .box-1,
      .box-2,
      .box-3,
      .box-4,
      .footer {
        border: 1px #ccc solid;
        padding: 0.5rem;
      }

      .header {
        grid-area: header;
      }

      .content {
        grid-area: content;
      }

      .sidebar {
        grid-area: sidebar;
      }

      .box-1 {
        grid-area: box-1;
      }

      .box-2 {
        grid-area: box-2;
      }

      .box-3 {
        grid-area: box-3;
      }

      .footer {
        grid-area: footer;
        text-align: center;
      }

 

할 말이 없다.. 이렇게 쉽게 layout을 만들 수 있다니 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 핰ㅋㅋㅋㅋㅋㅋㅋㅋ핳........ㅎㅎㅎㅎㅎㅋㅋㅎㅎ;.............

근데 한편으로는 또 너무 설렌다!! 내일 드디어 오늘 새로 배운 grid 이용해서 작은 프로젝트를 할 것이기 때문!!!!!!!!!!!!!!

 

 

 

+ 스마트폰 사이즈에 맞게 미디어 쿼리

   @media(max-width:500px){
        .container{
          grid-template-areas: 
          'header'
          'content'
          'sidebar'
          'box-1'
          'box-2'
          'box-3'
          'footer' ;
}