Cách thiết kế responsive chỉ trong 1 dòng CSS

Trong bài viết này, tôi sẽ hướng dẫn bạn cách sử dụng CSS Grid để tạo ra một hình ảnh đơn giản có thể thay đổi số lượng cột với độ rộng của màn hình.

Và phần đẹp nhất: Responsive sẽ được thêm vào với chỉ một dòng CSS duy nhất.

Điều này có nghĩa là chúng ta không phải bù đầu với mớ HTML với các tên class xấu xí (như col-sm-4, col-md-8) hoặc tạo các truy vấn media cho mọi kích thước màn hình.
Lưu ý: Chúng tôi cũng đã tạo ra một khóa học HTML,CSS miễn phí. Nhấp vào đây để đăng ký chỗ cho mình. http://bit.ly/html-css-mien-phi

Nào, hãy bắt đầu.

Thiết lập ban đầu chuẩn bị responsive trong 1 dòng CSS.

Đối với bài viết này, chúng tôi sẽ tiếp tục sử dụng ví dụ mà chúng tôi đã sử dụng trong bài viết CSS Grid trong 5 phút đầu tiên của tôi. Sau đó chúng ta sẽ thêm các hình ảnh vào cuối bài. Dưới đây là dạng ban đầu của lưới chúng tôi đã tạo.

 
Tạo khối bằng CSS Grid (đã thêm css cho màu và đánh số)
 

Đây là đoạn code HTML:

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

và đoạn CSS:

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

Lưu ý: ví dụ cũng có một chút css cơ bản, mà tôi sẽ không ghi vào đây, vì nó không có gì để làm với CSS Grid.
Nếu đoạn code này bạn chưa hiểu cách nó hoạt động, tôi khuyên bạn nên đọc bài Cùng học CSS Grid chỉ trong 5 phút, tôi đã giải thích rõ về cách Grid hoạt động..
Hãy bắt đầu bằng cách làm cho các cột responsive.

Responsive đơn giản với đơn vị phân đoạn.

CSS Grid mang lại cho nó một giá trị hoàn toàn mới gọi là một đơn vị phân đoạn. Các đơn vị phân đoạn được viết là "fr", và nó cho phép bạn chia tách container thành nhiều phân số như bạn muốn.
Hãy thay đổi từng cột thành một đơn vị phân đoạn.

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

Điều xảy ra dưới đây là grid đã bị chia tách toàn bộ chiều rộng thành ba phần phân đoạn và mỗi cột chiếm một đơn vị. Đây là kết quả:

Nếu chúng ta thay đổi giá trị grid-template-columns thành 1fr 2fr 1fr, thì cột thứ hai sẽ gấp hai lần so với hai cột khác.
Chiều rộng tổng cộng bây giờ là bốn đơn vị, và cột thứ hai chiếm hai đơn vị, trong khi những cột khác chiếm một đơn vị. Nó trông như thế này:

Nói cách khác, giá trị đơn vị phân đoạn làm cho bạn dễ dàng thay đổi chiều rộng của cột.

Responsive nâng cao với fr

Dĩ nhiên, ví dụ trên không cung cấp cho chúng tôi responsive mà chúng tôi muốn, vì grid này sẽ luôn luôn có ba cột rộng.
Chúng tôi muốn grid của chúng tôi thay đổi số lượng cột phù hợp với chiều rộng của thùng chứa. Để đạt được điều đó, bạn sẽ phải học ba khái niệm mới.

Hàm repeat()

Chúng ta sẽ bắt đầu với hàm repeat (). Đây là một cách mạnh mẽ hơn để xác định các cột và hàng của bạn.
Hãy lấy grid ban đầu của chúng tôi và thay đổi nó với hàm repeat ():

.container {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(2, 50px);
}

Nói cách khác, repeat(3, 100px) giống với 100px 100px 100px.
Tham số đầu tiên xác định có bao nhiêu cột hoặc hàng mà bạn muốn và tham số thứ hai chỉ định chiều rộng của chúng, vì vậy điều này sẽ chỉ cho chúng ta bố cục chính xác như khi chúng ta bắt đầu:

 
Hiển thị như lúc bắt đầu CSS chưa có hàm repeat

Hàm auto-fit

Chúng ta có tiếp hàm auto-fit. Hãy bỏ qua có một số cố định của cột, và thay bằng replace 3 với auto-fit.

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

Điều này dẫn đến cách hiển thị như sau:

Các ô bây giờ thay đổi số lượng theo chiều rộng của màn hình.
Nó chỉ đơn giản là cố gắng để đủ ô có kích thước 100px trong kích thước màn hình. Nếu quá thì sẽ tự động đẩy xuống dưới.
Tuy nhiên, nếu chúng ta cố định các cột là 100px thì sẽ không bao giờ linh hoạt được như mong muốn. Vì nó hiếm khi cộng đủ chiều rộng.
Như bạn thấy ở trên, bên tay phải thường còn thừa 1 khoảng trắng nhỏ.
Hàm minmax()

Thành phần cuối cùng chúng ta cần được gọi là minmax (). Chúng ta chỉ cần thay thế 100px với minmax(100px, 1fr). Đây là CSS cuối cùng:

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

Lưu ý rằng tất cả hành động xảy ra trong một dòng CSS. Điều này dẫn đến hành vi sau:

Và như bạn thấy rằng nó hoạt động hoàn hảo. Chức năng minmax() xác định một dải kích thước lớn hơn hoặc bằng min và nhỏ hơn hoặc bằng max.
Vì vậy, các cột sẽ luôn luôn có chiều rộng ít nhất 100px. Tuy nhiên, nếu có nhiều không gian hơn, các ô sẽ phân phối nó một cách bình đẳng cho mỗi cột, vì các cột đã biến thành một đơn vị phân đoạn thay vì cố định 100 px.

Thêm hình ảnh

Bước cuối cùng là add các hình ảnh vào cột. Điều này không liên quan gì đến CSS Grid, nhưng chúng ta vẫn phải nhìn vào code.
Chúng tôi sẽ bắt đầu bằng cách thêm một thẻ ảnh bên trong mỗi mục grid.

<div><img src="img/forest.jpg"/></div>

Để làm cho hình ảnh phù hợp với items, chúng tôi sẽ đặt width: 100%; height:100%; và sau đó sử dụng object-fit: cover;
Điều này sẽ làm cho hình ảnh đặt vừa vặn trong ô, và trình duyệt sẽ cắt nó nếu cần thiết.

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

Đây là cách nó hiển thị:

Đó là cách để responsive chỉ bằng 1 dòng CSS
Bây giờ bạn đã biết một trong những khái niệm phức tạp nhất trong CSS Grid, vì vậy hãy tự bảo vệ bản thân mình tránh các nhà tuyển dụng xâu xé.

Trình duyệt hỗ trợ

Trước khi kết thúc, tôi cũng cần đề cập đến trình duyệt hỗ trợ. Vào thời điểm viết bài này là 87,4% người dùng đang truy cập trình duyệt hỗ trợ CSS Grid. Tại Việt Nam là 74,11%.
Tôi tin năm 2018 sẽ là năm của CSS Grid. Và nó sẽ trở thành một kỹ năng phải có cho các nhà phát triển front-end. Giống như những gì đã xảy ra với CSS Flexbox trong vài năm gần đây.