Grid

CSS Grid layout for creating responsive grids with equal-width columns or asymmetric layouts.

Grid

Class Reference

Class	Purpose	Columns	Example
af-grid	Auto-adjusting grid (recommended)	Auto-fit (default)	<div class="af-grid">
af-grid-1	1 equal column (explicit)	1	<div class="af-grid-1">
af-grid-2	2 equal columns (explicit)	2	<div class="af-grid-2">
af-grid-3	3 equal columns (explicit)	3	<div class="af-grid-3">
af-grid-4	4 equal columns (explicit)	4	<div class="af-grid-4">
af-grid-5	5 equal columns (explicit)	5	<div class="af-grid-5">
af-grid-6	6 equal columns (explicit)	6	<div class="af-grid-6">
af-grid-7	7 equal columns (explicit)	7	<div class="af-grid-7">
af-grid-8	8 equal columns (explicit)	8	<div class="af-grid-8">
af-grid-9	9 equal columns (explicit)	9	<div class="af-grid-9">
af-grid-10	10 equal columns (explicit)	10	<div class="af-grid-10">
af-grid-11	11 equal columns (explicit)	11	<div class="af-grid-11">
af-grid-12	12 equal columns (explicit)	12	<div class="af-grid-12">

Equal Columns

For equal-width columns, use af-grid-1 through af-grid-12:

<!-- 2 equal columns -->
<div class="af-grid-2">
  <div class="af-card">
    Item 1
  </div>
  <div class="af-card">
    Item 2
  </div>
</div>
<!-- 3 equal columns -->
<div class="af-grid-3">
  <div class="af-card">
    Item 1
  </div>
  <div class="af-card">
    Item 2
  </div>
  <div class="af-card">
    Item 3
  </div>
</div>

Responsive Grid

All grid classes support responsive variants. Use responsive suffixes for breakpoint-specific columns:

<!-- Auto-adjusting with responsive overrides -->
<div class="af-grid af-grid-1@sm af-grid-3@md af-grid-6@xl">
  <div class="af-card">
    Item 1
  </div>
  <div class="af-card">
    Item 2
  </div>
  <div class="af-card">
    Item 3
  </div>
  <div class="af-card">
    Item 4
  </div>
  <div class="af-card">
    Item 5
  </div>
  <div class="af-card">
    Item 6
  </div>
</div>
<!-- Explicit columns with responsive -->
<div class="af-grid-1 af-grid-2@md af-grid-4@lg">
  <div class="af-card">
    Item 1
  </div>
  <div class="af-card">
    Item 2
  </div>
  <div class="af-card">
    Item 3
  </div>
  <div class="af-card">
    Item 4
  </div>
</div>

Available responsive variants: All af-grid-1 through af-grid-12 support @xs, @sm, @md, @lg, @xl, and @2xl suffixes. Use af-grid as the default auto-fit grid.

Tip: New to the @{bp} syntax? See Responsive Suffix for breakpoints, patterns, and best practices.

Gap Override

Use af-gap-sm, af-gap-lg, etc. to override the default gap-md:

<div class="af-grid af-gap-lg">
  Large gap between columns
</div>
<div class="af-grid-2 af-gap-xl">
  Extra large gap
</div>

Note: af-grid-1 through af-grid-12 are standalone classes that include display: grid and gap-md automatically. You don’t need to combine them with af-grid.

Live Examples

Auto-adjusting: 2 children = 2 columns

50%

50%

Auto-adjusting: 3 children = 3 columns

33%

33%

33%

Explicit: 6 columns

1

2

3

4

5

6

12-Column Grid

For asymmetric layouts, use af-grid with af-col-span-* classes.

Class Reference

Class	Purpose	Usage
af-col-span-1 through af-col-span-12	Column spans (1-12)	Use inside af-grid container

Basic 12-Column Grid

<div class="af-grid">
  <div class="af-col-span-8@lg">
    Main content (8/12)
  </div>
  <div class="af-col-span-4@lg">
    Sidebar (4/12)
  </div>
</div>

Mobile-first default: Items in a 12-column grid automatically default to full width (12 columns) on mobile. You only need to specify responsive spans for larger screens.

Mobile-First Pattern

The pattern af-col-span-8@lg means:

• Mobile (default): Full width (12 columns) - automatic
• Large screens and up: 8 columns (two-thirds width)

Note: The base af-col-span-12 class exists for completeness but isn’t needed - full width is the automatic default. However, responsive variants like af-col-span-12@md are available if you need to explicitly set full width at a specific breakpoint (e.g., af-col-span-6 af-col-span-12@md for “half width on mobile, full width on medium+”).

Column Spans Reference

Class	Spans	Example	Use Case
af-col-span-1	1 column	<div class="af-col-span-1">	Narrow column
af-col-span-2	2 columns	<div class="af-col-span-2">	Small column
af-col-span-3	3 columns	<div class="af-col-span-3">	Quarter width
af-col-span-4	4 columns	<div class="af-col-span-4">	One-third width
af-col-span-5	5 columns	<div class="af-col-span-5">	Custom width
af-col-span-6	6 columns (half width)	<div class="af-col-span-6">	Half width
af-col-span-7	7 columns	<div class="af-col-span-7">	Custom width
af-col-span-8	8 columns (two-thirds)	<div class="af-col-span-8">	Two-thirds width
af-col-span-9	9 columns	<div class="af-col-span-9">	Three-quarters width
af-col-span-10	10 columns	<div class="af-col-span-10">	Custom width
af-col-span-11	11 columns	<div class="af-col-span-11">	Custom width
af-col-span-12	12 columns (full width)	<div class="af-col-span-12">	Full width (exists but not needed - default)

Note: Full width (12 columns) is the default - no class needed. The af-col-span-12 class exists for completeness but isn’t recommended. For explicit full width at breakpoints, use responsive variants: af-col-span-12@md, af-col-span-12@lg, etc.

Responsive: All spans support responsive suffixes: af-col-span-6@md, af-col-span-8@lg, af-col-span-12@md, etc. Items default to full width on mobile, so you only need responsive classes for larger screens.

Live Example (12-Column)

Main content (8 columns on large screens)

Sidebar (4 columns on large screens)