AI Feature Grid Generator.

Create a three-column feature grid holding exactly six cards. Above the grid, a centered eyebrow label, an h2 section heading and one line of supporting copy at a max width of 42rem. Each card has a filled icon in a tinted rounded square, an h3 title of two to four words, and a description of one to two sentences. Cards share a light surface, a 12px radius and a hairline border, with a hover state that raises the shadow and shifts the card up 2px — guarded behind prefers-reduced-motion. Collapse to two columns at 1024px and one at 640px, keeping equal card heights via the grid rather than fixed pixel values.

Create a bento-style feature grid on a twelve-column base: one hero cell spanning eight columns and two rows containing a title, two lines of copy and a cropped product screenshot; two cells of four columns each with an icon, title and one-line description; and a full-width cell at the bottom with a title, a short paragraph and a text link. Give every cell the same radius, border and internal padding so the varied spans still read as one system. Below 900px, flatten to a single column in importance order and drop the screenshot to full width with explicit dimensions.

Create a feature section as three alternating rows instead of a grid. Each row is a two-column layout: copy on one side with an eyebrow label, an h3, a two-sentence description and a bulleted list of three sub-points, and a product screenshot on the other side in a bordered frame at explicit width and height. Flip the image from right to left to right down the rows using an order utility at the desktop breakpoint only. Add generous vertical rhythm between rows and a hairline divider. Below 900px, every row stacks with the copy first so the reading order stays consistent.

Create a borderless feature grid with no cards or shadows: a four-column layout on desktop holding eight items, each with a 20px outline icon above an h3 title of two or three words and a description capped at two lines. Rely on column and row gap for separation rather than borders, and keep the icons a single stroke weight from one library. Add a left-aligned section heading and a single text link to the docs beneath the grid. Collapse to two columns at 768px and one at 480px, preserving the icon-above-title stacking at every size.

Create a numbered feature grid of six cells in three columns. Each cell opens with an oversized two-digit numeral in a muted tint, then an h3 title and a two-sentence description. Numbering runs left to right and must be visual only — set the numerals as decorative text with aria-hidden so a screen reader hears the titles as a clean list. Use a shared top border on each cell instead of full card outlines. Include a section heading and a short intro paragraph above. Two columns at 1024px, one at 640px, with the numeral scaling down one step on mobile.

Create a feature grid where each card carries plan availability: three columns, six cards, and inside each an icon, an h3 title, a two-sentence description and a small badge row reading Starter, Pro or Enterprise. Style the badge by tier with distinguishable text labels rather than color alone. Add a filter row of tier pills above the grid that hides non-matching cards on click, keeping the pressed state on the active pill with aria-pressed. Announce the visible count in a live region. Collapse to two columns at 1024px and one at 640px, with the filter row scrolling horizontally on mobile.