Tailwind CSS oferă un sistem de grilă care permite utilizatorilor să împartă pagina web în coloane și rânduri folosind utilitarele grid-cols și grid-rows. De asemenea, furnizează utilitățile de început și de sfârșit a coloanei de grilă pentru a controla dimensionarea și plasarea elementelor pe coloanele de grilă. Aceste utilitare permit utilizatorilor să specifice pozițiile de pornire și de sfârșit ale unui element în aspectul grilei.
Acest articol va explica metoda de a face coloanele să înceapă sau să se termine la a n-a linie specifică a grilei în Tailwind CSS.
Cum se face ca coloanele să înceapă sau să se termine la a-a linie de grilă în Tailwind?
Pentru a face coloanele să înceapă sau să se termine la a n-a linie a grilei din Tailwind, utilizați „ col-start-
Pasul 1: Specificați pozițiile de început și de sfârșit ale elementelor grilei în programul HTML
Faceți un program HTML și utilizați „ col-start-
< corp >
< h1 clasă = „text-2xl text-center” >
Tailwind CSS - Început coloană / Sfârşit
h1 >
< div clasă = „grid grid-cols-4 gap-3 m-3” >
< div clasă = „col-start-2 col-span-2 bg-teal-500 p-5” > 1 div >
< div clasă = „col-start-1 col-end-3 bg-teal-500 p-5” > 2 div >
< div clasă = „col-start-3 col-end-5 bg-teal-500 p-5” > 3 div >
< div clasă = „col-start-2 col-span-3 bg-teal-500 p-5” > 4 div >
< div clasă = „col-start-1 col-end-5 bg-teal-500 p-5” > 5 div >
div >
corp >
Aici, în elementul părinte
- „ grilă ” este utilizat pentru a crea un aspect al grilei.
- „ grid-cols-4 ” clasă specifică că grila trebuie să aibă 4 coloane de dimensiuni egale.
- „ decalajul-3 ” clasa stabilește o distanță de 3 unități între fiecare element al grilei.
- „ m-3 ” clasa adaugă o marjă de 3 unități în jurul containerului grilă.
În elementele
- „ col-start-2 „proprietatea specifică că elementul grilă începe la coloana 2.
- „ col-span-2 ” indică faptul că elementul grilă ocupă 2 coloane.
- „ col-start-1 ” este folosit pentru a începe elementul grilă din coloana 1.
- „ col-end-3 ” precizează că elementul grilă se termină la coloana 3.
- „ col-start-3 ” indică faptul că elementul grilă începe din a doua coloană.
- „ col-end-5 ” proprietatea termină elementul grilă la coloana 5.
- „ col-span-3 ” precizează că elementul grilă ocupă 3 coloane.
- „ bg-teal-500 ” setează culoarea teal pe fundalul tuturor elementelor din grilă.
- „ p-5 ” adaugă o umplutură de 5 unități la conținutul din elementele grilei.
Pasul 2: Verificați ieșirea
Pentru a vă asigura că au fost aplicate pozițiile de început și de sfârșit ale coloanei de grilă, vizualizați pagina web HTML:
Ieșirea de mai sus indică faptul că pozițiile de început și de sfârșit ale coloanei de grilă au fost aplicate cu succes conform cărora au fost specificate.
Concluzie
Pentru a face coloanele să înceapă sau să se termine la a n-a linie a grilei din Tailwind, „ col-start-