Skip to Content
Documentation
Product Dev
CSS GridDocumentation

Grid - Responsive Grid System

A powerful, flexible grid system inspired by Bootstrap, built with modern CSS and Tailwind-style responsive syntax.

Getting Started

Quick Start

Include the Grid CSS file in your functions.php:

php
wp_enqueue_style( 'aios-grid-system', 'https://resources.agentimage.com/libraries/css/ag-grid/1.0.3/styles.css' );

Grid includes a modern CSS reset that handles:

  • Box-sizing normalization
  • Margin resets for common elements
  • Optimized text rendering
  • Responsive images and media
  • Form element normalization
  • Button reset
  • Safe area support for iOS devices

iOS Full Screen Support

html
<head>
	<!-- Required: Basic viewport -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
	<!-- iOS: Enable full screen when added to home screen -->
	<meta name="apple-mobile-web-app-capable" content="yes">
 
	<!-- iOS: Status bar style (black-translucent for full screen) -->
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 
	<!-- iOS: Disable automatic detection -->
	<meta name="format-detection" content="telephone=no">
 
	<!-- PWA: Theme color -->
	<meta name="theme-color" content="#000000">
</head>

Meta Viewport Options

Full Control

html
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

Viewport attributes:

  • width=device-width - Match device width
  • initial-scale=1.0 - Initial zoom level
  • maximum-scale=1.0 - Prevent zoom (use cautiously)
  • user-scalable=no - Disable pinch zoom (use cautiously)
  • viewport-fit=cover - Critical for iOS safe areas - Extends content into safe area

Complete iOS Setup Example

html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
 
		<!-- iOS Web App -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		<meta name="apple-mobile-web-app-title" content="My App">
 
		<!-- Theme -->
		<meta name="theme-color" content="#fa7c07">
 
		<link rel="stylesheet" href="https://resources.agentimage.com/libraries/css/ag-grid/1.0.2/styles.css">
		<title>My iOS Web App</title>
	</head>
	<body>
		<div class="ag-safe-vh ag-safe">
			<header class="ag-fixed-top-safe">
			<!-- Header respects notch -->
			</header>
			
			<main class="ag-pt-safe ag-pb-safe">
			<!-- Content respects safe areas -->
			</main>
			
			<footer class="ag-fixed-bottom-safe">
			<!-- Footer respects home indicator -->
			</footer>
		</div>
	</body>
</html>

Basic Usage

html
<div class="ag-container">
	<div class="ag-row">
		<div class="ag-col-12">Full width column</div>
	</div>
</div>

Breakpoints

Grid uses the following responsive breakpoints with a modern, Tailwind-inspired syntax:

BreakpointPrefixDimensions
Base(none)<480px
Extra smallxs:>=480px
Smallsm:>=600px
Mediummd:>=744px
Largelg:>=1024px
Extra largexl:>=1280px

Container

Containers are the most basic layout element and are required when using the grid system. Containers center and horizontally pad your content.

Container

html
<div class="ag-container">
	<!-- Content here -->
</div>

Container Max Widths

  • Default: 100% width with 15px padding
  • xs (≥480px): max-width: 480px
  • sm (≥600px): max-width: 600px
  • md (≥744px): max-width: 744px
  • lg (≥1024px): max-width: 1024px
  • xl (≥1280px): max-width: 1280px

Container Classes

ClassMax WidthDescription
.ag-containerResponsiveMain container, adapts to breakpoint
.ag-container-xs480pxExtra small container
.ag-container-sm640pxSmall container
.ag-container-md744pxMedium container
.ag-container-lg1024pxLarge container
.ag-container-xl1280pxExtra large container

Max Width Utilities

ClassMax WidthDescription
.ag-max-w-xs480pxExtra small max width
.ag-max-w-sm640pxSmall max width
.ag-max-w-md744pxMedium max width
.ag-max-w-lg1024pxLarge max width
.ag-max-w-xl1280pxExtra large max width
.ag-max-w-full100%Full width
.ag-max-w-nonenoneNo max width constraint

Responsive Max Width

All max-width utilities support responsive variants using Tailwind-style prefixes:

Content with responsive max-width

Responsive container width

Unconstrained width on XL screens

