Post Grid

A responsive grid using post-card; pass posts from a loop, archive or get query.

Install

npx ghostcn@1.4.0 add post-grid --skip-existing

Missing dependencies install automatically: Post Card. Existing dependency files are preserved.

Usage

Uses the current collection by default, or pass posts=posts from an archive or {{#get}} query. Without posts it renders nothing unless emptyText is set.

{{> "components/post-grid" posts=posts heading="Latest stories"}}

Component options

Parameter	Behavior
`heading`	Optional section heading.
`emptyText`	Optional message when no content is available; otherwise render nothing.

Customize this instance

{{> "components/post-grid" posts=posts heading="Latest stories" class="my-6" titleClass="text-purple-700 dark:text-purple-300"}}

Styling parameters

Parameter	Target
`class`	Component root — `.ghcn-post-grid`
`titleClass`	`.ghcn-post-grid__title`
`gridClass`	`.ghcn-post-grid__grid`
`cardClass`	`.gh-post-card`
`cardTitleClass`	`.gh-post-card-title`
`imageClass`	`.gh-post-card-img`
`descriptionClass`	`.gh-post-card-excerpt`

Styling parameters affect only elements that render. See Style component instances for specificity, dark mode, and preserving customizations.

Installed files

partials/components/post-grid.hbs
assets/css/components/post-grid.css

View the registry source

Post Grid

InstallCopy Anchor Link

UsageCopy Anchor Link

Component optionsCopy Anchor Link

Customize this instanceCopy Anchor Link

Styling parametersCopy Anchor Link