Lưới CSS

Hệ thống lưới mặc định của Bootstrap đại diện cho đỉnh cao của hơn một thập kỷ kỹ thuật bố cục CSS, đã được thử và kiểm tra bởi hàng triệu người. Tuy nhiên, nó cũng được tạo ra mà không có nhiều tính năng và kỹ thuật CSS hiện đại mà chúng ta đang thấy trong các trình duyệt như CSS Grid mới.

Làm thế nào nó hoạt động

Với Bootstrap 5, chúng tôi đã thêm tùy chọn để kích hoạt một hệ thống lưới riêng biệt được xây dựng trên CSS Grid, nhưng với một vòng xoắn Bootstrap. Bạn vẫn nhận được các lớp học mà bạn có thể áp dụng theo ý thích để xây dựng các bố cục đáp ứng, nhưng với một cách tiếp cận khác.

• CSS Grid được chọn tham gia. Tắt hệ thống lưới mặc định bằng cách cài đặt $enable-grid-classes: falsevà bật Lưới CSS bằng cách cài đặt $enable-cssgrid: true. Sau đó, biên dịch lại Sass của bạn.

• Thay thế các trường hợp của .rowbằng .grid. Lớp .gridthiết lập display: gridvà tạo một lớp grid-templatemà bạn xây dựng dựa trên HTML của mình.

• Thay thế .col-*các lớp bằng .g-col-*các lớp. Điều này là do các cột CSS Grid của chúng tôi sử dụng thuộc grid-columntính thay vì width.

• Kích thước cột và máng xối được đặt thông qua các biến CSS. Đặt các giá trị này trên trang gốc .gridvà tùy chỉnh theo cách bạn muốn, nội dòng hoặc trong biểu định kiểu, với --bs-columnsvà --bs-gap.

Trong tương lai, Bootstrap có thể sẽ chuyển sang một giải pháp kết hợp vì thuộc gaptính này đã đạt được hỗ trợ trình duyệt gần như đầy đủ cho flexbox.

Sự khác biệt chính

So với hệ thống lưới mặc định:

• Các tiện ích Flex không ảnh hưởng đến các cột CSS Grid theo cách tương tự.

• Khoảng trống thay thế máng xối. Thuộc gaptính thay thế chiều ngang paddingtừ hệ thống lưới mặc định của chúng tôi và hoạt động giống hơn margin.

• Do đó, không giống như .rows, .grids không có biên âm và không thể sử dụng các tiện ích ký quỹ để thay đổi các rãnh lưới. Khoảng cách lưới được áp dụng theo chiều ngang và chiều dọc theo mặc định. Xem phần tùy chỉnh để biết thêm chi tiết.

• Các kiểu nội tuyến và kiểu tùy chỉnh nên được xem là sự thay thế cho các lớp bổ trợ (ví dụ: style="--bs-columns: 3;"vs class="row-cols-3").

• Việc lồng vào nhau hoạt động tương tự, nhưng có thể yêu cầu bạn đặt lại số lượng cột của mình trên mỗi trường hợp của một lồng nhau .grid. Xem phần làm tổ để biết thêm chi tiết.

Các ví dụ

Ba cột

Ba cột có chiều rộng bằng nhau trên tất cả các khung nhìn và thiết bị có thể được tạo bằng cách sử dụng các .g-col-4lớp. Thêm các lớp đáp ứng để thay đổi bố cục theo kích thước khung nhìn.

<div class="grid text-center">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

Phản ứng nhanh nhẹn

Sử dụng các lớp đáp ứng để điều chỉnh bố cục của bạn trên các chế độ xem. Ở đây, chúng tôi bắt đầu với hai cột trên các cửa sổ xem hẹp nhất, và sau đó phát triển thành ba cột trên các cửa sổ xem trung bình trở lên.

<div class="grid text-center">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

So sánh điều đó với bố cục hai cột này ở tất cả các chế độ xem.

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Gói

Các mục trong lưới tự động chuyển sang dòng tiếp theo khi không còn chỗ theo chiều ngang. Lưu ý rằng gapáp dụng cho khoảng cách ngang và dọc giữa các mục lưới.

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Bắt đầu

