CSS columns koliduje s grid layoutem

import { Aside } from ‘@astrojs/starlight/components’;

Pro mřížky používej výhradně `display: grid`. Nikdy nemíchej `columns: N` (multi-column) a grid na stejném nebo rodičovském elementu.

Symptom

Grid layout produktů se rozsype — položky jsou všechny vedle sebe v jedné lajně nebo mají chybné řádkování. Často jen na určité šířce (media query).

Root cause

CSS columns: N (multi-column layout) interferuje s display: grid. Stará pravidla columns:N zůstala v media queries a přebíjela grid na rodiči.

Fix

Pro mřížku jen grid; odstranit všechny columns: z media queries.

.grid { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }

Jak se tomu vyvarovat v jiných systémech

• Detection: grep -r "columns:" *.css ve všech media queries při refaktoru layoutu.
• Anti-pattern: smíšené layout modely na jedné komponentě.
• Lepší přístup: jeden layout model na komponentu; responzivitu řeš repeat(auto-fit, minmax()).

Sister bugs / související

• Refaktor tiše vypustí feature.