TL
Tool Lab
💰Donate
💰Donate

CSS Grid Generator

Build CSS Grid layouts visually.

1
2
3
4
5
6
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  column-gap: 16px;
  row-gap: 16px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
}

Om det här verktyget

CSS Grid Layout Generator låter dig visuellt designa tvådimensionella grid-layouter genom att justera grid-template-columns, grid-template-rows, gap-egenskaper och inriktningsinställningar. Förhandsgranskningen visar exakt hur ditt grid ser ut innan du skriver kod.

CSS Grid är det kraftfullaste layoutsystemet i CSS, utformat för tvådimensionella layouter (rader OCH kolumner samtidigt). Det kompletterar Flexbox som hanterar endimensionella layouter.

Hur man använder

  1. Ange grid-template-columns för kolumnstruktur. Använd förinställningsknappar för vanliga mönster.
  2. Ange valfritt grid-template-rows (lämna som auto för de flesta layouter).
  3. Justera column-gap och row-gap för avstånd.
  4. Använd justify-items och align-items för att styra placering av objekt i celler.
  5. Ändra antal objekt med reglaget för att se hur gridet svarar.
  6. Klicka Kopiera för att kopiera den genererade CSS:en.

Användningsfall

Front-end-utvecklare använder CSS Grid för sidlayouter, dashboardstrukturer och bildgallerier. Designers exporterar gridspecifikationer som exakt CSS att dela med utvecklare. Design system-team använder det för att prototypa avstånd- och kolumnmönster.

Vanliga frågor

  • Vad betyder 1fr? — fr är en fraktionsenhet. 1fr betyder en bråkdel av det tillgängliga utrymmet. repeat(3, 1fr) skapar tre lika kolumner.
  • När ska jag använda Grid kontra Flexbox? — Använd Grid för tvådimensionella layouter (rader och kolumner). Använd Flexbox när du lägger ut objekt i en enda riktning.
  • Stöds CSS Grid i alla webbläsare? — Ja. CSS Grid stöds fullt ut i alla moderna webbläsare sedan 2017.