I Tailwind CSS gjør radspenn at et element okkuperer to eller flere rader i rutenettet. Den brukes til å definere antall rader et element skal okkupere/spenne over. Det tillater brukere å justere rutenettelementets størrelse og plassering på tvers av flere rader og lage forskjellige oppsett. Dessuten kan den brukes til å lage fleksible og responsive rutenettoppsett for nettsider.
Denne oppskriften vil eksemplifisere metoden for å lage et radspenn i Tailwind CSS.
Hvordan få rader til å spenne i medvind?
For å få radene til å spenne i Tailwind, lag et HTML-program. Deretter bruker du ' rad-spenn-
For praktisk implementering, sjekk ut trinnene som følger med:
Trinn 1: Lag kolonnespenn i HTML-program
Lag et HTML-program og bruk ' rad-spenn-
< kropp >
< div klasse = 'grid 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 >
< / kropp >
Her, i det overordnede
- ' Nett Klasse brukes til å lage et rutenettoppsett.
- ' rutenett-rad-4 klasse setter radnummeret i rutenettet til 4.
- ' grid-flow-col ” klasse plasserer rutenettelementene horisontalt i kolonner.
- ' gap-3 ”-klassen setter en avstand på 3 enheter mellom hvert rutenettelement.
- ' m-3 ” klasse gjelder en margin på 3 enheter rundt gitterbeholderen.
- ' tekst-senter ” klasse setter teksten til hvert rutenettelement til sentrum.
I underordnede
- ' rad-spenn-3 ” klasse spesifiserer at elementet skal spenne over 3 rader i rutenettet.
- ' rad-spenn-2 ” klasse indikerer at elementet skal spenne over 2 rader i rutenettet.
- ' rad-spenn-4 ” klasse spesifiserer at elementet skal spenne over 4 rader i rutenettet.
- ' bg-teal-500 ”-klassen setter blågrønnfargen til bakgrunnen til rutenettelementet.
- ' s-5 ”-klassen legger til en utfylling på 5 enheter til innholdet i underordnede -elementer.
Trinn 2: Bekreft utdata
Se HTML-nettsiden for å bekrefte om radspennet er brukt eller ikke:
I utgangen ovenfor kan det observeres at radspennet har blitt brukt med suksess i henhold til det det ble spesifisert.
Konklusjon
For å få radene til å spenne i Tailwind, bruk ' rad-spenn-
”-verktøyet i HTML-programmet og spesifiser antall rader hvert element skal spenne over. For verifisering, se endringene på HTML-nettsiden. Denne oppskriften har eksemplifisert metoden for å lage et radspenn i Tailwind CSS.