Vad är CSS Grid?
CSS Grid Layout är ett tvådimensionellt layoutsystem inbyggt i moderna webbläsare. Du definierar en nätbehållare med display: grid, och styr sedan kolumner med grid-template-columns och rader med grid-template-rows. Bråkenheter (fr) fördelar tillgängligt utrymme proportionellt. Underordnade element kan sträcka sig över flera kolumner eller rader med grid-column: span N och grid-row: span N.
Hur man använder CSS Grid Generator
-
Ange antal kolumner och rader med talfälten (1–12 för vardera).
-
Justera grid-template-columns och grid-template-rows för att styra storlekarna (t.ex. 1fr 2fr, 200px auto).
-
Ange mellanrummet mellan celler (t.ex. 10px, 1rem).
-
Klicka på valfri cell i förhandsgranskningen för att markera den (blir orange).
-
Ange col-span och row-span i panelen Cellomfång, klicka sedan på Tillämpa. Celler med omfång blir gröna.
-
Klicka på fliken CSS eller HTML för att byta utdataformat, kopiera sedan till urklipp.
-
Klicka på Återställ allt för att börja om med ett nytt 3×3-rutnät.