CSS-rastergenerator

CSS Grid Layout is een krachtig tweedimensionaal lay-outsysteem waarmee u elementen tegelijkertijd in rijen en kolommen kunt rangschikken. In tegenstelling tot Flexbox dat per keer een richting behandelt, geeft Grid u volledige controle over beide assen. Belangrijke eigenschappen zijn grid-template-columns voor het definiëren van kolomtracks, grid-template-rows voor rijtracks, gap voor spatiëring en grid-area voor het positioneren van items binnen benoemde regio's.

Gebruik de Kolommen-schuifregelaar om het aantal kolommen (1 tot 12) in te stellen. Gebruik de Rijen-schuifregelaar voor het aantal rijen (1 tot 12). Pas de Gap-schuifregelaar aan om de spatiëring tussen cellen (0 tot 32px) te bepalen. Het voorbeeldgebied toont een live grid met genummerde cellen. Als u tevreden bent, kopieert u de gegenereerde CSS-code en plakt u deze in uw project.

grid-template-columns en grid-template-rows definiëren de trackgroottes. De functie repeat() maakt gelijke tracks aan, bijvoorbeeld repeat(3, 1fr) maakt drie gelijke kolommen. De eenheid fr verdeelt de beschikbare ruimte evenredig. gap stelt de spatiëring tussen rijen en kolommen in. Indien nodig kunt u verschillende waarden instellen voor row-gap en column-gap.

Holy Grail-lay-out: 3-kolomskop, hoofdinhoud met zijbalk. Dashboardkaarten: repeat(auto-fill, minmax(250px, 1fr)) maakt responsieve kaartgrids. Hero over volle breedte met inhoud eronder: één kolom die alle rijen overspant. Tijdschriftlay-out: gemengde spans met grid-column en grid-row voor verschillende celgroottes.

Gebruik auto-fill of auto-fit met minmax() voor vloeiende responsieve grids zonder media queries. Combineer met clamp() voor flexibele afmetingen. Stel een minimumbreedte in met minmax(200px, 1fr) zodat items niet te klein worden. Gebruik media queries om het aantal kolommen op breekpunten te wijzigen. Overweeg container queries voor responsiviteit op componentniveau.