Tailwind CSS tilbyder et gittersystem, der gør det muligt for brugere at opdele websiden i kolonner og rækker ved hjælp af grid-cols og grid-rows-værktøjerne. Det giver også start- og slutværktøjer til gitterkolonnen til at kontrollere størrelsen og placeringen af elementer på tværs af gittersøjler. Disse hjælpeprogrammer giver brugerne mulighed for at angive start- og slutpositionerne for et element i gitterlayoutet.
Denne artikel vil forklare metoden til at få kolonner til at starte eller slutte ved den specifikke n'te gitterlinje i Tailwind CSS.
Hvordan får man kolonner til at starte eller slutte ved den n. gitterlinje i medvind?
For at få kolonner til at starte eller slutte ved den n'te gitterlinje i Tailwind, skal du bruge ' col-start-
Trin 1: Angiv start- og slutpositioner for gitterelementer i HTML-programmet
Lav et HTML-program og brug ' col-start-
< legeme >
< h1 klasse = 'text-2xl tekstcenter' >
Tailwind CSS - Kolonnestart / Ende
h1 >
< div klasse = 'gitter 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 >
legeme >
Her i det overordnede
- “ gitter ” bruges til at skabe et gitterlayout.
- “ gitter-cols-4 ” klasse angiver, at gitteret skal have 4 lige store kolonner.
- “ mellemrum-3 ” klasse indstiller en afstand på 3 enheder mellem hver gitterelement.
- “ m-3 ” klasse tilføjer en margen på 3 enheder omkring gitterbeholderen.
I de indre underordnede
- “ col-start-2 egenskaben angiver, at gitterelementet starter ved kolonne 2.
- “ col-span-2 ” angiver, at gitterelementet optager 2 kolonner.
- “ col-start-1 ” bruges til at starte gitterelementet fra kolonne 1.
- “ col-end-3 ” angiver, at gitterelementet slutter ved kolonne 3.
- “ col-start-3 ” angiver, at gitterelementet starter fra den anden kolonne.
- “ col-end-5 egenskaben afslutter gitterelementet i kolonne 5.
- “ col-span-3 ” angiver, at gitterelementet optager 3 kolonner.
- “ bg-teal-500 ” indstiller den blågrønne farve til baggrunden for alle gitterelementer.
- “ p-5 ” tilføjer en polstring på 5 enheder til indholdet inde i gitterelementerne.
Trin 2: Bekræft output
Se HTML-websiden for at sikre, at start- og slutpositionerne for gitterkolonnen er blevet anvendt:
Ovenstående output indikerer, at gitterkolonnens start- og slutpositioner er blevet anvendt med succes, i overensstemmelse med hvilken de blev specificeret.
Konklusion
For at få kolonner til at starte eller slutte ved den n. gitterlinje i Tailwind, skal ' col-start-