Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions site/src/content/docs/layout/css-grid.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: CSS Grid
description: Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets.
description: Learn how to use and customize our alternate layout system built on CSS Grid with examples and code snippets.
toc: true
js: required
csstricks:
Expand All @@ -11,14 +11,14 @@ csstricks:
Bootstrap’s default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we’re seeing in browsers like the new CSS Grid.

<Callout type="warning">
**Heads up—our CSS Grid system is opt-in!** 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. See also our [container query utilities]([[docsref:/utilities/container-queries]]), which cover a related but distinct use case.
**Heads up—our CSS Grid system is enabled by default!** The `.grid` classes ship via the `$enable-cssgrid` Sass variable, which is `true` by default. Set it to `false` and recompile if you don’t want the CSS Grid classes. See also our [container query utilities]([[docsref:/utilities/container-queries]]), which cover a related but distinct use case.
</Callout>

## How it works

Bootstrap includes an optional grid system built on CSS Grid, but with a Bootstrap twist. You still get classes you can apply on a whim to build responsive layouts, but with a different approach under the hood.
Bootstrap includes an additional grid system built on CSS Grid, but with a Bootstrap twist. You still get classes you can apply on a whim to build responsive layouts, but with a different approach under the hood.

- **CSS Grid is opt-in.** Disable the default grid system by setting `$enable-grid-classes: false` and enable the CSS Grid by setting `$enable-cssgrid: true`. Then, recompile your Sass.
- **CSS Grid is enabled by default.** To remove the CSS Grid classes, set `$enable-cssgrid: false`; to drop the default flexbox grid classes instead, set `$enable-grid-classes: false`. Then, recompile your Sass.

- **Replace instances of `.row` with `.grid`.** The `.grid` class sets `display: grid` and creates a `grid-template` that you build on with your HTML.

Expand Down
2 changes: 1 addition & 1 deletion site/src/content/docs/utilities/grid.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import { getData } from '@libs/data'
Use grid utilities to control CSS Grid layout behavior. These utilities work with Bootstrap’s [CSS Grid layout system]([[docsref:/layout/css-grid]]) to manage column counts and auto-placement algorithms.

<Callout type="info">
**CSS Grid is opt-in.** To use these utilities, you need to enable the CSS Grid system by setting `$enable-cssgrid: true` in your Sass configuration. See our [CSS Grid documentation]([[docsref:/layout/css-grid]]) for more details.
**CSS Grid is enabled by default.** These utilities work out of the box; to remove them, disable the CSS Grid system by setting `$enable-cssgrid: false` in your Sass configuration. See our [CSS Grid documentation]([[docsref:/layout/css-grid]]) for more details.
</Callout>

## Column counts
Expand Down
Loading