[HTML/CSS] Grid 반응형 레이아웃 만들기

💡 실습 포인트!

PC 화면일 때 레이아웃

 

모바일, 태블릿일 때 레이아웃

• 오늘은 display : grid 를 이용하여 영역을 나누는 방법을 배워보았는데, 처음 보는 속성이라 굉장히 신선했다. 일단 위와 같은 영역으로 나누는 방법을 두 가지 배워보고, 반응형으로는 어떤 식으로 만드는지 공부했다.

---

💜 PC 화면

PC 화면일 때 레이아웃

🤍 1번째 방법

    <div class="grid-container">
        <div class="grid-nav"></div>
        <div class="grid-sidebar"></div>
        <div class="grid"></div>
    </div>

 

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px; /* fr 은 전체 너비에 대한 비율을 의미 */
  grid-template-rows: 100px 100px 100px;
  /* grid-gap: 10px; */ /* grid-gap 은 각 grid 사이의 간격을 의미 */
}

.grid-container div {
  border: 1px solid black;
}

.grid-nav {
  grid-column: 1 / 5; /* display: grid 자식들에만 사용가능한 속성, 각 숫자는 세로줄 순번을 의미 */
  grid-row: 1 / 2; /* display: grid 자식들에만 사용가능한 속성, 각 숫자는 가로줄 순번을 의미 */
}

.grid-sidebar {
  grid-row: 2 / 4;
}

.grid {
  grid-row: 2 / 4;
  grid-column: 2 / 5;
}

🤍 2번째 방법

    <div class="grid-container2">
        <div class="grid-nav2"></div>
        <div class="grid-sidebar2"></div>
        <div class="grid2"></div>
    </div>

 

.grid-container2 {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
    "헤더 헤더 헤더 헤더"
    "사이드 그리드 그리드 그리드"
    "사이드 그리드 그리드 그리드";
}

.grid-container2 div {
  border: 1px solid black;
}

.grid-nav2 {
  grid-area: 헤더;
}

.grid-sidebar2 {
  grid-area: 사이드;
}

.grid2 {
  grid-area: 그리드;
}

 

💜 모바일 화면

모바일, 태블릿일 때 레이아웃

• 1번째 방법에서 media query 를 추가해도 반응형 레이아웃을 만들 수 있지만 꽤 번거로운 반면, 2번째 방법에 media query 를 추가로 사용하면 좀 더 쉽게 반응형 레이아웃도 만들 수 있다.

@media screen and (max-width: 768px) {
  .grid-container2 {
    grid-template-areas:
      "헤더 헤더 헤더 헤더"
      "사이드 사이드 사이드 사이드"
      "그리드 그리드 그리드 그리드";
  }
}