Practice recipe based on public documentation; the Breakdance extension is not installed here.
What it does and when to use it
Arranges child content in a grid. Use it for the specific job described below. If a simpler native element can deliver the same outcome, prefer the simpler structure and fewer competing styles.
Before you start
This is a Breakdance catalogue recipe for use with a compatible Breakdance Elements for Oxygen extension. It is not a guarantee of availability in your version. Check the installed element list and official reference before following the steps. Exact control labels can differ; this recipe has not been executed on this site.
Worked example: A responsive grid of project cards
Scenario: A responsive grid of project cards. The goal is a useful result on a real project, not a claim that this scenario was a completed client project.
- Create cards with comparable content and one clear destination.
- Use columns that can shrink without overflow and collapse when the content becomes too narrow.
- Test with an uneven title and an image missing from one card.
Layout illustration · HTML/CSS, not an extension demo
A short summary with enough space to read.
The same content roles keep the grid consistent.
CSS model for the same layout goal
.project-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}
@media (max-width: 767px) {
.project-grid { grid-template-columns: minmax(0, 1fr); }
}This is a builder-independent CSS illustration. Use the extension’s supported layout controls first; do not assume its wrapper class or internal markup matches this example.
Expected result
You should have a responsive grid of project cards. Verify the result on the frontend using the same content or object described in the steps. A correct builder preview alone does not establish that links, data or interactions work for visitors.
Troubleshooting
If one long word widens the whole page, check track minimums and text wrapping. A fixed desktop column count should not be forced onto a phone.
Checks before publishing
Use real text and assets rather than a perfect placeholder. Check a long label, narrow screen and empty-data state before publishing.
- Compare desktop and narrow-screen layouts using actual content.
- Follow every destination and operate interactive controls with a keyboard where applicable.
- Check an empty or unavailable-data state when the element depends on a provider.
Official reference and version notes
Official Grid reference provides the current provider information. This is independent, AI-assisted documentation on Benjamin Olsen’s website; examples are clearly identified as practice recipes.
Check extension element visibility in Oxygen. An element may be hidden where a native equivalent exists.