html
<!-- Base max-width small, large on medium+ -->
<div class="ag-container ag-max-w-sm md:ag-max-w-lg">
    Content with responsive max-width
</div>
 
<!-- Full width on mobile, extra large on large+ screens -->
<div class="ag-container ag-max-w-full lg:ag-max-w-xl">
    Responsive container width
</div>
 
<!-- No max-width constraint on extra large screens -->
<div class="ag-container ag-max-w-lg xl:ag-max-w-none">
    Unconstrained width on XL screens
</div>

Combining Container with Max Width

Content constrained to medium width

Column 1
Column 2
html
<!-- Container with custom max-width -->
<div class="ag-container ag-max-w-md">
    <div class="ag-row">
        <div class="ag-col-12">
            Content constrained to medium width
        </div>
    </div>
</div>
 
<!-- Responsive max-width container -->
<div class="ag-container ag-max-w-sm lg:ag-max-w-xl">
    <div class="ag-row">
        <div class="ag-col-6">Column 1</div>
        <div class="ag-col-6">Column 2</div>
    </div>
</div>

Available Responsive Max Width Classes:

  • xs:ag-max-w-{xs|sm|md|lg|xl|full|none} - Extra small and up
  • sm:ag-max-w-{xs|sm|md|lg|xl|full|none} - Small and up
  • md:ag-max-w-{xs|sm|md|lg|xl|full|none} - Medium and up
  • lg:ag-max-w-{xs|sm|md|lg|xl|full|none} - Large and up
  • xl:ag-max-w-{xs|sm|md|lg|xl|full|none} - Extra large and up

Grid System

How It Works

Grid’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.

  • Rows are wrappers for columns using .ag-row
  • Columns are immediate children of rows
  • Content should be placed within columns
  • Columns have horizontal padding (gutter) of 15px by default

Auto-Layout Columns

Equal Width

Column
Column
html
<div class="ag-container">
	<div class="ag-row">
		<div class="ag-col-6">Column</div>
		<div class="ag-col-6">Column</div>
	</div>
</div>

Three Equal Columns

Column
Column
Column
html
<div class="ag-row">
	<div class="ag-col-4">Column</div>
	<div class="ag-col-4">Column</div>
	<div class="ag-col-4">Column</div>
</div>

Column Sizes

Use .ag-col-{1-12} to specify column width:

12 columns (100%)
6 columns (50%)
6 columns (50%)
4 columns (33.33%)
4 columns (33.33%)
4 columns (33.33%)
3 columns (25%)
9 columns (75%)
html
<div class="ag-row">
	<div class="ag-col-12">12 columns (100%)</div>
	<div class="ag-col-6">6 columns (50%)</div>
	<div class="ag-col-6">6 columns (50%)</div>
	<div class="ag-col-4">4 columns (33.33%)</div>
	<div class="ag-col-4">4 columns (33.33%)</div>
	<div class="ag-col-4">4 columns (33.33%)</div>
	<div class="ag-col-3">3 columns (25%)</div>
	<div class="ag-col-9">9 columns (75%)</div>
</div>

Responsive Classes

Mix and match different classes for each breakpoint to create complex responsive layouts.

Stack to Horizontal

Main content
Sidebar
html
<div class="ag-row">
	<div class="ag-col-12 md:ag-col-8">Main content</div>
	<div class="ag-col-12 md:ag-col-4">Sidebar</div>
</div>

Mobile, Tablet, Desktop

Column
Column
Column
Column
html
<div class="ag-row">
	<div class="ag-col-12 sm:ag-col-6 lg:ag-col-3">Column</div>
	<div class="ag-col-12 sm:ag-col-6 lg:ag-col-3">Column</div>
	<div class="ag-col-12 sm:ag-col-6 lg:ag-col-3">Column</div>
	<div class="ag-col-12 sm:ag-col-6 lg:ag-col-3">Column</div>
</div>

Offset Classes

Move columns to the right using offset classes:

Centered column
Column
Column
html
<div class="ag-row">
	<div class="ag-col-4 ag-offset-4">Centered column</div>
</div>
 
<div class="ag-row">
	<div class="ag-col-3 ag-offset-3">Column</div>
	<div class="ag-col-3 ag-offset-3">Column</div>
</div>

Responsive Offsets

Centered with different offsets per breakpoint

