Autogrid

Creating responsive and dynamic grid layouts is a key aspect of modern web design. The Auto-Grid classes presented here provide a versatile solution for designing grids with ease. In this article, we'll explore the concepts and practical usage of these CSS classes to maximize your layout flexibility.

Introduction

The Auto-Grid classes are designed to make grid layout creation straightforward and responsive. Whether you need to build a grid of images, cards, or any other content, these classes offer a powerful toolset for achieving your design goals.

Using Auto-Grid

To implement the Auto-Grid layout in your HTML, follow these steps:

1. Begin by applying the .auto-grid class to an HTML element to create an auto-generated grid layout. The align-content: start property aligns the grid content at the start.

<div class="auto-grid">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

2. To adjust the spacing between grid elements, use one of the .auto-grid-space-* classes. These classes set the --cds-comp-composition-auto-grid-space variable, controlling the gap between grid items.

For example, the .auto-grid-space-s class sets the gap to the value of --cds-sys-spacing-s. Choose the class that suits your desired spacing:

Class	Value
.auto-grid-space-3xs	--cds-sys-spacing-3xs
.auto-grid-space-2xs	--cds-sys-spacing-2xs
.auto-grid-space-xs	--cds-sys-spacing-xs
.auto-grid-space-s	--cds-sys-spacing-s
.auto-grid-space-m	--cds-sys-spacing-m
.auto-grid-space-l	--cds-sys-spacing-l
.auto-grid-space-xl	--cds-sys-spacing-xl
.auto-grid-space-2xl	--cds-sys-spacing-2xl
.auto-grid-space-3xl	--cds-sys-spacing-3xl

3. To adjust the minimum track size for grid columns, apply one of the .auto-grid-min-* classes, which set the --cds-comp-composition-auto-grid-min variable. The minimum track size determines when new columns are created in your grid. For example, the .auto-grid-min-m class sets the minimum track size to 28rem:

<div class="auto-grid auto-grid-min-m">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

4. To define how tracks are created in the grid, you can use the .auto-grid-fill and .auto-grid-fit classes. .auto-grid-fill sets --cds-comp-composition-auto-grid-track-list to auto-fill, while .auto-grid-fit sets it to auto-fit. This influences how tracks are distributed within the available space.

For example, you can create a grid that fits the available space:

<div class="auto-grid auto-grid-fit">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

These Auto-Grid classes offer the flexibility to create dynamic and responsive grid layouts for various use cases, from card grids to image galleries.

Practical Use Cases

The Auto-Grid classes are versatile and can be applied to a wide range of design scenarios:

• Designing image galleries with responsive grid layouts.
• Building flexible card grids for content display.
• Crafting responsive navigation menus that adapt to different screen sizes.
• Structuring content in a way that optimizes space utilization.