Tailwind CSS предлага мрежова система, която позволява на потребителите да разделят уеб страницата на колони и редове с помощта на помощните програми grid-cols и grid-rows. Той също така предоставя помощните програми за начало и край на колоната на мрежата за контролиране на оразмеряването и разположението на елементите в колоните на мрежата. Тези помощни програми позволяват на потребителите да определят началната и крайната позиция на елемент в оформлението на мрежата.
Тази статия ще обясни метода да накарате колоните да започват или завършват на конкретната n-та линия на мрежата в Tailwind CSS.
Как да накарате колоните да започват или завършват на n-тата линия на мрежата в Tailwind?
За да накарате колоните да започват или завършват на n-та линия на мрежата в Tailwind, използвайте „ col-start-
Стъпка 1: Задайте начална и крайна позиция на елементите на мрежата в HTML програмата
Направете HTML програма и използвайте „ col-start-
< тяло >
< h1 клас = 'текст-2xl текстов център' >
Tailwind CSS - Начало на колона / Край
h1 >
< див клас = 'мрежа grid-cols-4 gap-3 m-3' >
< див клас = 'col-start-2 col-span-2 bg-teal-500 p-5' > 1 див >
< див клас = 'col-start-1 col-end-3 bg-teal-500 p-5' > 2 див >
< див клас = 'col-start-3 col-end-5 bg-teal-500 p-5' > 3 див >
< див клас = 'col-start-2 col-span-3 bg-teal-500 p-5' > 4 див >
< див клас = 'col-start-1 col-end-5 bg-teal-500 p-5' > 5 див >
див >
тяло >
Тук, в родителския елемент
- “ решетка ” се използва за създаване на мрежово оформление.
- “ grid-cols-4 ” указва, че мрежата трябва да има 4 колони с еднакъв размер.
- “ празнина-3 ” клас задава разстояние от 3 единици между всеки елемент от мрежата.
- “ m-3 ” добавя поле от 3 единици около контейнера на решетката.
Във вътрешните дъщерни
- “ col-start-2 ” свойството указва, че елементът от мрежата започва от колона 2.
- “ col-span-2 ” показва, че елементът от мрежата заема 2 колони.
- “ col-start-1 ” се използва за стартиране на елемента от мрежата от колона 1.
- “ col-end-3 ” указва, че елементът от мрежата завършва на колона 3.
- “ col-start-3 ” показва, че елементът от мрежата започва от втората колона.
- “ col-end-5 ” завършва елемента от мрежата в колона 5.
- “ col-span-3 ” указва, че елементът от мрежата заема 3 колони.
- “ bg-teal-500 ” задава синьозеления цвят на фона на всички елементи от мрежата.
- “ p-5 ” добавя подложка от 5 единици към съдържанието вътре в елементите на мрежата.
Стъпка 2: Проверете изхода
За да се уверите, че началната и крайната позиция на колоната с мрежата са приложени, вижте HTML уеб страницата:
Горният изход показва, че началната и крайната позиция на колоната на мрежата са приложени успешно според това, което са посочени.
Заключение
За да накарате колоните да започват или завършват на n-та линия на мрежата в Tailwind, „ col-start-