Bootstrap 简明教程

Bootstrap - CSS Grid

本章将讨论 Bootstrap CSS 格栅。Bootstrad 经过十多年的发展，其默认格栅系统已被广泛使用并证明其有效性。它是在没有诸如我们在当前浏览器中看到的现代 CSS 特性（如新的 CSS 网格）的情况下创建的。

This chapter will discuss about Bootstrap CSS grid. Bootstrap’s default grid system, developed over a decade, has been widely used and proven effective. It was created without modern CSS features and techniques like the new CSS Grid we see in current browsers.

How it works

Bootstrap 5 引入了使用基于 CSS 网格的格栅系统的能力并提供了附加的 Bootstrap 特性，可用于使用不同的方法创建自适应布局。

Bootstrap 5 introduces the ability to use a CSS Grid-based grid system with additional Bootstrap features for creating responsive layouts using different methods.

Recompile your Sass after disabling the default grid system by setting $enable-grid-classes to false and enabling CSS Grid with $enable-cssgrid set to true.
Replace instance of .row with .grid. The class .grid creates a grid-template by setting display: grid.
Instead of using .col- classes, use .g-col- classes because CSS Grid columns use the grid-column property instead of width.
Customize the column and gutter sizes of the parent .grid using CSS variables --bs-columns and --bs-gap.

Key differences

让我们来看一下 CSS 网格系统与标准网格系统相比的差异，如下所示：

Let us see differences of CSS grid system when compared to the standard grid system as below:

The impact of Flex utilities on CSS Grid columns is different.
Instead of using gutters, use gap that act like margins and replace the horizontal padding in grid system.
Grid gaps are automatically applied horizontally and vertically in. unlike *.row*s, *.grid*s do not have negative margins and cannot use margin utilities to adjust the gutters. Refer to the customizing section.
Modifier classes should be replaced with inline and custom styles (e.g., style="--bs-columns: 3;" vs class="row-cols-3").
Nesting requires resetting column counts for each nested .grid instance.

Three columns

使用 .g-col-4 为所有设备创建三列等宽列。根据视口大小，使用 responsive classes 根据视口大小修改布局。

Use .g-col-4 to create three equal-width columns for all devices. Modify the layout based on viewport size using responsive classes based on viewport size.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Three Columns</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center">
          <div class="g-col-4 bg-info p-2">First Column</div>
          <div class="g-col-4 bg-light p-2">Second Column</div>
          <div class="g-col-4 bg-warning p-2">Third Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

Responsive

要根据不同屏幕大小调整布局，请使用响应式类。举例来说，从较小屏幕上的两列开始，然后扩展至较大屏幕上的三列。

To adjust your layout for different screen sizes, use responsive classes. For example, start with two columns on smaller screens and then expand to three columns on larger screens.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <h2 class="text-center">Responsive</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center">
          <div class="g-col-6 g-col-md-4 bg-info">First Column</div>
          <div class="g-col-6 g-col-md-4 bg-light">Second Column</div>
          <div class="g-col-6 g-col-md-4 bg-warning">Third Column</div>
        </div>
      </div>
    </div>
</body>
</html>

在所有屏幕尺寸上，比较两列布局。

Compare the two-column layout across at all screen sizes.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Two Column Layout</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center">
        <div class="g-col-6 bg-info">First Column</div>
        <div class="g-col-6 bg-warning">Second Column</div>
      </div>
      </div>
    </div>
  </body>
  </html>

Wrapping

当没有更多水平空间时，网格项目会换行到下一行， gaps 适用于水平间距和垂直间距。

Grid items wrap to the next line when there’s no more horizontal space, with gaps applying to both horizontal and vertical spacing.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Wrapping</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center">
          <div class="g-col-6 bg-info">First Column</div>
          <div class="g-col-6 bg-warning">Second Column</div>

          <div class="g-col-6 bg-info">Third Column</div>
          <div class="g-col-6 bg-warning">Fourth Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

Starts

Start classes are a shorthand version of CSS Grid’s grid-column-start and grid-column-end properties, used to create grid templates by specifying column starting and ending points.
They are used in combination with column classes for column sizing and alignment, starting from 1 as 0 is not a valid value for these properties.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Starts</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center">
            <div class="g-col-3 g-start-2 bg-info">First Column</div>
            <div class="g-col-4 g-start-6 bg-warning">Second Column</div>
          </div>
        </div>
      </div>
    </div>
  </body>
  </html>

Auto columns

如果没有网格项目上的任何类，它们将自动调整为 .grid 中的一列。

Without any classes on grid items, they will automatically be sized to one column within a .grid.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

  <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - CSS Grid</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <h2 class="text-center">Auto Column</h2>
  <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
    <div class="row">
      <div class="grid text-center">
        <div class="bg-info">First</div>
        <div class="bg-warning">Second</div>
        <div class="bg-info">Third</div>
        <div class="bg-warning">Four</div>
        <div class="bg-info">Five</div>
        <div class="bg-warning">Six</div>
        <div class="bg-info">Seven</div>
        <div class="bg-warning">Eight</div>
        <div class="bg-info">Nine</div>
        <div class="bg-warning">Ten</div>
      </div>
    </div>
  </div>
</body>
</html>

网格列类可以与这种行为相结合。

Grid column classes can be combined with this behaviour.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Auto Column</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center">
          <div class="g-col-6">First</div>
            <div>Second</div>
            <div>Third</div>
            <div>Four</div>
            <div>Five</div>
            <div>Six</div>
            <div>Seven</div>
        </div>
      </div>
    </div>
  </body>
  </html>

Nesting