Các lớp bắt đầu nhằm mục đích thay thế các lớp bù đắp của lưới mặc định của chúng tôi, nhưng chúng không hoàn toàn giống nhau. CSS Grid tạo ra một mẫu lưới thông qua các kiểu yêu cầu trình duyệt “bắt đầu ở cột này” và “kết thúc ở cột này”. Các thuộc tính đó là grid-column-startvà grid-column-end. Các lớp học bắt đầu là viết tắt của lớp học trước đây. Ghép nối chúng với các lớp cột để định kích thước và căn chỉnh các cột của bạn theo cách bạn cần. Các lớp bắt đầu bắt đầu 1bằng 0một giá trị không hợp lệ cho các thuộc tính này.

<div class="grid text-center">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>

Các cột tự động

Khi không có lớp nào trên các mục lưới (con trực tiếp của a .grid), mỗi mục lưới sẽ tự động được định cỡ thành một cột.

<div class="grid text-center">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

Hành vi này có thể được trộn lẫn với các lớp cột lưới.

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

Làm tổ

Tương tự như hệ thống lưới mặc định của chúng tôi, CSS Grid của chúng tôi cho phép dễ dàng lồng các .grids. Tuy nhiên, không giống như mặc định, lưới này kế thừa các thay đổi trong hàng, cột và khoảng trống. Hãy xem xét ví dụ dưới đây:

• Chúng tôi ghi đè số cột mặc định bằng một biến CSS cục bộ --bs-columns: 3:.
• Trong cột tự động đầu tiên, số cột được kế thừa và mỗi cột bằng một phần ba chiều rộng có sẵn.
• Trong cột tự động thứ hai, chúng tôi đã đặt lại số cột trên cột được lồng .gridvào 12 (mặc định của chúng tôi).
• Cột tự động thứ ba không có nội dung lồng nhau.

Trong thực tế, điều này cho phép các bố cục tùy chỉnh và phức tạp hơn khi so sánh với hệ thống lưới mặc định của chúng tôi.

<div class="grid text-center" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12</div>
      <div class="g-col-4">4 of 12</div>
      <div class="g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Third auto-column</div>
</div>

Tùy chỉnh

Tùy chỉnh số cột, số hàng và độ rộng của khoảng trống bằng các biến CSS cục bộ.

Các biến CSS này không có giá trị mặc định; thay vào đó, chúng áp dụng các giá trị dự phòng được sử dụng cho đến khi một phiên bản cục bộ được cung cấp. Ví dụ: chúng tôi sử dụng var(--bs-rows, 1)cho các hàng Lưới CSS của mình, các hàng này sẽ bỏ qua --bs-rowsvì chưa được đặt ở đâu. Khi đúng như vậy, phiên bản .gridsẽ sử dụng giá trị đó thay vì giá trị dự phòng của 1.

Không có lớp lưới

Các phần tử con ngay lập tức của .gridlà các mục lưới, vì vậy chúng sẽ được định kích thước mà không cần thêm .g-collớp một cách rõ ràng.

<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

Cột và khoảng trống

Điều chỉnh số lượng cột và khoảng cách.

<div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>

<div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>

Thêm hàng

Thêm nhiều hàng hơn và thay đổi vị trí của các cột:

<div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

Khoảng trống

Chỉ thay đổi các khoảng trống theo chiều dọc bằng cách sửa đổi row-gap. Lưu ý rằng chúng tôi sử dụng gaptrên .grids, nhưng row-gapvà column-gapcó thể được sửa đổi khi cần thiết.

<div class="grid text-center" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Do đó, bạn có thể có các gaps theo chiều dọc và chiều ngang khác nhau, có thể nhận một giá trị duy nhất (tất cả các cạnh) hoặc một cặp giá trị (dọc và ngang). Điều này có thể được áp dụng với kiểu nội tuyến cho gaphoặc với --bs-gapbiến CSS của chúng tôi.

<div class="grid text-center" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Sass

One limitation of the CSS Grid is that our default classes are still generated by two Sass variables, $grid-columns and $grid-gutter-width. This effectively predetermines the number of classes generated in our compiled CSS. You have two options here:

• Modify those default Sass variables and recompile your CSS.
• Use inline or custom styles to augment the provided classes.

For example, you can increase the column count and change the gap size, and then size your “columns” with a mix of inline styles and predefined CSS Grid column classes (e.g., .g-col-4).

<div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 columns</div>
  <div class="g-col-4">.g-col-4</div>
</div>