Three Column Grid
Question and answer pairs laid out in a responsive grid: one column on small screens, two from sm, three from lg. Every entry is always open with no cards or borders, just generous grid spacing.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/three-column-grid.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/faq/faq9.tsx instead.
Usage
The file also exports faq9Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Faq9, faq9Demo } from "@/components/blocks/faq/faq9"; export default function Page() { return <Faq9 {...faq9Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Frequently asked questions" | Section heading. |
| description | string | undefined | Optional supporting copy under the heading. |
| items | Faq9Item[] | none | Ordered list of question and answer entries placed into the grid. |
| className | string | none | Extra classes for the outer section element. |
Types
type Faq9Item = { question: string; answer: string };
Behavior notes
- Fully static and decorative: every question and answer is always visible in its grid cell, there is no accordion, toggle, or any other interactive element.
- Grid cells have no card border or background, relying purely on gap-x-8/gap-y-10 spacing to separate entries.
- Column count responds at sm (2 columns) and lg (3 columns) breakpoints; item count does not need to be a multiple of 3 since the grid simply leaves the last row short.
More FAQ Blocks
View all →collapsible-accordion
Collapsible Accordion
Stacked cards with expandable sections, for full-length answers in a compact format.
open-list-layout
Open List Layout
Questions with answers displayed directly below in a simple always-open list.
tabbed-categories
Tabbed Categories
Sidebar navigation with category tabs and an accordion of that category's questions.
searchable-accordion
Searchable Accordion
Search input that filters accordion items in real-time by question and answer text.
grouped-sections
Grouped Sections
FAQs organized into titled sections, each with its own independent accordion below it.
side-by-side-image
Side-by-Side Image
Accordion paired with a large image on the left or right.