CSS Grid Logo Wall Generator
A row of customer logos that wraps evenly instead of leaving an orphan on the last line.
Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.
.logos {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 56px 56px 56px;
gap: 12px;
grid-template-areas:
"heading heading"
"logo-1 logo-2"
"logo-3 logo-4"
"logo-5 logo-6";
}
.logos > .heading { grid-area: heading; }
.logos > .logo-1 { grid-area: logo-1; }
.logos > .logo-2 { grid-area: logo-2; }
.logos > .logo-3 { grid-area: logo-3; }
.logos > .logo-4 { grid-area: logo-4; }
.logos > .logo-5 { grid-area: logo-5; }
.logos > .logo-6 { grid-area: logo-6; }
@media (min-width: 820px) {
.logos {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto 64px;
gap: 20px;
grid-template-areas:
"heading heading heading heading heading heading"
"logo-1 logo-2 logo-3 logo-4 logo-5 logo-6";
}
}
How this layout works
The problem with a flex logo row is the last line: five logos across four columns leaves one lonely logo hugging the left edge. A grid with an explicit column count wraps predictably because every cell is the same width.
Logos come in wildly different aspect ratios, so normalise the cell rather than the image: fixed row height, place-items: center, and max-height on the image. That gives optical consistency without editing the assets.
Two columns on mobile, three on tablet, six on desktop. Halving and doubling keeps the wrap even at every step — a jump from two to five leaves a ragged final row at the middle sizes.
Every property used here is listed in the CSS Grid cheat sheet, with the reason to reach for it.
Frequently asked questions
Why does my logo row leave one logo alone on the last line?
How do I make logos of different shapes look consistent?
place-items: center, and a max-height on the image. Optical consistency without re-exporting anything.How do I center a grid in CSS?
justify-content: center on the grid container to centre the whole grid inside it, and margin-inline: auto with a max-width to centre the container in the page. These are different jobs: the first moves the tracks within the container, the second moves the container itself.How do I center items inside a CSS grid?
place-items: center on the container. That is shorthand for align-items plus justify-items, and it centres every item inside its own cell on both axes. For a single item, use place-self: center on that item instead.How do I make a CSS grid responsive?
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) and it reflows at every width with no media queries at all. Add breakpoints only when the exact column count matters, or when the layout has to change shape rather than just wrap.When should I use CSS Grid instead of Flexbox?
How to use it
-
Open the pattern
The logo wall loads into the editor already responsive, with every breakpoint set up.
-
Change the tracks
Edit the column and row sizes in the Tracks panel. Anything valid in a track list works.
-
Redraw at another width
Move the ruler past a breakpoint marker and rearrange. Only the placement changes.
-
Copy the code
Take CSS, HTML, Tailwind or a shadcn component. The media queries are already written.
More in Marketing sections
- Split Screen Hero
- Pricing Table
- Footer Columns
- Centered Hero Section
- Feature Grid
- Testimonial Grid
- Stats Band