Grid

You might say

Arrange these cards in a clean grid that switches to two columns on narrower screens.

Plan rows and columns as one layout systemCSS Grid controls two-dimensional layouts where rows and columns work together. It suits galleries, dashboards, and page regions. Let columns adapt to available space instead of copying one fixed desktop grid onto every screen.

Know first

Space

CSS Grid

You can say this to an AI Agent

Turn the template cards into a responsive Grid using a readable minimum width, minmax, and a shared gap. Do not fix cards to three equal columns. Verify wide, tablet, and mobile widths for overflow and visible card actions.

When to use it

Responsive card gallery
Dashboard panels
Page regions with aligned rows and columns
Layouts with intentional spanning

When NOT to use it

Use grid for a simple one-dimensional row
Grid is usually more direct when you need to control rows and columns together.
Hard-code many columns on small screens
33.33%33.33%33.33%
A hand-written percentage grid needs extra calculations whenever spacing changes.
Reorder content visually in a way that breaks reading order
Fixed column counts and widths can overflow on narrow screens.
Create empty tracks only to imitate spacing

Anatomy

Grid

Write display: grid on the parent element

Each defined row or column track

The grid formed by the intersection of rows and columns

The gaps between grid items, declared once for the whole grid

Variants

Repeat

Each column of the card wall is the same width

AutoFill

When the width changes, the number of columns automatically increases or decreases.

Gap

Use gap to uniformly manage row and column spacing

TwoColumns

Overall framework like sidebar + content

Typical use cases

Card gallery

repeat(3, 1fr) three equal columns

Mountain Hiking

1.2k Collection

Desktop aesthetics

856 Collection

Cat daily life

2.4k collection

Dashboard

auto-fill + minmax, adjust the number of columns according to the available width

Summer canvas bag

¥ 89

City postcard

¥ 19

Forest Aromatherapy

¥ 129

Media grid

grid-template-columns: 2fr 1fr

Visit trends

Registered user

8,921

Conversion rate

4.6%

Page shell

grid-template-columns: 120px 1fr

Console

Overview

item

Settings

Project Overview

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website

A template library needs multiple rows and columns of similar cards, with fewer columns as the container narrows. Which implementation fits?

A. Use Grid on the parent and define responsive tracks with minmaxB. Wrap with Flex and fix every card at 33.33% widthC. Give each card a fixed width and margin and calculate every wrap point