Lưới Bootstrap 3

Vài năm qua đã chứng kiến ​​rất nhiều phương pháp để tạo bố cục trang web. CSS Grid là một trong những công cụ mới nhất và thay đổi cuộc chơi nhiều nhất theo ý của chúng tôi. Nếu bạn chưa bắt đầu mày mò với nó, bây giờ là lúc. Đó là một cách suy nghĩ cực kỳ khác biệt về định vị nội dung và hiện tại nó có hỗ trợ gần như đầy đủ trên tất cả các trình duyệt web phổ biến

Để sao chép phần lớn các tính năng của hệ thống lưới Bootstrap 3, chúng tôi chỉ yêu cầu một phần nhỏ các tính năng mà CSS Grid cung cấp

Khái niệm chính được giới thiệu trong hệ thống lưới Bootstrap 3 mà chúng tôi sẽ sao chép là khả năng xác định rõ ràng tỷ lệ của bộ chứa lưới cho từng điểm ngắt đáp ứng. Để so sánh, Bootstrap 2 chỉ xác định tỷ lệ cho máy tính để bàn và bất kỳ chế độ xem nào nhỏ hơn 767px sẽ hiển thị tất cả các mục lưới ở độ rộng đầy đủ, xếp chồng lên nhau theo chiều dọc, trong một cột

Để bắt đầu, chúng ta có thể định nghĩa tên lớp của mình tương tự như tên được sử dụng trong Bootstrap 3

hàng cho vùng chứa lưới

col-[screenSize]-[numColumns] cho một mục lưới trong đó [screenSize] là một trong những chữ viết tắt kích thước của chúng tôi (xs,sm,md,lg,xl) và [numColumns] là một số từ 1 đến 12

Để sử dụng CSS Grid, chúng ta chỉ cần áp dụng display. lưới;

.row {
  display: grid;
}

Tiếp theo, chúng ta có thể xác định số lượng cột trong lưới của mình và kích thước của máng xối (khoảng cách giữa các mục/cột). Bootstrap sử dụng 12 cột với máng xối 15px

.row{display: grid;grid-template-columns: repeat(12, 1fr);grid-gap: 15px;}

repeat(12, 1fr) là cách viết tắt của “1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr” trong đó 'fr' là đơn vị phân số. Đặt tất cả 12 cột của chúng tôi thành 1fr có nghĩa là tất cả chúng sẽ có cùng chiều rộng. Bằng cách thay đổi các giá trị này, chúng ta có thể dễ dàng tạo một lưới có số lượng cột khác nhau hoặc với các cột có độ rộng khác nhau

Bây giờ chúng ta đã xác định vùng chứa lưới của mình và đã đến lúc xác định các mục lưới sẽ đi vào đó. Để làm như vậy, chúng ta chỉ cần đặt thuộc tính grid-column-end cho từng biến thể của grid item. Đặt nó thành giá trị 'span 1' sẽ làm cho mục rộng một cột. 'Span 6' sẽ làm cho nó rộng 6 cột, bằng một nửa trong lưới 12 cột của chúng tôi

Còn nhiều điều nữa mà chúng ta có thể đạt được với thuộc tính này hoặc với các thuộc tính tương tự và cách viết tắt cho các thuộc tính này. Tôi khuyến khích bạn khám phá các khả năng và hiểu rằng chúng tôi chỉ đang làm xước bề mặt trong bản demo này. https. // thủ thuật css. com/snippets/css/complete-guide-grid/

Nhiệm vụ phức tạp nhất mà chúng tôi có là điền vào tất cả các kích thước nhịp khác nhau tại tất cả các điểm dừng khác nhau. Mô hình như sau

@media (min-width: 0) {.col-xs-1 {grid-column-end: span 1;}.col-xs-2 {grid-column-end: span 2;}.col-xs-3 {grid-column-end: span 3;}// ...up to .col-sm-12}@media (min-width: 768px) {.col-sm-1 {grid-column-end: span 1;}.col-sm-2 {grid-column-end: span 2;}.col-sm-3 {grid-column-end: span 3;}//...up to .col-sm-12}

…lặp lại cho ‘md’ ở 992px và ‘lg’ ở 1200px

Khi chúng tôi hiểu mẫu, việc xây dựng nó bằng một vòng lặp lồng nhau trong Sass như vậy là đủ đơn giản

// Loop through responsive breakpoints@each $size, $abbr in (0,xs),(768px,sm),(992px,md),(1200px,lg){@media (min-width: $size){// Loop through col classes@for $i from 1 through 12{.col-#{$abbr}-#{$i}{grid-column-end: span $i;}}}}

Tất cả những gì còn lại là đặt mặc định chiều rộng đầy đủ cho các trường hợp không xác định được chiều rộng. Ví dụ: một mục lưới có các lớp “col-md-4, col-sm-6” không có chiều rộng được xác định khi chế độ xem nhỏ hơn 768px (điểm ngắt sm)

Tuy nhiên, nó được xác định cho các khung nhìn lớn hơn 992px (điểm ngắt md) vì truy vấn phương tiện sẽ tiếp tục áp dụng chiều rộng cho tất cả các khung nhìn rộng hơn 992px trừ khi nó bị ghi đè bằng cách xác định chiều rộng lg

Thay vì yêu cầu nhà phát triển chỉ định chiều rộng xs cho mọi mục, chúng tôi có thể đặt chiều rộng đầy đủ của nó một cách an toàn làm mặc định mà người dùng có thể ghi đè nếu họ chọn

[class^=col-]{grid-column-end: span 12;}

Quy tắc kiểu này sẽ áp dụng cho bất kỳ thành phần nào có lớp bắt đầu bằng “col-” và đặt chiều rộng 12 cột. Quy tắc sẽ được đặt phía trên vòng lặp lồng nhau của chúng tôi để đảm bảo rằng các kiểu lưới khác sẽ ghi đè lên quy tắc đó

Các thiết bị siêu nhỏ Điện thoại (