CSS 网格系统支持 .grid 的简单嵌套，并且与默认网格不同，它会继承对行、列和间距的修改。要实现嵌套，请考虑以下方案：

CSS Grid system enables simple nesting of *.grid*s, and unlike the default grid, it inherits modifications made to rows, columns, and gaps. To implement nesting consider the following scenario:

The default number of columns is overridden with a local CSS variable: --bs-columns: 3.
The number of columns in the first auto-column is maintained, and each column takes up one-third of the total width.
set the nested .grid's column count to 12 (our default) in the second auto-column.
There are no nested items in the third auto-column.

与基本网格结构相比，这在实践中支持更复杂和自定义的布局。

In comparison to the basic grid structure, this enables more complex and custom layouts in practice.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Nesting</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center p-3" style="--bs-columns: 3;">
          <div class="bg-secondary text-white">
            First Auto-column
            <div class="grid p-3">
              <div class="bg-warning">1</div>
              <div class="bg-info">2</div>
            </div>
          </div>
          <div class="bg-secondary text-white">
            Second Auto-column
            <div class="grid  p-3" style="--bs-columns: 12;">
              <div class="g-col-6 bg-warning">1</div>
              <div class="g-col-4 bg-info">2</div>
              <div class="g-col-2 bg-warning">3</div>
            </div>
          </div>
          <div class="bg-secondary text-white">Third Auto-column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

Customizing

使用局部 CSS 变量自定义列数和行数以及间距宽度。

Customize column and row count, along with gap width, using local CSS variables.

没有默认值的 CSS 变量，在指定局部实例之前使用回退值。举例来说， var(--bs-rows, 1) 用于 CSS 网格行，在定义 --bs-rows 时覆盖回退值 1。

CSS variables without default values use fallback values until a local instance is specified. For instance, var(--bs-rows, 1) is used for CSS Grid rows, overriding the fallback value of 1 when --bs-rows is defined.

No grid classes

.grid 元素内的网格项将自动调整大小，而无需使用 .g-col 类。

The grid items within the .grid element will be sized automatically without using .g-col class.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - CSS Grid</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <h2 class="text-center">No Grid Classes</h2>
  <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
    <div class="row">
      <div class="grid text-center" style="--bs-columns: 3;">
        <div class="bg-info">First Column</div>
        <div class="bg-light">Second Column</div>
        <div class="bg-warning">Third Column</div>
      </div>
    </div>
  </div>
</body>
</html>

Columns and gaps

让我们修改列数和间距，如下所示：

Let’s modify the column count and spacing as demonstrated below:

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Column and Gaps</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
          <div class="g-col-2 bg-info">First Column</div>
          <div class="g-col-2 bg-warning">Second Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

使用 --bs-columns: 10; 和 --bs-gap: 1rem; 更改间隙和列数。

Change the gap and the number of columns using --bs-columns: 10; and --bs-gap: 1rem;.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Column and Gaps</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
          <div class="g-col-6 bg-info">First Column</div>
          <div class="g-col-4 bg-warning">Second Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

Adding rows

下面的示例演示了如何重新排列列并增加行数：

Follwing example demonstartes rearranging of columns and increasing the number of rows:

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Adding Rows</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
          <div class="bg-info">First Column</div>
          <div class="g-start-2 bg-light" style="grid-row: 2">Second Column</div>
          <div class="g-start-3 bg-warning" style="grid-row: 3">Third Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

Gaps

只修改 row-gap 即可更改网格中的垂直间隙。如果需要，可以使用 .grid*s and the *row-gap 和 column-gap 来调整间隙。

Modify only the row-gap to change the vertical gaps in the grids. Use gap on .grid*s and the *row-gap and column-gap can be adjusted as required.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Gaps</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center" style="row-gap: 0;">
          <div class="g-col-6 bg-info">First Column</div>
          <div class="g-col-6 bg-warning">Second Column</div>

          <div class="g-col-6 bg-info">Third Column</div>
          <div class="g-col-6 bg-warning">Fourth Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

你可以为垂直 gap*s using inline style or the CSS variable *--bs-gap 和水平 gap*s using inline style or the CSS variable *--bs-gap 指定一个或一对值。

You can specify a single or pair of values for vertical and horizontal gap*s using inline style or the CSS variable *--bs-gap.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - CSS Grid</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <h2 class="text-center">Gaps</h2>
    <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
      <div class="row">
        <div class="grid text-center" style="--bs-gap: .25rem 1rem;">
          <div class="g-col-6 bg-info">First Column</div>
          <div class="g-col-6 bg-warning">Second Column</div>

          <div class="g-col-6 bg-info">Third Column</div>
          <div class="g-col-6 bg-warning">Fourth Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

Sass

CSS Grid 的一个缺点是，编译的 CSS 中生成类的数量由 $grid-columns 和 $grid-gutter-width Sass 变量的值预先确定。

One drawback of CSS Grid is that the number of classes generated in the compiled CSS is predetermined by the values of $grid-columns and $grid-gutter-width Sass variables.

Recompile your CSS after changing those default Sass variables.
To enhance the existing classes, use inline or custom styles.

你可以使用内联样式和预定义的 CSS Grid 列类（例如 .g-col-4 ）修改列计数、间隙大小和大小。

You can modify the column count, gap size, and size using inline styles and predefined CSS Grid column classes (e.g., .g-col-4).

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - CSS Grid</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <h2 class="text-center">Saas</h2>
  <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid">
    <div class="row">
      <div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
        <div class="bg-info" style="grid-column: span 14;">First Column</div>
        <div class="g-col-4 bg-warning">Second Column</div>
      </div>
    </div>
  </div>
</body>
</html>