In Tailwind CSS zorgt row span ervoor dat een element twee of meer rijen binnen het raster beslaat. Het wordt gebruikt om het aantal rijen te definiëren dat een element moet innemen/omspannen. Hiermee kunnen gebruikers de grootte en positie van het rasteritem over meerdere rijen aanpassen en verschillende lay-outs maken. Bovendien kan het worden gebruikt om flexibele en responsieve rasterlay-outs voor webpagina's te maken.
Dit artikel zal een voorbeeld zijn van de methode om rijen te laten overspannen in Tailwind CSS.
Hoe maak je een rijenspanwijdte in Tailwind?
Maak een HTML-programma om de rijen in Tailwind te laten overspannen. Maak dan gebruik van de “ row-span-
Bekijk de gegeven stappen voor praktische implementatie:
Stap 1: Maak Column Span in HTML-programma
Maak een HTML-programma en gebruik de ' row-span-
< lichaam >
< div klas = 'grid grid-rijen-4 grid-flow-col gap-3 m-3 text-center' >
< div klas = 'rij-overspanning-3 bg-groenblauw-500 p-5' > 1 < / div >
< div klas = 'bg-groenblauw-500 p-5' > 2 < / div >
< div klas = 'rij-overspanning-2 bg-groenblauw-500 p-5' > 3 < / div >
< div klas = 'bg-groenblauw-500 p-5' > 4 < / div >
< div klas = 'bg-groenblauw-500 p-5' > 5 < / div >
< div klas = 'rij-overspanning-4 bg-groenblauw-500 p-5' > 6 < / div >
< / div >
< / lichaam >
Hier, in het bovenliggende
- “ rooster ” klasse wordt gebruikt om een rasterlay-out te maken.
- “ raster-rij-4 ” klasse stelt het rijnummer in het raster in op 4.
- “ grid-flow-col ” klasse plaatst de rasteritems horizontaal in kolommen.
- “ kloof-3 ” klasse stelt een afstand in van 3 eenheden tussen elk rasteritem.
- “ m-3 ” klasse hanteert een marge van 3 eenheden rondom de roostercontainer.
- “ tekstcentrum ” klasse zet de tekst van elk rasteritem in het midden.
In de onderliggende
- “ rij-overspanning-3 ” klasse geeft aan dat het element zich moet uitstrekken over 3 rijen in het raster.
- “ rij-overspanning-2 ” klasse geeft aan dat het element zich over 2 rijen in het raster moet uitstrekken.
- “ rij-overspanning-4 ” klasse geeft aan dat het element zich moet uitstrekken over 4 rijen in het raster.
- “ bg-groenblauw-500 ” klasse stelt de blauwgroen kleur in op de achtergrond van het rasteritem.
- “ p-5 ” klasse voegt een opvulling van 5 eenheden toe aan de inhoud binnen de onderliggende items.
Stap 2: uitvoer controleren
Bekijk de HTML-webpagina om te controleren of de rijreeks is toegepast of niet:
In de bovenstaande uitvoer is te zien dat de rijreeks met succes is toegepast volgens de specificaties.
Conclusie
Gebruik de ' row-span-
” hulpprogramma in het HTML-programma en specificeer het aantal rijen dat elk element moet beslaan. Bekijk ter verificatie de wijzigingen op de HTML-webpagina. Dit artikel is een voorbeeld van de methode om rijen te overspannen in Tailwind CSS.