CSS Grid Layout: tính đáp ứng

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Xuyên suốt loạt bài viết này chúng ta đã quen với cú pháp của Grid (hệ thống lưới), đã học về một số cách hiệu quả để dàn các thành phần trên một trang web, và nói lời tạm biệt với một vài thói quen cũ. Trong bài hướng dẫn này chúng ta sẽ áp dụng tất cả những điều đó vào trong vài bài thực hành về thiết kế web có khả năng đáp ứng (responsive).

Media Queries (Truy vấn thiết bị)

Hãy sử dụng cái demo từ bài trước.

Nó bao gồm hai grid; grid chính của chúng ta và grid lồng bên trong một trong những thành phần của chúng ta. Chúng ta có thể kiểm soát khi nào những cái grid này sẽ có tác dụng bằng cách sử dụng media queries, nghĩa là chúng ta hoàn toàn có thể định nghĩa lại layout (bố cục) của chúng ta tại những độ rộng khác nhau của wiewport.

Bắt đầu bằng việc nhân đôi grid đầu tiên, và bao nó trong một mobile-first (ưu tiên di động) media query (Tôi sử dụng 500px làm breakpoint (điểm ngắt), nhưng hoàn toàn có thể thiết lập bao nhiêu tuỳ ý):

.grid-1 {
    /* grid declaration styles */
}


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

    .grid-1 {
        /* grid declaration styles */
    }

}

Bây giờ, bên trong định nghĩa đầu tiên chúng ta sẽ thay đổi cách mà grid của chúng ta được định nghĩa, đặt toàn bộ mọi thứ ở trong một cột. Chúng ta sẽ chỉ liệt kê một cột trong luật grid-template-columns của chúng ta, hãy chắc chắn rằng bốn dòng mà chúng ta có bây giờ đã được định nghĩa với grid-template-rows, và sắp xếp layout với grid-template-areas:

.grid-1 {
    display: grid;
    width: 100%;
    margin: 0 auto;
    
    grid-template-columns: 1fr;
    grid-template-rows: 80px auto auto 80px;
    grid-gap: 10px;
    
    grid-template-areas:    "header"
                            "main"
                            "sidebar"
                            "footer";
}

Chúng ta đồng thời thiết lập grid-gap mặc định chỉ 10px, để tính toán cho những màn hình nhỏ hơn.

Đây là những gì mà nó cho chúng ta. Bạn sẽ để ý thấy rằng chúng ta cũng sử dụng media query để thay đổi padding và font-size trên phần tử .grid-1 div của chúng ta.

Grid lồng nhau của chúng ta

Nó sẽ chịu trách nhiệm cho layout chính, nhưng chúng ta vẫn có grid được lồng bên trong, mà vẫn cố định hai cột layout của nó dưới bất kỳ hoàn cảnh nào. Để thay đổi điều đó chúng ta sẽ làm giống hệt như trước, nhưng sử dụng một breakpoint khác để đưa ra một hướng tiếp cận content-first (ưu tiên nội dung):

.item-2 {
    /* grid declaration styles */
}


@media only screen and (min-width: 600px) {

    .item-2 {
        /* grid declaration styles */
    }

}

Kiểm tra kết quả cuối cùng trên CodePen.

Một số thứ cần lưu ý ở đây:

Như chúng ta đã nói trước đây, bạn có thể sắp xếp một cách trực quan các phần tử trong grid bất kể thứ tự, và media queries có nghĩa là chúng ta có thể có những thứ tự trực quan khác nhau cho những kích thước màn hình khác nhau. Tuy nhiên, việc lồng nhau vẫn duy trì đúng thứ tự; các phần tử của grid lồng trong của chúng ta phải luôn luôn trực quan và thật sự là con của grid cha.
CSS transitions (hiệu ứng chuyển động) không có bất kỳ tác dụng nào trên Grid layout. Khi media queries của chúng ta được kích hoạt, và các khu vực grid của chúng ta di chuyển tới các vị trí mới của chúng, bạn sẽ không thể làm chậm chuyển động của chúng.

auto-fill và minmax()

