В Tailwind CSS обхватът на реда прави елемент да заема два или повече реда в мрежата. Използва се за определяне на броя редове, които даден елемент трябва да заема/обхваща. Той позволява на потребителите да коригират размера и позицията на елемента от мрежата в множество редове и да създават различни оформления. Освен това може да се използва за създаване на гъвкави и отзивчиви мрежови оформления за уеб страници.
Това описание ще илюстрира метода за създаване на обхват на редове в Tailwind CSS.
Как да направите обхват на редовете в Tailwind?
За да накарате редовете да се простират в Tailwind, направете HTML програма. След това използвайте „ row-span-<стойност> ” и дефинирайте броя на редовете, които да обхванете. Изисква се да се определи броят на редовете, които всеки конкретен елемент трябва да обхваща. И накрая, вижте промените на HTML уеб страницата за проверка.
За практическо изпълнение вижте предоставените стъпки:
Стъпка 1: Направете Column Span в HTML програма
Създайте HTML програма и използвайте „ row-span-<стойност> ” помощни програми с елементите на мрежата, за да направите обхват на колона. Например използвахме „ row-span-3”, „row-span-2” и „row-span-4 ” помощни програми по-долу:
< тяло >
< див клас = 'grid grid-rows-4 grid-flow-col gap-3 m-3 text-center' >
< див клас = 'row-span-3 bg-teal-500 p-5' > 1 < / див >
< див клас = 'bg-teal-500 p-5' > 2 < / див >
< див клас = 'row-span-2 bg-teal-500 p-5' > 3 < / див >
< див клас = 'bg-teal-500 p-5' > 4 < / див >
< див клас = 'bg-teal-500 p-5' > 5 < / див >
< див клас = 'row-span-4 bg-teal-500 p-5' > 6 < / див >
< / див >
< / тяло >
Тук, в родителския елемент
- “ решетка ” се използва за създаване на мрежово оформление.
- “ решетка-ред-4 ” клас задава броя на редовете в мрежата на 4.
- “ grid-flow-col ” клас поставя елементите от мрежата хоризонтално в колони.
- “ празнина-3 ” клас задава разстояние от 3 единици между всеки елемент от мрежата.
- “ m-3 ” клас прилага марж от 3 единици около контейнера на мрежата.
- “ текстов център ” задава текста на всеки елемент от мрежата в центъра.
В дъщерните
- “ ред-педя-3 ” клас указва, че елементът трябва да обхваща 3 реда в мрежата.
- “ ред-педя-2 ” клас показва, че елементът трябва да обхваща 2 реда в мрежата.
- “ ред-педя-4 ” клас указва, че елементът трябва да обхваща 4 реда в мрежата.
- “ bg-teal-500 ” клас задава сив цвят на фона на елемента от мрежата.
- “ p-5 ” клас добавя подложка от 5 единици към съдържанието вътре в дъщерните елементи.
Стъпка 2: Проверете изхода
Вижте HTML уеб страницата, за да проверите дали обхватът на редовете е приложен или не:
В горния изход може да се види, че обхватът на редовете е приложен успешно, според който е зададен.
Заключение
За да накарате редовете да се простират в Tailwind, използвайте „ row-span-<стойност> ” в HTML програмата и укажете броя на редовете, които всеки елемент трябва да обхваща. За проверка вижте промените на HTML уеб страницата. Това описание е пример за метода за създаване на обхват на редове в Tailwind CSS.