Utvecklare

CSS Grid-generator

Designa CSS Grid-layouter visuellt med förhandsgranskning i realtid och generera färdig kod.

Förinställningar

Mallbyggare

Kolumnspår (3)

Radspår (3)

Gap-kontroll

Kolumnmellanrum8px

Radmellanrum8px

Behållare

Justera objekt

Justera innehåll

Justera innehållsrad

Rutnätscellsförhandsvisning

Dra för att sammanfoga celler

1,1

1,2

1,3

2,1

2,2

2,3

3,1

3,2

3,3

Förhandsgranskning

Bredd600px

Höjd400px

Objekt (3/16)

Objekt 1

Kolumnstart

Kolumnspann

Radstart

Radspann

Justera sig själv

Områdesnamn

Objekt 2

Kolumnstart

Kolumnspann

Radstart

Radspann

Justera sig själv

Områdesnamn

Objekt 3

Kolumnstart

Kolumnspann

Radstart

Radspann

Justera sig själv

Områdesnamn

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 8px;
}

Om CSS Grid-generator

CSS Grid-generatorn är ett gratis visuellt verktyg för att bygga CSS Grid-layouter med förhandsgranskning i realtid. Konfigurera kolumner, rader, mellanrum och justeringsegenskaper, lägg till objekt med anpassad placering och spänning, och kopiera den genererade CSS-koden.

Bläddra bland alla Utvecklare-verktyg

Hur du använder

Ange kolumner och rader, anpassa storlekar, justera mellanrum och justering. Lägg till grid-objekt med kolumn-/radspänning. Använd förinställda layouter för vanliga mönster. Kopiera CSS-utdatan för att använda i ditt projekt.

Användningsfall

Lära sig CSS Grid genom visuell experimentering
Prototypa sidlayouter som dashboards
Skapa responsiva grid-layouter
Designa galleri- och kortrutnät
Generera produktionsklar CSS Grid-kod

Hur du använder CSS Grid-generator Ta en paus och spela gratis webbläsarspel

Alla inlägg

c/tools_css-grid-generator0

Visa alla Skapa inlägg