jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS-tools

Gratis CSS Subgrid Layout Generator

Genereer parent-grid- en child-subgrid-CSS voor layouts met gedeelde trackuitlijning.

Tool laden...

Wat is CSS Subgrid Layout Generator?

Subgrid is een CSS Grid-functie waarbij een geneste gridcontainer de gridtracks van zijn bovenliggende element kan erven. In plaats van zijn eigen grid-template-columns of grid-template-rows te definiëren, gebruikt het kind subgrid om items uit te lijnen met de bovenliggende gridlijnen. Dit is handig voor kaartrasters waarbij elke kaart interne uitlijning nodig heeft.

Snel antwoord

Gebruik CSS-subgrid om geneste grid-items uit te lijnen met hun bovenliggende gridtracks. Het kind gebruikt grid-template-columns: subgrid en/of grid-template-rows: subgrid om trackgrootte, tussenruimten en benoemde lijnen van het bovenliggende grid te erven.

Last updated: 2026-05-28

Beperkingen

  • Subgrid vereist dat de bovenliggende een gridcontainer is met expliciete tracks. Als de bovenliggende automatisch gegenereerde tracks gebruikt (impliciet grid), heeft het subgrid geen tracks om te erven.
  • Browserondersteuning voor subgrid is nieuwer dan basis CSS Grid. Firefox leverde het eerst (v71), Chrome en Edge voegden het toe in v117 en Safari in v16. Oudere browsers negeren subgrid volledig.
  • Het subgrid-kind kan de bovenliggende gap niet overschrijven. Gap-waarden worden geërfd van de dichtstbijzijnde grid-voorouder en kunnen niet worden gewijzigd op het subgrid-element zelf.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Definieer de bovenliggende gridkolommen en optioneel rijen. Het subgrid-kind erft deze tracks.
  2. Stel de kolom- en rijspan in voor het subgrid-kind - hoeveel bovenliggende gridcellen het inneemt.
  3. Kies of het kind subgrid gebruikt voor kolommen, rijen of beide.
  4. Kopieer de bovenliggende en kind-CSS en pas overeenkomende selectors toe in uw HTML.

Waarvoor je het kunt gebruiken

  • Maak een kaartraster waarbij elke kaart een koptekst, inhoud en voettekst heeft die over kolommen uitgelijnd zijn.
  • Bouw een formulierlay-out waar label-invoer paren over secties uitlijnen met subgrid.
  • Ontwerp een dashboard waar widgets van verschillende grootte uitlijning delen met het hoofdgrid.

Gebruik

Praktische voorbeelden

Voorbeeld

Kaartraster met uitgelijnde inhoud

Een productraster heeft drie kolommen. Elke kaart beslaat één kolom en gebruikt subgrid voor rijen zodat de titel, beschrijving en prijs horizontaal over kaarten uitlijnen ongeacht de lengte van de inhoud.

Voorbeeld

Multi-sectie formulierlay-out

Een formulier heeft twee secties die kolomuitlijning delen. Elke sectie is een subgrid-kind dat label-invoer kolomtracks erft, waardoor consistente uitlijning wordt gegarandeerd zonder griddefinities te herhalen.

Veelgemaakte fouten

  • Subgrid gebruiken zonder een bovenliggend grid - subgrid moet afstammen van een gridcontainer met expliciete tracks.
  • Zowel grid-template-columns: subgrid als expliciete kolomwaarden instellen - subgrid vervangt, niet aanvult, de bovenliggende tracks.
  • Vergeten dat subgrid tussenruimten van de bovenliggende erft - als de bovenliggende gap: 16px heeft, gebruikt het subgrid-kind standaard ook 16px tussenruimten.

Verificatie

  1. Controleer de lay-out in browser DevTools Grid-inspector - subgridtracks moeten visueel uitlijnen met bovenliggende gridtracks.
  2. Test in Firefox en Chrome om cross-browser subgridgedrag te bevestigen, aangezien er subtiele verschillen zijn in impliciete trackafhandeling.

FAQ

Vragen over CSS Subgrid Layout Generator

Wat is het verschil tussen subgrid en geneste grids?

Een genest grid creëert onafhankelijke tracks binnen een kind-element - het deelt geen uitlijning met het bovenliggende grid. Subgrid erft de bovenliggende gridtracks, zodat items in het subgrid uitlijnen met items in het bovenliggende grid alsof ze allemaal in één plat grid waren. Dit maakt cross-element trackuitlijning mogelijk.

Erft subgrid benoemde gridlijnen van de bovenliggende?

Ja. Benoemde gridlijnen die zijn gedefinieerd in de bovenliggende grid-template-columns of grid-template-rows zijn beschikbaar in het subgrid. Dit maakt het eenvoudig om subgrid-items op benoemde lijnen te plaatsen die de volledige lay-out beslaan.

Welke browsers ondersteunen subgrid?

Chrome 117+, Edge 117+, Firefox 71+ en Safari 16+. Firefox was de eerste die subgrid uitbracht. Het is veilig te gebruiken als progressive enhancement - browsers die subgrid niet ondersteunen vallen terug op het reguliere gridgedrag dat op het kind-element is gedefinieerd.

Gerelateerde tools

Meer css-tools

Css

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

Probeer ook

Probeer ook

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool