Hướng dẫn grid css responsive

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à fr

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

Thử thay đổi chút code CSS với fr xem sao:

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

Kết quả:

Khái niệm mới tiếp theo là auto-fit

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

Chúng ta thay đoạn code grid-template-columns với 3 bằng auto-fit

Kết quả:

Để làm cho hình ảnh vừa với từng grid item, mình sẽ đặt nó cao và rộng bằng chính grid item đó, sau đó sử dụng object-fit: cover

Điều này sẽ làm cho hình ảnh bao phủ toàn bộ container và trình duyệt sẽ cắt nó nếu độ rộng của nó không đủ.

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

Kết quả:

Hi vọng với bài viết của mình giúp ích cho bạn trong việc responsive trang web của mình đơn giản hơn

Cảm ơn mọi người đã theo dõi.

Tài liệu tham khảo: https://medium.com/free-code-camp/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431