bootstrap/site/content/docs/5.0/helpers/quick-grid.md

layout	title	description	group	toc
docs	Quick grid	Helpers that build on top of our CSS Grid utilities to make component layout faster and easier than ever.	helpers	true

How it works

The quick grid helper utilizes CSS Grid layout and some local CSS custom properties to quickly and efficiently configure the layout of set of elements.

{{< scss-docs name="quick-grid" file="scss/helpers/_quick-grid.scss" >}}

We set the display to engage the CSS Grid, specify a default --columns count of 1 for easy vertical stacking, and provide a column template that uses the --columns to equally layout any number of columns.

When paired with .gap-* utilities, you can easily adjust the gap between elements.

Examples

Vertical

Create a single column of stacked items.

{{< example >}}

First item

Second item

Third item

{{< /example >}}

And the same approach with <button> elements.

{{< example >}}

Button 1 Button 2 Button 3

{{< /example >}}

Horizontal

Quickly turn a vertical stack into a horizontal stack by adding increasing the default --columns to any number.

{{< example >}}

First item

Second item

Third item

{{< /example >}}

And once again, the same but with <button> elements:

{{< example >}}

Button 1 Button 2 Button 3

{{< /example >}}

When you have a --columns value higher than the number of elements, they'll only take up their fraction of the available space.

{{< example >}}

Button 1 Button 2 Button 3

{{< /example >}}