Generator CSS Grid | Razvojna orodja na spletu

Stolpci

1–12

Vrstice

1–12

grid-template-columns

npr. 1fr 1fr 1fr, 200px 1fr, repeat(3,1fr)

grid-template-rows

npr. auto, 100px auto, repeat(3,80px)

Presledek

Razpon celice (izberite celico)

col-span

row-span

Celice z razponom so prikazane z zeleno barvo.

Kliknite celico, da jo izberete, nato nastavite razpon stolpca/vrstice spodaj.

Ustvarjeni CSS

Kaj je CSS Grid?

CSS Grid Layout je dvodimenzionalni sistem postavitve, vgrajen v sodobne brskalnike. Definirate vsebnik mreže z display: grid, nato upravljate stolpce z grid-template-columns in vrstice z grid-template-rows. Ulomkovne enote (fr) sorazmerno razporedijo razpoložljivi prostor. Podrejeni elementi se lahko raztezajo čez več stolpcev ali vrstic z grid-column: span N in grid-row: span N.

Kako uporabljati Generator CSS Grid

Nastavite število stolpcev in vrstic z numeričnimi vnosnimi polji (1–12 za vsako).
Prilagodite grid-template-columns in grid-template-rows za nadzor velikosti (npr. 1fr 2fr, 200px auto).
Nastavite presledek med celicami (npr. 10px, 1rem).
Kliknite katero koli celico v predogledu, da jo izberete (postane oranžna).
Nastavite col-span in row-span v plošči Razpon celice, nato kliknite Uporabi. Celice z razponom postanejo zelene.
Kliknite zavihek CSS ali HTML za preklop formata izhoda, nato kopirajte v odložišče.
Kliknite Ponastavi vse za začetek z novo mrežo 3×3.