OneTaskBy Tim King · Updated
Feature Grid CSS Builder
Responsive Landing Page Grids With Icon Styles, Card Layouts and Semantic HTML
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Feature Grid Builder works
This feature grid CSS builder lays out icons, titles and blurbs in a grid. The "three things we do well" section appears on nearly every product page. Set the column count, pick boxed or plain, choose an icon treatment, and copy a feature grid with real inline SVG icons and breakpoints that step down to two columns and then one.
Feature grid CSS: a grid that wraps itself
A feature grid is a list of short benefits, each with an icon, a heading and a sentence or two.
Its job is scanability: a visitor should be able to read the six headings in a few seconds and
decide whether to keep going. The generated markup is a <section> of <article> elements,
each holding an icon span, an <h3> and a <p>, which is enough structure for styling and
correct enough for screen readers without any ARIA.
Columns and breakpoints. The grid uses repeat(3, 1fr) at full width and collapses to two
columns below 900px and one below 560px. Those two breakpoints cover the common cases; if you
choose four columns you may want an extra step at around 1100px. Six features in three columns
gives two tidy rows, which is why six is the default count. Four features in a four-column grid
is the other classic arrangement.
Boxed or plain. Boxed cards with a light border work when the section sits on a plain
background and needs visual separation. Plain features — no card, just spacing — feel calmer
and suit pages that already have a lot of borders and containers. The switch changes only the
.feature rule, so both variants share everything else.
Icons are inline SVG. Each icon is a small <svg> using currentColor for its stroke, so
it inherits the accent colour from the wrapper and you can recolour by changing one property.
The wrapper is a fixed-size square or circle with a translucent tint of the accent behind it,
which is the treatment most current design systems use. Swap the path for any 24×24 icon from a
library such as Lucide or Heroicons and the sizing still works because the SVG is scaled to 50%
of its container.
Left or centred. Left-aligned text is easier to read and lines up neatly with the icon
above it. Centred works for very short copy and symmetrical layouts, and is the better choice
when the icons are large and decorative. The centred option also centres the icon because the
wrapper is inline-grid, so it follows text-align.
Typography. The heading is 1.05rem and the description 0.9rem at 75% opacity, which
gives clear hierarchy without a second colour. Opacity rather than a fixed grey means the
description stays legible when you change the text colour for a dark theme.
Content. The six sample features are deliberately plausible so you can judge line lengths and wrapping. Replace them with your own; keep headings under about five words and descriptions to one or two short sentences so the rows stay aligned.
FAQ
How many features should a feature grid have?
Three, four or six. Three fills one row and is the most focused; six gives two rows of three and reads as thorough without becoming a list. Five leaves an awkward gap unless the layout is asymmetric. If you have more than six, split them across two sections with their own headings.
Should I use h2 or h3 for feature titles?
<h3> if the section has its own <h2> above it, which it usually should. The generated
snippet omits the section heading so it drops into your page cleanly; add
<h2>Why teams choose us</h2> before the grid and the <h3> items nest correctly beneath it.
How do I use my own icons?
Replace the <svg> in each article with the SVG markup from your icon library, keeping
fill="none" stroke="currentColor" if the icon is outlined or fill="currentColor" if it is
solid. The wrapper scales the SVG to half its size, so any 24-unit viewBox icon fits without
adjustment.
Why do the cards have different heights?
In a CSS grid every item in a row stretches to the tallest item by default, so boxed cards line
up automatically. If they appear uneven, an ancestor has align-items: start or the content
overflows; check the description lengths and the grid's alignment setting.
Can I make the grid auto-fit instead of fixed columns?
Yes: replace grid-template-columns: repeat(3, 1fr) with
repeat(auto-fit, minmax(240px, 1fr)) and remove the two media queries. The browser then fits
as many 240px columns as the container allows. The CSS Grid Generator on this site shows that
pattern interactively.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Bento Grid Builder
Bento-box grid layouts with spanning tiles, copy-ready.
Blog Card Builder
Article preview cards with image, tag, excerpt and author.
Comparison Card Builder
Side-by-side comparison cards with ticks, crosses and a highlighted column.
Mega Menu
Build an accessible full-width mega menu with link columns and a promo.
Tabs Builder
Build accessible tabs with arrow key support and three styles.