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.
2. Responsive cơ bản với the fraction unit
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ả:
3.2 auto-fit()
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ả:
4. Kết luận
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: //medium.com/free-code-camp/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431