CSS Grid
Also called grid layout or display: grid
A CSS layout system that places items on rows and columns at once, so content lines up in both directions.
type Project = { id: string; name: string; summary: string };
// For columns without breakpoints, try
// grid-cols-[repeat(auto-fill,minmax(240px,1fr))].
export function ProjectGrid({ projects }: { projects: Project[] }) {
return (
<div className='mx-auto grid max-w-[1200px] gap-6 px-6 sm:grid-cols-2 lg:grid-cols-3'>
{projects.map((project, index) => (
// Grid items stretch, so cards in a row share the same height.
<article
key={project.id}
className={`rounded-2xl border bg-background p-6 ${index === 0 ? 'sm:col-span-2' : ''}`}
>
<h3 className='font-semibold'>{project.name}</h3>
<p className='mt-1 text-sm text-muted-foreground'>
{project.summary}
</p>
</article>
))}
</div>
);
}Lay out the project cards with CSS Grid inside a 1200px max-width container: 3 equal columns with a 24px gap on desktop, 2 under 1024px, and 1 under 640px. Make the first card a featured card that spans 2 columns on desktop and tablet, and give every card the same height in a row.
Paste into Layerwise or any AI coding tool.
What is CSS Grid?
With display: grid and grid-template-columns, you define the columns once and each child drops into the next cell. repeat(3, 1fr) makes three equal columns, and gap sets the space between them. Any item can cover more cells with grid-column: span 2, which is how featured items and bento layouts are built.
Grid suits anything two-dimensional: card galleries, dashboards, pricing tables, photo grids, and whole pages with a header, sidebar, and main area. Change the column count at breakpoints (one column on phones, two on tablets, three or four on desktop) and the items reflow on their own.
For a gallery that adapts without breakpoints, use grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)): the browser fits as many columns of at least 240px as the row allows. Designers often describe page layouts on a 12-column grid because 12 divides evenly into halves, thirds, and quarters.
Often confused with
- Flexbox
- Flexbox lines items up along a single row or column and lets each one size itself. CSS Grid defines rows and columns first and places items into them.
Related terms
All termsFlexbox
A CSS layout mode that lines items up in a row or a column and controls how they share space, align, and wrap.
Bento grid
A grid of rounded tiles in mixed sizes that fit together like a bento lunch box, often used to show several features at once.
Responsive design
Designing one layout that adapts to any screen width, rearranging columns, sizes, and navigation at set widths called breakpoints.
Masonry layout
A layout of columns where items of different heights stack tightly with no row lines, like stones in a wall or a Pinterest board.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.