I Tailwind CSS gør rækkespænd et element til at optage to eller flere rækker i gitteret. Det bruges til at definere antallet af rækker et element skal optage/spænde over. Det giver brugerne mulighed for at justere gitterelementets størrelse og placering på tværs af flere rækker og oprette forskellige layouts. Desuden kan den bruges til at skabe fleksible og responsive gitterlayouts til websider.
Denne opskrivning vil eksemplificere metoden til at få en rækker til at spænde i Tailwind CSS.
Hvordan får man en række til at spænde i medvind?
For at få rækkerne til at spænde i Tailwind, lav et HTML-program. Brug derefter ' række-span-
For praktisk implementering, tjek de medfølgende trin:
Trin 1: Lav kolonnespænd i HTML-program
Opret et HTML-program og brug ' række-span-
< legeme >
< div klasse = 'gitter grid-rows-4 grid-flow-col gap-3 m-3 text-center' >
< div klasse = 'row-span-3 bg-teal-500 p-5' > 1 < / div >
< div klasse = 'bg-teal-500 p-5' > 2 < / div >
< div klasse = 'row-span-2 bg-teal-500 p-5' > 3 < / div >
< div klasse = 'bg-teal-500 p-5' > 4 < / div >
< div klasse = 'bg-teal-500 p-5' > 5 < / div >
< div klasse = 'row-span-4 bg-teal-500 p-5' > 6 < / div >
< / div >
< / legeme >
Her i det overordnede
- “ gitter ” klasse bruges til at skabe et gitterlayout.
- “ gitter-række-4 ” klasse indstiller rækkenummeret i gitteret til 4.
- “ grid-flow-col ” klasse placerer gitterelementerne vandret i kolonner.
- “ mellemrum-3 ” klasse indstiller en afstand på 3 enheder mellem hver gitterelement.
- “ m-3 ” klasse anvender en margen på 3 enheder omkring gitterbeholderen.
- “ tekst-center ” klasse sætter teksten for hvert gitterelement til midten.
I de underordnede
- “ række-spænd-3 ” klasse angiver, at elementet skal strække sig over 3 rækker i gitteret.
- “ række-spænd-2 ” klasse angiver, at elementet skal strække sig over 2 rækker i gitteret.
- “ række-spænd-4 ” klasse angiver, at elementet skal strække sig over 4 rækker i gitteret.
- “ bg-teal-500 ” klasse indstiller den blågrønne farve til baggrunden for gitterelementet.
- “ p-5 ” klasse tilføjer en polstring på 5 enheder til indholdet inde i de underordnede -elementer.
Trin 2: Bekræft output
Se HTML-websiden for at kontrollere, om rækkevidden er blevet anvendt eller ej:
I ovenstående output kan det observeres, at rækkespændet er blevet anvendt med succes, ifølge hvilket det blev specificeret.
Konklusion
For at få rækkerne til at spænde i Tailwind, brug ' række-span-
”-værktøjet i HTML-programmet og angiv antallet af rækker hvert element skal spænde over. For verifikation, se ændringerne på HTML-websiden. Denne opskrivning har eksemplificeret metoden til at få rækker til at spænde i Tailwind CSS.