CSS Grid-lekplats

Om CSS Grid-lekplats

CSS Grid Playground bygger riktiga grid-layouter visuellt. Lägg till och ta bort kolumn- och radspår för att forma grid-template-columns och grid-template-rows, ställ in avstånd mellan kolumner och rader, och finjustera alla fyra justeringsegenskaper — justify-items, align-items, justify-content och align-content — medan förhandsvisningen speglar varje ändring direkt.

Placering av objekt är där grid blir kraftfullt: lägg till objekt, klicka på ett i förhandsvisningen för att markera det, och placera det med column start, column span, row start och row span. Så byggs sidofält, sidhuvuden och innehållsceller som sträcker sig över flera spår — tekniken bakom nästan alla verkliga grid-layouter.

Tre förinställningar — holy grail, dashboard och gallery — laddar klassiska sidstrukturer som du kan analysera och anpassa. När layouten är rätt kopierar du den genererade CSS-koden, som innehåller kompletta grid-container-regler och varje objekts placering.

Så använder du CSS Grid-lekplats

1. Lägg till eller ta bort kolumn- och radspår för att definiera grid-mallen.
2. Ställ in avståndet mellan kolumner och rader.
3. Justera inställningarna för justering: justify-items, align-items, justify-content och align-content.
4. Lägg till objekt, klicka på ett i förhandsvisningen och ställ in dess kolumn-/rad-start och -spann för att placera det.
5. Ladda förinställningen holy grail, dashboard eller gallery för att studera en klassisk layout.
6. Kopiera den genererade CSS-koden till din stilmall.

Vanliga frågor