Grid Auto Fit

What it does

The .grid-auto-fit class creates a responsive CSS Grid container that automatically fits as many columns as possible within its width. Each column will be at least 250px wide (or 100% if the container is smaller), and will expand to fill available space. The gap between grid items is set by the CSS variable --grid-gap (defaulting to your $spacing-6 Sass variable).

Key features:

• Responsive: columns auto-fit to the container width
• Minimum column width: 250px (or 100% if smaller)
• Customizable gap via --grid-gap
• Uses modern CSS Grid

How to use

1. Add the class to a container:

   <div class="grid-auto-fit">
     <div>Item 1</div>
     <div>Item 2</div>
     <div>Item 3</div>
     <!-- ... -->
   </div>
   

2. Customize the gap (optional):

   <div class="grid-auto-fit" style="--grid-gap: 2rem;">
     <!-- grid items -->
   </div>
   

3. Result: The grid will automatically create as many columns as fit, each at least 250px wide, and distribute the items responsively.

Example

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

Tip: You can override the minimum column width by editing the SCSS if needed. The default is minmax(min(250px, 100%), 1fr).

HTML Code (Demo)

<div class="grid-auto-fit">
<div class="ds-showcase--container"></div>
<div class="ds-showcase--container"></div>
<div class="ds-showcase--container"></div>
<div class="ds-showcase--container"></div>
</div>

Configuration

{
  "headline": "Fit Auto Grid"
}