html
<div class="ag-row">
	<div class="ag-col-6 ag-offset-3 md:ag-col-4 md:ag-offset-4">
		Centered with different offsets per breakpoint
	</div>
</div>

Available Offset Classes

  • .ag-offset-{0-12} - Base offset
  • xs:ag-offset-{0-12} - Extra small devices
  • sm:ag-offset-{0-12} - Small devices
  • md:ag-offset-{0-12} - Medium devices
  • lg:ag-offset-{0-12} - Large devices
  • xl:ag-offset-{0-12} - Extra large devices

Gutters

Gutters are the padding between columns. You can adjust gutters using gutter classes for both horizontal and vertical spacing.

How Gutters Work

  • Containers provide 15px horizontal padding by default
  • Columns have horizontal padding (gutters) that create space between content
  • Rows use negative margins to offset the first and last column’s padding
  • Gutter classes applied to rows control the spacing between columns
  • Horizontal gutters (.ag-gx-*) control left/right spacing between columns
  • Vertical gutters (.ag-gy-*) control top/bottom spacing between rows
  • Combined gutters (.ag-g-*) control both horizontal and vertical spacing

Gutter Sizes

Column
Column
Column
Column
Column
Column
Column
Column
Column
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
html
<!-- Small gutter -->
<div className="ag-container ag-px-1">
	<div className="ag-row ag-g-1">
		<div className="ag-col-xs ag-flex-basis ag-flex-grow-1">Column</div>
		<div className="ag-col-xs ag-flex-basis ag-flex-grow-1">Column</div>
		<div className="ag-col-xs ag-flex-basis ag-flex-grow-1">Column</div>
	</div>
</div>
 
<!-- Medium gutter -->
<div className="ag-container ag-px-3">
	<div className="ag-row ag-g-3">
		<div className="ag-col-xs ag-flex-basis ag-flex-grow-1">Column</div>
		<div className="ag-col-xs ag-flex-basis ag-flex-grow-1">Column</div>
		<div className="ag-col-xs ag-flex-basis ag-flex-grow-1">Column</div>
		<div className="ag-col-xs ag-flex-basis ag-flex-grow-1">Column</div>
	</div>
</div>
 
<!-- Large gutter -->
<div className="ag-container ag-px-5">
	<div className="ag-row ag-g-5">
		<div className="ag-col-xs ag-flex-basis ag-flex-grow-1">Column</div>
		<div className="ag-col-xs ag-flex-basis ag-flex-grow-1">Column</div>
	</div>
</div>
 
<!-- Complex gutter -->
<div className="ag-grid ag-gx-1 ag-gy-4 ag-grid-cols-3">
	<div>Item 1</div>
	<div>Item 2</div>
	<div>Item 3</div>
	<div>Item 4</div>
	<div>Item 5</div>
	<div>Item 6</div>
</div>

Available Gutter Classes

  • .ag-g-0 - 0px gutter
  • .ag-g-1 - 6px gutter
  • .ag-g-2 - 12px gutter
  • .ag-g-3 - 18px gutter
  • .ag-g-4 - 24px gutter
  • .ag-g-5 - 30px gutter

Responsive Gutters

Column
Column
html
<div className="ag-container ag-px-2 md:ag-px-4 lg:ag-px-5">
	<div class="ag-row ag-g-2 md:ag-g-4 lg:ag-g-5">
		<div class="ag-col-6">Column</div>
		<div class="ag-col-6">Column</div>
	</div>
</div>

CSS Grid

Grid also provides CSS Grid utilities for modern grid layouts.

Basic Grid

Item 1
Item 2
Item 3
html
<div class="ag-grid ag-grid-cols-3">
	<div>Item 1</div>
	<div>Item 2</div>
	<div>Item 3</div>
</div>

Available Grid Classes

  • .ag-grid - Creates a CSS Grid container
  • .ag-grid-cols-{1-12} - Sets number of columns

Responsive Grid Columns

Responsive grid with custom gap for medium screen and higher.

Item 1
Item 2
Item 3
Item 4
html
<div class="ag-grid ag-grid-cols-1 sm:ag-grid-cols-2 lg:ag-grid-cols-4 md:ag-g-5">
	<div>Item 1</div>
	<div>Item 2</div>
	<div>Item 3</div>
	<div>Item 4</div>
