CSS Grid 수업 필기(5) Media Queries & The Grid

 <div class="grid">
      <div class="item">
        <h3>Heading</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, veniam
          animi soluta aspernatur corrupti ratione.
        </p>
      </div>
      <div class="item">
        <h3>Heading</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, veniam
          animi soluta aspernatur corrupti ratione.
        </p>
      </div>
      <div class="item">
        <h3>Heading</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, veniam
          animi soluta aspernatur corrupti ratione.
        </p>
      </div>
      <div class="item">
        <h3>Heading</h3>
        <p>
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique
          placeat possimus voluptas vel aliquam odit?
        </p>
      </div>
    </div>

 

.grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 1rem;
      }

      @media (max-width: 768px) {
        .grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (max-width: 500px) {
        .grid {
          grid-template-columns: 1fr;
        }
}

 

개인적으로 column을 조정하는게 더 쉽게 느껴진다.

내일 미니프로젝트로 웹페이지 하나를 grid를 이용해서 만들어 볼 계획.

나중에는 flex, grid 같이 사용해서 만들어 보는 연습도 해야겠다.

그래서 언젠가는 UI만 보고도 flex, grid 어떻게 짰는지 머릿속에 그려지도록 해보겠다 ㅋㅋㅋㅋ