Tailwind CSS ponúka systém mriežky, ktorý umožňuje používateľom rozdeliť webovú stránku do stĺpcov a riadkov pomocou nástrojov grid-cols a grid-rows. Poskytuje tiež pomocné nástroje začiatku a konca stĺpca mriežky na ovládanie veľkosti a umiestnenia prvkov v stĺpcoch mriežky. Tieto nástroje umožňujú používateľom určiť počiatočnú a koncovú pozíciu prvku v rámci rozloženia mriežky.
Tento článok vysvetlí spôsob, ako nastaviť, aby stĺpce začínali alebo končili na konkrétnej n-tej čiare mriežky v CSS Tailwind.
Ako nastaviť, aby stĺpce začínali alebo končili na n-tej mriežke v Tailwinde?
Ak chcete, aby stĺpce začínali alebo končili na n-tej čiare mriežky v Tailwinde, použite „ col-start-
Krok 1: Zadajte počiatočnú a koncovú pozíciu prvkov mriežky v programe HTML
Vytvorte HTML program a použite „ col-start-
< telo >
< h1 trieda = 'text-2xl text-center' >
Tailwind CSS – začiatok stĺpca / Koniec
h1 >
< div trieda = 'mriežka grid-cols-4 gap-3 m-3' >
< div trieda = 'col-start-2 col-span-2 bg-teal-500 p-5' > 1 div >
< div trieda = 'col-start-1 col-end-3 bg-teal-500 p-5' > 2 div >
< div trieda = 'col-start-3 col-end-5 bg-teal-500 p-5' > 3 div >
< div trieda = 'col-start-2 col-span-3 bg-teal-500 p-5' > 4 div >
< div trieda = 'col-start-1 col-end-5 bg-teal-500 p-5' > 5 div >
div >
telo >
Tu v nadradenom prvku
- “ mriežka “ sa používa na vytvorenie rozloženia mriežky.
- “ grid-cols-4 ” trieda určuje, že mriežka by mala mať 4 rovnako veľké stĺpce.
- “ medzera-3 ” trieda nastavuje vzdialenosť 3 jednotiek medzi každou mriežkou.
- “ m-3 “ trieda pridáva okraj 3 jednotiek okolo kontajnera mriežky.
Vo vnútorných podriadených prvkoch
- “ col-start-2 vlastnosť určuje, že položka mriežky začína v stĺpci 2.
- “ col-span-2 “ označuje, že položka mriežky zaberá 2 stĺpce.
- “ col-start-1 “ sa používa na spustenie položky mriežky od stĺpca 1.
- “ col-end-3 ” určuje, že položka mriežky končí v stĺpci 3.
- “ col-start-3 “ označuje, že položka mriežky začína od druhého stĺpca.
- “ col-end-5 ” vlastnosť ukončuje položku mriežky v stĺpci 5.
- “ col-span-3 ” určuje, že položka mriežky zaberá 3 stĺpce.
- “ bg-teal-500 ” nastaví modrozelenú farbu na pozadie všetkých položiek mriežky.
- “ p-5 “ pridáva výplň 5 jednotiek k obsahu vnútri položiek mriežky.
Krok 2: Overte výstup
Ak sa chcete uistiť, že začiatočné a koncové pozície stĺpca mriežky boli použité, pozrite si webovú stránku HTML:
Vyššie uvedený výstup naznačuje, že začiatočné a koncové pozície stĺpca mriežky boli úspešne aplikované podľa toho, ako boli špecifikované.
Záver
Ak chcete, aby stĺpce začínali alebo končili na n-tom riadku mriežky v Tailwinde, col-start-