</div>

Display Utilities

Control the display property of elements.

Responsive Syntax

Grid uses the intuitive breakpoint: prefix pattern for responsive utilities:

Responsive column

Visible on medium and up

Centered on mobile, left-aligned on large screens

html
<!-- Apply different column widths at different breakpoints -->
<div class="ag-col-12 md:ag-col-8 lg:ag-col-6">
	Responsive column
</div>
 
<!-- Hide on mobile, show on tablet+ -->
<div class="ag-d-none md:ag-d-block">
	Visible on medium and up
</div>
 
<!-- Text alignment changes -->
<div class="ag-text-center lg:ag-text-start">
	Centered on mobile, left-aligned on large screens
</div>

Responsive Utility Classes

Grid provides comprehensive utility classes that work across all breakpoints. All utilities support responsive variants by adding breakpoint prefixes: xs:, sm:, md:, lg:, xl:.

Text Alignment

  • .ag-text-start - Left align text
  • .ag-text-center - Center align text
  • .ag-text-end - Right align text

Display

  • .ag-d-block - Block display
  • .ag-d-inline - Inline display
  • .ag-d-inline-block - Inline-block display
  • .ag-d-flex - Flex display
  • .ag-d-none - Hide element

Flexbox Layout

  • .ag-flex-wrap / .ag-flex-nowrap / .ag-flex-wrap-reverse - Flex wrap
  • .ag-flex-row / .ag-flex-column / .ag-flex-row-reverse / .ag-flex-column-reverse - Direction
  • .ag-flex-grow-0 / .ag-flex-grow-1 - Flex grow
  • .ag-flex-shrink-0 / .ag-flex-shrink-1 - Flex shrink
  • .ag-flex-basis-0 / .ag-flex-basis-auto - Flex basis

Flexbox Alignment

  • Justify Content: .ag-justify-start / .ag-justify-end / .ag-justify-center / .ag-justify-between / .ag-justify-around / .ag-justify-evenly
  • Align Items: .ag-align-start / .ag-align-end / .ag-align-center / .ag-align-baseline / .ag-align-stretch
  • Align Content: .ag-content-start / .ag-content-end / .ag-content-center / .ag-content-between / .ag-content-around / .ag-content-stretch

Responsive Usage

Add breakpoint prefixes to any utility for responsive behavior:

Responsive text alignment

Hidden on mobile, visible on medium+

Column on mobile, row on medium+

First in HTML, appears right on desktop
Second in HTML, appears left on desktop
html
<!-- Text alignment changes at different breakpoints -->
<div class="ag-text-center md:ag-text-start lg:ag-text-end">
	Responsive text alignment
</div>
 
<!-- Display changes at breakpoints -->
<div class="ag-d-none md:ag-d-block">
	Hidden on mobile, visible on medium+
</div>
 
<!-- Flex direction changes -->
<div class="ag-d-flex ag-flex-column md:ag-flex-row">
	Column on mobile, row on medium+
</div>
 
<!-- Reverse column order on desktop -->
<div class="ag-row lg:ag-flex-row-reverse">
    <div class="ag-col-6">First in HTML, appears right on desktop</div>
    <div class="ag-col-6">Second in HTML, appears left on desktop</div>
</div>

Common Responsive Patterns:

  • ag-d-none md:ag-d-block — Hidden on mobile, visible on medium and up
  • ag-flex-column lg:ag-flex-row — Column direction by default, row on large screens
  • ag-text-center lg:ag-text-end — Center aligned by default, right aligned on large screens
  • ag-justify-center md:ag-justify-between — Centered on mobile, space-between on medium+
  • ag-align-stretch lg:ag-align-center — Stretch on mobile, center on large screens

Safe Area Support

Grid includes comprehensive support for device safe areas (notches, rounded corners, home indicators on iOS devices).

CSS Custom Properties

ag-grid provides CSS custom properties for safe area insets:

css
:root {
	--safe-top: env(safe-area-inset-top);
	--safe-bottom: env(safe-area-inset-bottom);
	--safe-left: env(safe-area-inset-left);
	--safe-right: env(safe-area-inset-right);
}

Safe Area Padding Classes

All Sides Padding

