Hướng dẫn can you use css grid and bootstrap together? - bạn có thể sử dụng lưới css và bootstrap với nhau không?

Hệ thống lưới mặc định của Bootstrap, thể hiện đỉnh cao của hơn một thập kỷ kỹ thuật bố trí CSS, được thử và thử nghiệm bởi hàng triệu người. Nhưng, 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 tôi thấy trong các trình duyệt như lưới CSS mới.

Head lên hệ thống lưới CSS của chúng tôi là thử nghiệm và chọn tham gia kể từ v5.1.0! Chúng tôi đã đưa nó vào tài liệu của chúng tôi CSS CSS để chứng minh nó cho bạn, nhưng nó bị vô hiệu hóa theo mặc định. Hãy đọc để tìm hiểu làm thế nào để kích hoạt nó trong các dự án của bạn. We included it in our documentation’s CSS to demonstrate it for you, but it’s disabled by default. Keep reading to learn how to enable it in your projects.

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 mà được xây dựng trên lưới CSS, nhưng với một vòng xoắn bootstrap. Bạn vẫn nhận được các lớp học bạn có thể áp dụng theo ý thích để xây dựng bố cục đáp ứng, nhưng với một cách tiếp cận khác dưới mui xe.

• CSS Grid là chọn tham gia. Vô hiệu hóa hệ thống lưới mặc định bằng cách đặt

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

  5 và bật lưới CSS bằng cách đặt

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

  6. Sau đó, biên dịch lại sass của bạn. Disable the default grid system by setting

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

  5 and enable the CSS Grid by setting

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

  6. Then, recompile your Sass.

• Thay thế các trường hợp của

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

  7 bằng

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

  8. Lớp

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

  8 đặt

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

  0 và tạo ra một

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

  1 mà bạn xây dựng với HTML của mình. The

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

  8 class sets

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

  0 and creates a

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

  1 that you build on with your HTML.

• Thay thế các lớp

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

  2 bằng các lớp

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

  3. Điều này là do các cột lưới CSS của chúng tôi sử dụng thuộc tính

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

  4 thay vì

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

  5. This is because our CSS Grid columns use the

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

  4 property instead of

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

  5.

• Các cột và kích thước máng xối được đặt thông qua các biến CSS. Đặt chúng trên cha mẹ

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

  8 và tùy chỉnh theo cách bạn muốn, nội tuyến hoặc trong bảng kiểu, với

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

  7 và

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

  8. Set these on the parent

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

  8 and customize however you want, inline or in a stylesheet, with

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

  7 and

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

  8.

Trong tương lai, Bootstrap có thể sẽ chuyển sang giải pháp lai vì thuộc tính

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

Sự khác biệt chính

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

• Các tiện ích flex don don ảnh hưởng đến các cột lưới CSS theo cùng một cách.

• Khoảng cách thay thế máng xối. Thuộc tính

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

  9 thay thế ngang

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

  1 từ hệ thống lưới mặc định của chúng tôi và các chức năng giống như

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

  2.

• Như vậy, không giống như

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

  7,

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

  8 không có lề âm và các tiện ích ký quỹ không thể được sử dụng để thay đổi máng xối 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à tùy chỉnh nên được xem là thay thế cho các lớp sửa đổi (ví dụ:

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

  5 so với

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

  6).

• Nesting hoạt động tương tự, nhưng có thể yêu cầu bạn đặt lại cột của mình trên mỗi trường hợp của một

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

  8 lồng nhau. Xem phần làm tổ để biết chi tiết.

Ví dụ

Ba cột

Ba cột có chiều rộng bằng nhau trên tất cả các chế độ xem và thiết bị có thể được tạo bằng cách sử dụng các lớp

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

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

.g-col-4

.g-col-4

.g-col-4

<div class="grid">
  <div class="g-col-4">.g-col-4div>
  <div class="g-col-4">.g-col-4div>
  <div class="g-col-4">.g-col-4div>
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 khung nhìn hẹp nhất, và sau đó phát triển thành ba cột trên các khung nhìn trung bình trở lên.

.G-COL-6 .G-COL-MD-4

.G-COL-6 .G-COL-MD-4

.G-COL-6 .G-COL-MD-4

<div class="grid">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4div>
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">
  <div class="g-col-6">.g-col-6div>
  <div class="g-col-6">.g-col-6div>
div>

Gói

Các mặt hàng lưới tự động quấn vào dòng tiếp theo khi không có phòng nào theo chiều ngang. Lưu ý rằng

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

.g-col-6

.g-col-6

.g-col-6

.g-col-6

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

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

Bắt đầu

Các lớp bắt đầu nhằm thay thế các lớp bù 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 nói với các trình duyệt để bắt đầu tại cột này và kết thúc tại cột này. Những thuộc tính đó là

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

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

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

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

.G-COL-3 .G-START-2

.G-COL-4 .G-START-6

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

Cột tự động

Khi không có lớp nào trên các mục lưới (trẻ em ngay lập tức của

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

<div class="grid">
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
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">
  <div class="g-col-6">.g-col-6div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
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 làm tổ dễ dàng

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

• Chúng tôi ghi đè số lượng các cột mặc định với biến CSS cục bộ:

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

  6.
• Trong cột tự động đầu tiên, số cột được kế thừa và mỗi cột là 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ố lượng cột trên

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

  8 đến 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 phức tạp và tùy chỉnh 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" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-columndiv>
      <div>Auto-columndiv>
    div>
  div>
  <div>
    Second auto-column
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12div>
      <div class="g-col-4">4 of 12div>
      <div class="g-col-2">2 of 12div>
    div>
  div>
  <div>Third auto-columndiv>
div>

Tùy chỉnh

Tùy chỉnh số lượng cột, số lượng hàng và chiều rộng của các khoảng trống với các biến CSS cục bộ.

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

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

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

<div class="grid">
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
div>

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

<div class="grid">
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
div>

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 trường hợp cục bộ được cung cấp. Ví dụ: chúng tôi sử dụng

<div class="grid">
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
div>

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

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

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

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

Các yếu tố trẻ em ngay lập tức của

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

<div class="grid">
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
  <div>1div>
div>

Auto-column

Auto-column

Auto-column

<div class="grid" style="--bs-columns: 3;">
  <div>Auto-columndiv>
  <div>Auto-columndiv>
  <div>Auto-columndiv>
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" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2div>
  <div class="g-col-2">.g-col-2div>
div>

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

Thêm hàng

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

Auto-column

Auto-column

Auto-column

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

Khoảng trống

Chỉ thay đổi các khoảng cách dọc bằng cách sửa đổi

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

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

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

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

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

.g-col-6

.g-col-6

.g-col-6

.g-col-6

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

Do đó, bạn có thể có các

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

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

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

.g-col-6

.g-col-6

.g-col-6

.g-col-6

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

Sass

Một hạn chế của lưới CSS là các lớp mặc định của chúng tôi vẫn được tạo bởi hai biến SASS,

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

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

• Sửa đổi các biến SASS mặc định đó và biên dịch lại CSS của bạn.
• Sử dụng các kiểu nội tuyến hoặc tùy chỉnh để tăng cường các lớp được cung cấp.

Ví dụ: bạn có thể tăng số lượng cột và thay đổi kích thước khoảng cách, sau đó kích thước các cột của bạn, với sự kết hợp của các kiểu nội tuyến và các lớp cột lưới CSS được xác định trước (ví dụ:

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

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

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

Bạn nên sử dụng CSS Grid hoặc Bootstrap?

Bạn có thể kết hợp CSS Grid và Flexbox không?

Là một phần lưới của bootstrap?