Ví dụ CSS Grid Bài 7: Bố cục lại Grid bằng Media Queries

Ở bài trước chúng ta đã học cách bố trí các item bằng Grid Area qua tên của item.

Hôm nay chúng ta sẽ tìm hiểu cách bố cục lại khi người dùng thay đổi kích thước màn hình cũng sử dụng Grid Area thông qua tên item. Nhưng sử dụng thêm truy vấn @media only screen and ()

Bước 1. Tạo các phần tử bằng HTML

<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box sidebar2">Sidebar 2</div>
  <div class="box content">Content
    <br /> More content than we had before so this column is now quite tall.</div>
  <div class="box footer">Footer</div>
</div>

Bước 2. Bố cục Grid ban đầu bằng CSS

Chúng ta cũng viết CSS như bài trước để bố cục item thông qua tên của nó.

body {
  margin: 40px;
}

.sidebar {
        grid-area: sidebar;
    }

    .sidebar2 {
        grid-area: sidebar2;
    }

    .content {
        grid-area: content;
    }

    .header {
        grid-area: header;
    }

    .footer {
        grid-area: footer;
    }

    .wrapper {
        background-color: #fff;
        color: #444;
    }

  .wrapper {
    display: grid;
    grid-gap: 1em;
    grid-template-areas:
     "header"
     "sidebar"
     "content"
     "sidebar2"
     "footer"
  }

Các bước bố cục cũng tương tự như bài trước, nhưng ở bài này, đầu tiên chúng ta sẽ đặt mỗi các item trên một hàng.

Note: Tôi đã css lại một chút để cho dễ nhìn, nó không liên quan gì đến Grid.

Bước 3. Bố cục lại vị trí các item khi màn hình nhỏ hơn 600px

Chúng ta tạo truy vấn @media như sau:

    @media only screen and (min-width: 600px)   {
        .wrapper {
            grid-gap: 20px;
            grid-template-columns: 120px auto 120px;
            grid-template-areas:
            "header  header  header"
            "sidebar content sidebar2"
            "footer  footer  footer";
            max-width: 600px;
        }
    }

Đối với truy vấn @media only screen and (min-width: 600px) {} là khi kích thước màn hình nhỏ hơn 600px sẽ thực hiện bố cục lại như trên, kết quả:

Bố cục lại Grid khi màn hình nhỏ hơn 600px

Để hiểu rõ hơn, chúng ta sẽ tiếp tục bố cục khi màn hình nhỏ hơn 500px. Cũng sử dụng truy vấn @media như trên nhưng min-widt: 500px và sắp xếp lại cách hiển thị trong thuộc tính grid-template-areas

    @media only screen and (min-width: 500px)  {
    .wrapper {

        grid-template-columns: 20% auto;
        grid-template-areas:
    "header   header"
        "sidebar  content"
        "sidebar2 sidebar2"
        "footer   footer";
    }
    }

Đây là kết quả:

Demo code sử dụng truy vấn @media trong codepen

Mở trong Codepen để xem với màn hình rộng, co kéo kích thước màn hình để hiểu rõ hơn.

NOTE: Hãy thử thay đổi ít nhất 7 phiên bản khác nhau trước khi sang bài tiếp theo.

Như vậy là bạn đã biết cách sử dụng truy vấn @media trong bố cục lại layout khi người dùng thay đổi màn hình sử dụng. Kiến thức này sẽ có ích khi bạn thiết kế website responsive.

*Lưu ý: Bạn có thể sử dụng Grid để thay đổi vị trí của các item thoải mái. NHƯNG, đối với các item có ý nghĩa logic với nhau. Chúng ta nếu có muốn thay đổi, hãy để ý đến vấn đề logic từ trên xuống dưới, từ trái sang phải.

Bài tiếp theo: Ví dụ CSS Grid Bài 8: Layer items trong Grid