Design · Gratis

CSS Grid-generator

Skapa en rutnätsförhandsvisning och CSS från kolumner, rader och mellanrum.

01Ange värden

Körs i webbläsaren

—

Körs i webbläsaren

Skapa en rutnätsförhandsvisning och CSS från kolumner, rader och mellanrum.

Körs i webbläsaren

Inmatningen behandlas på den här sidan och skickas inte till en server.

Om verktyget

Skapa CSS Grid med lika kolumner och anpassa koden till din sida.

Ange värden
Kolumner · Rader · Mellanrum
Beräkna / skapa
Skapa en rutnätsförhandsvisning och CSS från kolumner, rader och mellanrum.
Resultat
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(80px, auto)); gap: 16px;

Skapa CSS Grid med lika kolumner och anpassa koden till din sida.

Exempel

Resultat

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(80px, auto));
gap: 16px;

Hur ska resultatet tolkas?

Skapa CSS Grid med lika kolumner och anpassa koden till din sida.

Vart går mina uppgifter?

Beräkningarna körs på din enhet. Indata skickas inte till en server.