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 >
< див сорт '=' 'сетка сетка-столбы-4 зазор-3 м-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 див >
див >
тело >
Здесь, в родительском элементе
- “ сетка ” используется для создания макета сетки.
- “ сетка-столбцы-4 ” указывает, что сетка должна иметь 4 столбца одинакового размера.
- “ разрыв-3 ” устанавливает интервал в 3 единицы между каждым элементом сетки.
- “ м-3 ” добавляет отступ в 3 единицы вокруг контейнера сетки.
Во внутренних дочерних элементах
- “ Кол-старт-2 ” указывает, что элемент сетки начинается со столбца 2.
- “ col-span-2 ” указывает, что элемент сетки занимает 2 столбца.
- “ col-start-1 ” используется для запуска элемента сетки из столбца 1.
- “ col-end-3 ” указывает, что элемент сетки заканчивается в столбце 3.
- “ Кол-старт-3 ” указывает, что элемент сетки начинается со второго столбца.
- “ столбец конец-5 ” заканчивает элемент сетки в столбце 5.
- “ col-span-3 ” указывает, что элемент сетки занимает 3 столбца.
- “ бг-бирюзовый-500 » задает бирюзовый цвет для фона всех элементов сетки.
- “ р-5 ” добавляет отступ в 5 единиц к содержимому внутри элементов сетки.
Шаг 2: проверьте вывод
Чтобы убедиться, что начальная и конечная позиции столбца сетки применены, просмотрите веб-страницу HTML:
Приведенный выше вывод показывает, что начальная и конечная позиции столбца сетки были успешно применены в соответствии с тем, как они были указаны.
Заключение
Чтобы столбцы начинались или заканчивались на n-й линии сетки в Tailwind, col-start-