В Tailwind CSS диапазон строк заставляет элемент занимать две или более строк в сетке. Он используется для определения количества строк, которые должен занимать элемент. Это позволяет пользователям настраивать размер и положение элемента сетки в нескольких строках и создавать различные макеты. Кроме того, его можно использовать для создания гибких и адаптивных макетов сетки для веб-страниц.
Эта запись иллюстрирует метод создания диапазона строк в Tailwind CSS.
Как сделать диапазон строк в Tailwind?
Чтобы сделать строки в Tailwind разнесенными, создайте HTML-программу. Затем используйте « ряд-промежуток-<значение> ” и определите количество строк для захвата. Требуется определить количество строк, которые должен занимать каждый конкретный элемент. Наконец, просмотрите изменения на веб-странице HTML для проверки.
Для практической реализации ознакомьтесь с предоставленными шагами:
Шаг 1: Создайте диапазон столбцов в программе HTML
Создайте программу HTML и используйте « ряд-промежуток-<значение> Утилиты с элементами сетки для создания диапазона столбцов. Например, мы использовали « ряд-промежуток-3», «ряд-промежуток-2» и «ряд-промежуток-4» », как показано ниже:
< тело >
< див сорт '=' 'сетка сетка-строки-4 сетка-поток-столбец пробел-3 м-3 текст-центр' >
< див сорт '=' 'ряд-пролет-3 бг-чирок-500 п-5' > 1 < / див >
< див сорт '=' 'бг-чирок-500 п-5' > 2 < / див >
< див сорт '=' 'ряд-пролет-2 бг-чирок-500 п-5' > 3 < / див >
< див сорт '=' 'бг-чирок-500 п-5' > 4 < / див >
< див сорт '=' 'бг-чирок-500 п-5' > 5 < / див >
< див сорт '=' 'ряд-пролет-4 бг-чирок-500 п-5' > 6 < / див >
< / див >
< / тело >
Здесь, в родительском элементе
- “ сетка ” используется для создания макета сетки.
- “ сетка-строка-4 ” устанавливает количество строк в сетке равным 4.
- “ сетка-поток-столбец ” размещает элементы сетки горизонтально в столбцах.
- “ разрыв-3 ” устанавливает интервал в 3 единицы между каждым элементом сетки.
- “ м-3 ” применяет отступ в 3 единицы вокруг контейнера сетки.
- “ текстовый центр » устанавливает текст каждого элемента сетки в центр.
В дочерних элементах
- “ ряд-промежуток-3 ” указывает, что элемент должен занимать 3 строки в сетке.
- “ ряд-пролет-2 ” указывает, что элемент должен занимать 2 строки в сетке.
- “ ряд-пролет-4 ” указывает, что элемент должен занимать 4 строки в сетке.
- “ бг-бирюзовый-500 » задает бирюзовый цвет фона элемента сетки.
- “ р-5 ” добавляет отступ в 5 единиц к содержимому внутри дочерних элементов .
Шаг 2: проверьте вывод
Просмотрите веб-страницу HTML, чтобы проверить, был ли применен диапазон строк:
В приведенном выше выводе видно, что диапазон строк был успешно применен в соответствии с тем, что он был указан.
Заключение
Чтобы сделать строки в Tailwind разнесенными, используйте « ряд-промежуток-<значение> ” в программе HTML и укажите количество строк, которые должен занимать каждый элемент. Для проверки просмотрите изменения на веб-странице HTML. Эта статья иллюстрирует способ создания диапазона строк в Tailwind CSS.