Tailwind CSS biedt een rastersysteem waarmee gebruikers de webpagina in kolommen en rijen kunnen verdelen met behulp van de hulpprogramma's grid-cols en grid-rows. Het biedt ook de start- en eindhulpprogramma's van de rasterkolom om de grootte en plaatsing van elementen over rasterkolommen te regelen. Met deze hulpprogramma's kunnen gebruikers de begin- en eindpositie van een element binnen de rasterlay-out specificeren.
In dit artikel wordt de methode uitgelegd om kolommen te laten beginnen of eindigen op de specifieke negende rasterlijn in Tailwind CSS.
Hoe kolommen laten beginnen of eindigen bij de negende rasterlijn in Tailwind?
Om kolommen te laten beginnen of eindigen op de negende rasterlijn in Tailwind, gebruikt u de col-start-
Stap 1: Specificeer de begin- en eindposities van rasterelementen in het HTML-programma
Maak een HTML-programma en gebruik de ' col-start-
< lichaam >
< h1 klas = 'tekst-2xl tekstcentrum' >
Tailwind CSS - Kolomstart / Einde
h1 >
< div klas = 'grid grid-cols-4 gap-3 m-3' >
< div klas = 'col-start-2 col-span-2 bg-teal-500 p-5' > 1 div >
< div klas = 'col-start-1 col-end-3 bg-teal-500 p-5' > 2 div >
< div klas = 'col-start-3 col-end-5 bg-teal-500 p-5' > 3 div >
< div klas = 'col-start-2 col-span-3 bg-teal-500 p-5' > 4 div >
< div klas = 'col-start-1 col-end-5 bg-teal-500 p-5' > 5 div >
div >
lichaam >
Hier, in het bovenliggende
- “ rooster ” wordt gebruikt om een rasterlay-out te maken.
- “ grid-cols-4 ” klasse geeft aan dat het raster 4 kolommen van gelijke grootte moet hebben.
- “ kloof-3 ” klasse stelt een afstand in van 3 eenheden tussen elk rasteritem.
- “ m-3 ” klasse voegt een marge van 3 eenheden toe rond de roostercontainer.
In de inner child
- “ col-start-2 ” eigenschap geeft aan dat het rasteritem begint bij kolom 2.
- “ col-span-2 ” geeft aan dat het rasteritem 2 kolommen beslaat.
- “ col-start-1 ” wordt gebruikt om het rasteritem te starten vanaf kolom 1.
- “ col-einde-3 ” geeft aan dat het rasteritem eindigt bij kolom 3.
- “ col-start-3 ” geeft aan dat het rasteritem begint vanaf de tweede kolom.
- “ col-end-5 ” eigenschap beëindigt het rasteritem in kolom 5.
- “ col-span-3 ” geeft aan dat het rasteritem 3 kolommen beslaat.
- “ bg-groenblauw-500 ” stelt de blauwgroen kleur in op de achtergrond van alle rasteritems.
- “ p-5 ” voegt een opvulling van 5 eenheden toe aan de inhoud binnen de rasteritems.
Stap 2: uitvoer controleren
Bekijk de HTML-webpagina om ervoor te zorgen dat de begin- en eindposities van de rasterkolommen zijn toegepast:
De bovenstaande uitvoer geeft aan dat de start- en eindposities van de rasterkolom met succes zijn toegepast volgens de specificaties.
Conclusie
Om kolommen te laten beginnen of eindigen op de negende rasterlijn in Tailwind, gebruikt u de col-start-