[HTML/CSS] grid-column, grid-row 으로 레이아웃 만들기

💡 실습 포인트!

• 이전 실습 때 display : grid 를 활용해서 구역을 나누어보았다면 이번에는 실제로 이미지를 넣어서 반응형으로 레이아웃을 구현해보았다.
• PC 화면에서는 첫번째 이미지가 제일 크게 2*2 사이즈를 차지하고 나머지는 1*1 사이즈로, 총 6장의 이미지가 각 자리에 배치된다.
• 모바일 화면에서는 모든 이미지가 동일하게 1*1 사이즈로 세로 정렬되어 배치된다.

---

💜 PC 화면

• 기본적으로 html 파일은 다음과 같이 작성한다.

<div class="grid-container">
    <div class="first"><img src="https://placeimg.com/500/500/any"></div>
    <div><img src="https://placeimg.com/500/500/arch"></div>
    <div><img src="https://placeimg.com/500/500/nature"></div>
    <div><img src="https://placeimg.com/500/500/people"></div>
    <div><img src="https://placeimg.com/500/500/tech"></div>
    <div><img src="https://placeimg.com/600/600/people"></div>
</div>

 

.grid-container {
  display: grid;
  max-width: 1200px;
  margin: auto;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid-container img {
  width: 100%;
  height: 100%; 
  /* width 만 100% 로 지정했더니 미세하게(8px 정도?) 사진 하단에 틈이 생겨 height 도 100% 로 맞춰주었다.*/
}

.first {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

💜 모바일 화면

• 기존에 열이 3개(첫번째 사진은 열을 2개 차지하는 것으로 친다.)였다면 모바일 화면은 열이 1개여야 하므로 grid-template-column 도 수정한다.
• PC 화면일 때 첫번째 사진의 사이즈를 2*2 로 맞춰주었기 때문에, 모바일 화면일 때는 1*1 이 될 수 있도록 CSS 수정한다.

@media screen and (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }

  .first {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }
}