Tailwind CSS tilbyr et rutenettsystem som gjør det mulig for brukere å dele nettsiden inn i kolonner og rader ved å bruke grid-cols og grid-rows-verktøyene. Den gir også start- og sluttverktøy for rutenettsøylen for å kontrollere størrelsen og plasseringen av elementer på tvers av rutenettsøylene. Disse verktøyene lar brukere spesifisere start- og sluttposisjonene til et element i rutenettoppsettet.
Denne artikkelen vil forklare metoden for å få kolonner til å starte eller slutte på den spesifikke n'te rutenettlinjen i Tailwind CSS.
Hvordan få kolonner til å starte eller slutte ved den n'te rutenettlinjen i medvind?
For å få kolonner til å starte eller slutte på den n'te rutenettlinjen i Tailwind, bruk ' col-start-
Trinn 1: Spesifiser start- og sluttposisjoner for rutenettelementer i HTML-programmet
Lag et HTML-program og bruk ' col-start-
< kropp >
< h1 klasse = 'tekst-2xl tekstsenter' >
Tailwind CSS - Kolonnestart / Slutt
h1 >
< div klasse = 'grid grid-cols-4 gap-3 m-3' >
< div klasse = 'col-start-2 col-span-2 bg-teal-500 p-5' > 1 div >
< div klasse = 'col-start-1 col-end-3 bg-teal-500 p-5' > 2 div >
< div klasse = 'col-start-3 col-end-5 bg-teal-500 p-5' > 3 div >
< div klasse = 'col-start-2 col-span-3 bg-teal-500 p-5' > 4 div >
< div klasse = 'col-start-1 col-end-5 bg-teal-500 p-5' > 5 div >
div >
kropp >
Her, i det overordnede
- ' Nett ' brukes til å lage et rutenettoppsett.
- ' rutenett-cols-4 ” klasse spesifiserer at rutenettet skal ha 4 like store kolonner.
- ' gap-3 ”-klassen setter en avstand på 3 enheter mellom hvert rutenettelement.
- ' m-3 ” klasse legger til en margin på 3 enheter rundt rutenettbeholderen.
I de indre underordnede
- ' col-start-2 ”-egenskapen spesifiserer at rutenettelementet starter i kolonne 2.
- ' col-span-2 ” indikerer at rutenettelementet opptar 2 kolonner.
- ' col-start-1 ' brukes til å starte rutenettelementet fra kolonne 1.
- ' col-end-3 ” spesifiserer at rutenettelementet slutter i kolonne 3.
- ' col-start-3 ” indikerer at rutenettelementet starter fra den andre kolonnen.
- ' col-end-5 ”-egenskapen avslutter rutenettelementet i kolonne 5.
- ' col-span-3 ” spesifiserer at rutenettelementet opptar 3 kolonner.
- ' bg-teal-500 ' setter den blågrønne fargen til bakgrunnen for alle rutenettelementer.
- ' s-5 ” legger til en polstring på 5 enheter til innholdet inne i rutenettelementene.
Trinn 2: Bekreft utdata
For å sikre at rutenettkolonnens start- og sluttposisjoner er brukt, se HTML-nettsiden:
Ovennevnte utdata indikerer at rutenettkolonnens start- og sluttposisjoner har blitt brukt i henhold til de ble spesifisert.
Konklusjon
For å få kolonner til å starte eller slutte på den n'te rutenettlinjen i Tailwind, ' col-start-