Listings grid

The browse-all grid, with subgrid band alignment.

A responsive grid of listing cards whose bands line up across the row via subgrid (ADR 0015): header bands share a height so the photos start on a common line, promo flags and prices each land on their own line, and footers share a baseline — with no clamped line counts and no measured heights. Note the varied address and description lengths below; the cards still align.

The alignment contract lives only here. The card stays parent-agnostic: it is handed its row tracks through --listing-card-rows rather than out-specified, because an Astro scoped style is unlayered and would beat any layered rule whatever its specificity. A custom property has no such fight, and it states the contract outright.

A real list (ul/li), one tab stop per card. This is the static "browse all" surface; the carousel shares the same band alignment on the other axis.

Alignment across a row

Tone
  • 1 / 12
    New
    8.400 kr/md.LejlighedAvailable

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.

    56 m²2 rooms
    2 months dep.
  • 1 / 1
    Open house
    Reserved
    11.200 kr/md.RækkehusReserved

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum.

    84 m²3 rooms
    3 months dep.
  • 1 / 5
    Open house
    NewComing soon

    Strandgade 7, 1.5000 Odense C

    6.950 kr/md.LejlighedComing soon

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero.

    42 m²1 room
    1 month dep.
  • 1 / 2
    Let

    Bredgade 44, 3.5200 Odense V

    9.500 kr/md.LejlighedLet

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet.

    63 m²2 rooms
    2 months dep.
  • 1 / 1
    Coming soon

    Havnegade 21, 4.5000 Odense C

    7.800 kr/md.LejlighedAvailable from 1 Dec 2026

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero.

    51 m²2 rooms
    2 months dep.
  • 1 / 12
    New
    8.400 kr/md.LejlighedAvailable

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet odio mattis.

    56 m²2 rooms
    2 months dep.
  • 1 / 1
    Open house
    Reserved
    11.200 kr/md.RækkehusReserved

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum.

    84 m²3 rooms
    3 months dep.
  • 1 / 5
    Open house
    NewComing soon

    Strandgade 7, 1.5000 Odense C

    6.950 kr/md.LejlighedComing soon

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero.

    42 m²1 room
    1 month dep.
  • 1 / 2
    Let

    Bredgade 44, 3.5200 Odense V

    9.500 kr/md.LejlighedLet

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero et velit interdum, ac aliquet.

    63 m²2 rooms
    2 months dep.
  • 1 / 1
    Coming soon

    Havnegade 21, 4.5000 Odense C

    7.800 kr/md.LejlighedAvailable from 1 Dec 2026

    Worem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate libero.

    51 m²2 rooms
    2 months dep.

Props

packages/primitives/src/ListingsGrid.astro
PropTypeRequired
listingsGridListing[]yes
listLabel

aria-label for the list of cards (a nearby heading gives the context).

string
headingLevel

Heading level for each card's title — set from the page's heading outline.

1 | 2 | 3 | 4 | 5 | 6
GridListing — referenced by a prop above
FieldTypeRequired
kind"unit" | "property"
images

The home's photos (ADR 0030): one still, or a pageable strip.

{ src: string; alt?: string }[]yes
availability"available" | "reserved" | "let" | "coming-soon"
statusLabelstring
availabilityLabelstring
isNewboolean
newLabelstring
openHouseboolean
openHouseLabelstring
priceLabelstring
kindLabelstring
descriptionstring
addressstringyes
addressSecondarystring
areaLabelstring
roomsLabelstring
depositLabelstring
readMoreLabelstring
hrefstring