html
<div class="ag-safe">
	Content with safe area padding on all sides
</div>

Individual Side Padding

html
<!-- Top padding only -->
<div class="ag-pt-safe">
	Content with top safe area padding
</div>
 
<!-- Bottom padding only -->
<div class="ag-pb-safe">
	Content with bottom safe area padding
</div>
 
<!-- Left padding only -->
<div class="ag-pl-safe">
	Content with left safe area padding
</div>
 
<!-- Right padding only -->
<div class="ag-pr-safe">
	Content with right safe area padding
</div>
 
<!-- All sides padding -->
<div class="ag-p-safe">
	Content with padding on all sides
</div>

Viewport Height Classes

Perfect for full-screen layouts that respect safe areas:

html
<!-- Full viewport height (100dvh) -->
<div class="ag-safe-vh">
	Full height content
</div>
 
<!-- Minimum viewport height -->
<div class="ag-safe-min-vh">
	Minimum full height content
</div>
 
<!-- Maximum viewport height -->
<div class="ag-safe-max-vh">
	Maximum full height content
</div>

Fixed Positioning with Safe Areas

For fixed headers and footers that respect device safe areas:

html
<!-- Fixed top with safe area -->
<header class="ag-fixed-top-safe">
	Fixed header respecting top safe area
</header>
 
<!-- Fixed bottom with safe area -->
<footer class="ag-fixed-bottom-safe">
	Fixed footer respecting bottom safe area (home indicator)
</footer>

Safe Area Examples

Full Screen App with Fixed Navigation

html
<div class="ag-safe-vh">
	<header class="ag-fixed-top-safe">
		Navigation
	</header>
 
	<main class="ag-pt-safe ag-pb-safe">
		Main content
	</main>
 
	<footer class="ag-fixed-bottom-safe">
		Bottom navigation
	</footer>
</div>

Mobile App Layout

html
<div class="ag-safe-min-vh ag-safe">
	<div class="ag-container">
		<div class="ag-row">
		<div class="ag-col-12">
			Content that respects all safe areas
		</div>
		</div>
	</div>
</div>

Examples

Basic Layout

Header
Main Content
Footer
html
<div class="ag-container">
	<div class="ag-row">
		<div class="ag-col-12">
			<header>Header</header>
		</div>
	</div>
	<div class="ag-row">
		<div class="ag-col-12 md:ag-col-8">
			<main>Main Content</main>
		</div>
		<div class="ag-col-12 md:ag-col-4">
			<aside>Sidebar</aside>
		</div>
	</div>
	<div class="ag-row">
		<div class="ag-col-12">
			<footer>Footer</footer>
		</div>
	</div>
</div>

Card Basic

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
html
<div class="ag-container">
	<div class="ag-row">
		<div class="ag-col-12 sm:ag-col-6 lg:ag-col-4">
			<div class="card">Card 1</div>
		</div>
		<div class="ag-col-12 sm:ag-col-6 lg:ag-col-4">
			<div class="card">Card 2</div>
		</div>
		<div class="ag-col-12 sm:ag-col-6 lg:ag-col-4">
			<div class="card">Card 3</div>
		</div>
		<div class="ag-col-12 sm:ag-col-6 lg:ag-col-4">
			<div class="card">Card 4</div>
		</div>
		<div class="ag-col-12 sm:ag-col-6 lg:ag-col-4">
			<div class="card">Card 5</div>
		</div>
		<div class="ag-col-12 sm:ag-col-6 lg:ag-col-4">
			<div class="card">Card 6</div>
		</div>
	</div>
</div>

Card Grid

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
html
<div class="ag-container ag-px-0">
	<div class="ag-grid ag-grid-cols-3">
		<div class="card">Card 1</div>
		<div class="card">Card 2</div>
		<div class="card">Card 3</div>
		<div class="card">Card 4</div>
		<div class="card">Card 5</div>
		<div class="card">Card 6</div>
	</div>
</div>

Complex Responsive Layout