Một hướng tiếp cận có tính đáp ứng khác đối với Grid rất phù hợp với các kiểu layout masonry; các khối có kích thước và trôi tuỳ ý, tuỳ thuộc vào viewport.

auto-fill (tự động lấp đầy)

Cách tiếp cận của chúng ta cho đến bây giờ đã xác định có bao nhiêu hướng và xem các phần tử có vừa một cách phù hợp. Đó là những gì đang xảy ra trong phần minh hoạ này; chúng ta có grid-template-columns: repeat(4, 1fr); nói rằng "tạo bốn cột, và thiết lập cho mỗi cột một phần của một đơn vị chiều rộng".

Với từ khoá auto-fill chúng ta có thể khiến cho các track (không gian giữa các đường kẻ) của chúng ta có độ rộng như thế nào và cho phép Grid tính toán bao nhiêu sẽ vừa trong khoảng trống còn lại. Trong phần minh hoạ này chúng ta đã sử dụng grid-template-columns: repeat(auto-fill, 9em); nói rằng "tạo cho mỗi cột rộng 9em, và vừa vặn bao nhiêu tuỳ bạn trong kho chứa grid"

Lưu ý: điều này đồng thời cũng tính đến các gutter của chúng ta, grid-gap.

Kho chứa trong các minh hoạ này có một nền tối để diễn đạt một cách rõ ràng còn bao nhiêu khoảng trống, và bạn sẽ thấy rằng nó đã hoàn toàn không lấp đầy ở trong ví dụ cuối cùng. Vậy làm thế nào để chúng ta làm điều đó?

minmax()

Hàm minmax() cho phép chúng ta thiết lập một kích thước nhỏ nhất và lớn nhất cho một track, cho phép Grid làm việc bên trong chúng. Ví dụ chúng ta có thể thiết lập ba cột, hai cái đầu tiên rộng 1fr, cái cuối cùng lớn nhất là 1fr, nhưng co lại không nhỏ hơn 160px;

grid-template-columns: 1fr 1fr minmax(160px, 1fr);

Tất cả các cột sẽ co lại khi bạn thu nhỏ window (cửa sổ) lại. Hãy xem.

Trở về với phần minh hoạ auto-fill của chúng ta, nếu chúng ta đã thay đổi độ rộng cột của chúng ta thành minmax(9em, 1fr) thì Grid sẽ đặt càng nhiều track 9em có thể, nhưng sau đó mở rộng chúng đến một giá trị lớn nhất 1fr cho tới khi kho chứa được lấp đầy.

Điều kiện: Grid sẽ tính toán lại các track lúc trang được nạp lại (cố gắng co giãn trình duyệt và làm mới) nhưng nó sẽ không làm vậy khi thay đổi kích thước của window. Media queries có thể được sử dụng để thay đổi các giá trị; nhưng chúng vẫn không thích ứng tốt với sự thay đổi kích thước của window.

Kết luận

Hãy tóm tắt lại bằng một số dòng sau:

Media queries có thể giúp chúng ta sắp xếp lại một cách hoàn toàn các Grid layout bằng cách định nghĩa lại grid-template-areas (và những thứ khác) cho những ngữ cảnh khác nhau.
CSS transitions không hoạt động với grid layout.
Từ khoá auto-fill thì hữu ích cho việc lấp đầy các kho chứa grid.
Hàm minmax() bổ sung khá tốt cho auto-fill, đảm bảo các kho chứa được lấp đầy một cách hợp lý, nhưng không cho chúng ta "sự đáp ứng" đúng nghĩa.

Với các bài đã học trong loạt bài viết này, bạn đã được trang bị đầy đủ để có thể làm việc với Grid! Hãy theo dõi thêm các bài hướng dẫn về Grid, thực hành các bài tập, giải quyết các vấn đề của layout, và cập nhật.

Các nguồn tài liệu hữu ích

Grid bằng ví dụ 29: minmax() và trộn cột và dòng của Rachel Andrew
Video: Rachel Andrew (rõ ràng) minh hoạ minmax() trong layout trang chủ của Tuts+
Bản thảo của người biên tập W3C: auto-fill
Bản thảo của người biên tập W3C: minmax()