Hướng dẫn responsive grid css - css lưới đáp ứng

Question

Nội dung chính Show

1. Chuẩn bị

Như bài lần trước mình đăng trước, chúng ta sẽ tiếp tục sử dụng grid cơ bản chạy xuyên suốt các ví dụ:

Code HTML:

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Code CSS:

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

Chuẩn bị xong roài đó, quẩy thôi nào.

CSS grid mang đến một đơn vị đo độ dài mới đó là fraction unit, kí hiệu là

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

1

fraction unit cho phép ta chia các component thành nhiều phân số (

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

3) như bạn muốn

Thử thay đổi chút code CSS với

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

1 xem sao:

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50px 50px;
}

Kết quả:

Vì vậy, chúng ta lại có bố cục chính xác như những gì đã bắt đầu:

.container {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fit, 100px);
    grid-template-rows: repeat(2, 100px);
}

3.2 auto-fit()

Kết quả:

Chúng ta sẽ bắt đầu với hàm

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

9

Đây là một cách đơn giản hơn để sử dụng grid mà không cần phải chỉ rõ độ dài của từng cột

.container > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Kết quả:

Nếu bây giờ ta thay đổi một chút code CSS

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

6 thì chúng ta sẽ được cột thứ 2 có độ rộng gấp đôi độ rồng của cột thứ nhất và cột thứ ba

3. Responsive với

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

7 và

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

8

Như ví dụ trên thì số cột luôn giữ nguyên là 3 và chỉ thay đổi kích thước giữa các cột thôi