Column 1
Column 2
Column 3
Column 4
html
<div class="ag-container ag-px-0">
	<div class="ag-row">
		<!-- Full width on mobile, 50% on tablet, 25% on desktop -->
		<div class="ag-col-12 sm:ag-col-6 lg:ag-col-3">Column 1</div>
		<div class="ag-col-12 sm:ag-col-6 lg:ag-col-3">Column 2</div>
		<div class="ag-col-12 sm:ag-col-6 lg:ag-col-3">Column 3</div>
		<div class="ag-col-12 sm:ag-col-6 lg:ag-col-3">Column 4</div>
	</div>
</div>

Nested Grids

Nested Column 1
Nested Column 2

Sidebar

html
<div class="ag-container">
	<div class="ag-row">
		<div class="ag-col-12 lg:ag-col-9">
			<div class="ag-row">
				<div class="ag-col-6">Nested Column 1</div>
				<div class="ag-col-6">Nested Column 2</div>
			</div>
		</div>
		<div class="ag-col-12 lg:ag-col-3">
			Sidebar
		</div>
	</div>
</div>

Best Practices

  1. Always use containers: Wrap your rows in .ag-container for proper alignment
  2. Direct children: Columns should be direct children of rows
  3. Content in columns: Always place your content within columns
  4. Mobile-first: Start with base classes and add responsive modifiers as needed
  5. Semantic HTML: Use appropriate HTML elements alongside grid classes
  6. Use the colon syntax: Leverage md:, lg: prefixes for clear, readable responsive code

Browser Support

Grid works in all modern browsers that support:

  • Flexbox
  • CSS Grid
  • CSS Custom Properties (CSS Variables)
  • CSS env() function (for safe area support)

Customization

You can customize Grid by modifying CSS custom properties:

css
:root {
	--gutter-x: 20px; /* Change default gutter */
	--gutter-y: 20px;
}

Tips & Tricks

Centering Content

html
<!-- Center a column -->
<div class="ag-row">
	<div class="ag-col-6 ag-offset-3">Centered</div>
</div>

Equal Height Columns

Columns in a row are automatically equal height due to flexbox:

html
<div class="ag-row">
	<div class="ag-col-4">Short content</div>
	<div class="ag-col-4">Much longer content that spans multiple lines...</div>
	<div class="ag-col-4">Medium content</div>
</div>

Responsive Column Reordering

Use flexbox order utilities to reorder columns at different breakpoints:

html
<div class="ag-row lg:ag-flex-row-reverse">
	<div class="ag-col-6">First in HTML, appears right on desktop</div>
	<div class="ag-col-6">Second in HTML, appears left on desktop</div>
</div>

Progressive Enhancement Pattern

Start mobile-first and progressively enhance for larger screens:

html
<!-- Stack on mobile, side-by-side on tablet, different ratios on desktop -->
<div class="ag-row">
	<div class="ag-col-12 sm:ag-col-6 lg:ag-col-8">Main content</div>
	<div class="ag-col-12 sm:ag-col-6 lg:ag-col-4">Sidebar</div>
</div>

Combining Utilities

Mix grid classes with utility classes for powerful layouts:

html
<div class="ag-row ag-g-4 ag-justify-center">
	<div class="ag-col-12 md:ag-col-8 lg:ag-col-6 ag-text-center">
		Centered, responsive column with spacing
	</div>
</div>

Migration from Bootstrap

If you’re migrating from Bootstrap, here are the key differences:

Class Name Changes

  • Bootstrap: container, row, col-*
  • Grid: ag-container, ag-row, ag-col-*

Responsive Syntax

  • Bootstrap: col-md-6 (hyphen separator)
  • Grid: md:ag-col-6 (colon prefix)

Migration Example

Before (Bootstrap):

<div class="container">
	<div class="row">
		<div class="col-12 col-md-8 col-lg-6">Content</div>
	</div>
</div>

After (Grid):

<div class="ag-container">
	<div class="ag-row">
		<div class="ag-col-12 md:ag-col-8 lg:ag-col-6">Content</div>
	</div>
</div>

Common Patterns

Hero Section

html
<div class="ag-container">
	<div class="ag-row ag-justify-center ag-text-center">
		<div class="ag-col-12 lg:ag-col-8">
			<h1>Hero Title</h1>
			<p>Hero description text</p>
		</div>
	</div>
</div>

Two Column Layout with Sidebar

html
<div class="ag-container">
	<div class="ag-row ag-g-4">
		<div class="ag-col-12 lg:ag-col-8">
			<article>Main article content</article>
		</div>
		<div class="ag-col-12 lg:ag-col-4">
			<aside>Sidebar widgets</aside>
		</div>
	</div>
</div>

Product Grid

html
<div class="ag-container">
	<div class="ag-row ag-g-3 ag-g-md-4">
		<div class="ag-col-6 sm:ag-col-4 lg:ag-col-3">
			<div class="product-card">Product 1</div>
		</div>
		<div class="ag-col-6 sm:ag-col-4 lg:ag-col-3">
			<div class="product-card">Product 2</div>
		</div>
		<div class="ag-col-6 sm:ag-col-4 lg:ag-col-3">
			<div class="product-card">Product 3</div>
		</div>
		<div class="ag-col-6 sm:ag-col-4 lg:ag-col-3">
			<div class="product-card">Product 4</div>
		</div>
	</div>
</div>

Feature Sections

html
<div class="ag-container">
	<div class="ag-row ag-g-5 ag-align-center">
		<div class="ag-col-12 md:ag-col-6">
			<img src="feature.jpg" alt="Feature">
		</div>
		<div class="ag-col-12 md:ag-col-6">
			<h2>Feature Title</h2>
			<p>Feature description</p>
		</div>
	</div>
</div>

Troubleshooting

Columns Not Aligning Properly

Issue: Columns appear misaligned or don’t fill the row properly.

Solution: Ensure your column numbers add up to 12:

<!-- ❌ Wrong: 4 + 4 + 3 = 11 -->
<div class="ag-row">
	<div class="ag-col-4">Col</div>
	<div class="ag-col-4">Col</div>
	<div class="ag-col-3">Col</div>
</div>
 
<!-- ✅ Correct: 4 + 4 + 4 = 12 -->
<div class="ag-row">
	<div class="ag-col-4">Col</div>
	<div class="ag-col-4">Col</div>
	<div class="ag-col-4">Col</div>
</div>

Gutters Not Working

Issue: Gutter classes don’t seem to apply.

Solution: Gutter classes must be on the .ag-row, not on columns:

<!-- ❌ Wrong -->
<div class="ag-row">
	<div class="ag-col-6 ag-g-4">Col</div>
</div>
 
<!-- ✅ Correct -->
<div class="ag-row ag-g-4">
	<div class="ag-col-6">Col</div>
</div>

Responsive Classes Not Working

Issue: Breakpoint-specific classes aren’t applying.

Solution: Make sure you’re using the colon syntax correctly:

<!-- ❌ Wrong: Old Bootstrap syntax -->
<div class="ag-col-md-6">Col</div>
 
<!-- ✅ Correct: New colon syntax -->
<div class="md:ag-col-6">Col</div>

Safe Area Padding Not Visible

Issue: Safe area padding classes don’t seem to work.

Solution: Ensure you have the correct viewport meta tag:

<!-- Required for safe areas -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

Performance Tips

  1. Minimize class usage: Use only the classes you need
  2. Combine utilities: ag-col-12 md:ag-col-6 is better than multiple divs
  3. Use CSS Grid for complex layouts: The .ag-grid classes are more performant for grid layouts
  4. Avoid deep nesting: Try to keep grid nesting to 2-3 levels maximum

Accessibility

Grid includes several accessibility considerations:

  1. Semantic HTML: Always use appropriate HTML5 elements
  2. Logical reading order: Structure HTML in reading order, use visual reordering sparingly
  3. Responsive images: Use responsive image techniques within grid columns
  4. Touch targets: Ensure adequate spacing using gutter classes on mobile
html
<!-- Good accessibility example -->
<div class="ag-container">
	<div class="ag-row ag-g-3">
		<nav class="ag-col-12" aria-label="Main navigation">
			<!-- Navigation content -->
		</nav>
		<main class="ag-col-12 lg:ag-col-8">
			<!-- Main content -->
		</main>
		<aside class="ag-col-12 lg:ag-col-4" aria-label="Sidebar">
			<!-- Sidebar content -->
		</aside>
	</div>
</div>

Version History

  • 1.0.3 - Current version with Tailwind-style responsive syntax
  • 1.0.0-2 - Initial release with Bootstrap-style syntax
Last updated on
Security and IssuesGet Started