Флексбокс и Сетка
Утилиты для управления размером элементов и их размещением по строкам сетки.
Используйте утилиты row-span-{n}
, чтобы сделать элемент охватывающим n строк.
<div class="grid grid-rows-3 grid-flow-col gap-4">
<div class="row-span-3 ...">01</div>
<div class="col-span-2 ...">02</div>
<div class="row-span-2 col-span-2 ...">03</div>
</div>
Используйте утилиты row-start-{n}
и row-end-{n}
, чтобы сделать начало или конец элемента на линии сетки nth. Их также можно комбинировать с утилитами row-span-{n}
для охвата определенного количества строк.
Обратите внимание, что линии сетки CSS начинаются с 1, а не с 0, поэтому элемент во всю высоту в трехстрочной сетке будет начинаться со строки 1 и заканчиваться на строке 4.
<div class="grid grid-rows-3 grid-flow-col gap-4">
<div class="row-start-2 row-span-2 ...">01</div>
<div class="row-end-3 row-span-2 ...">02</div>
<div class="row-start-1 row-end-4 ...">03</div>
</div>
Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:row-span-4
, чтобы применять утилиту row-span-4
только при hover.
<div class="row-span-3 hover:row-span-4">
<!-- ... -->
</div>
Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.
Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:row-span-4
, чтобы применить утилиту row-span-4
только на экранах среднего размера и выше.
<div class="row-span-3 md:row-span-4">
<!-- ... -->
</div>
Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.
По умолчанию Tailwind включает в себя утилиты для работы с сетками, содержащими до 6 явных строк. Вы можете настроить эти значения, отредактировав theme.gridRow
, theme.extend.gridRow
, theme.gridRowStart
, theme.extend.gridRowStart
, theme.gridRowEnd
, and theme.extend.gridRowEnd
в вашем файле tailwind.config.js
.
Для создания дополнительных утилит row-{value}
, которые напрямую управляют сокращенным свойством grid-row
, настройте раздел gridRow
в конфигурации Вашей темы Tailwind:
module.exports = {
theme: {
extend: {
gridRow: {
'span-16': 'span 16 / span 16',
}
}
}
}
Мы используем это внутренне для наших утилит row-span-{n}
. Обратите внимание, что, поскольку это настраивает сокращенное свойство grid-row
напрямую, мы включаем слово span
непосредственно в имя значения, оно не автоматически вставляется в имя класса. Это означает, что вы можете добавлять сюда записи, которые делают все, что захотите - они не должны быть просто утилитами span
.
Чтобы добавить новые утилиты row-start-{n}
, используйте раздел gridRowStart
конфигурации Вашей темы Tailwind:
module.exports = {
theme: {
extend: {
gridRowStart: {
'8': '8',
'9': '9',
'10': '10',
'11': '11',
'12': '12',
'13': '13',
}
}
}
}
Чтобы добавить новые утилиты row-end-{n}
, используйте раздел gridRowEnd
конфигурации Вашей темы Tailwind:
module.exports = {
theme: {
extend: {
gridRowEnd: {
'8': '8',
'9': '9',
'10': '10',
'11': '11',
'12': '12',
'13': '13',
}
}
}
}
Дополнительные сведения о настройке темы по умолчанию смотрите в документации настройка темы.
Если вам нужно использовать одноразовое grid-row/grid-row-start/grid-row-end
value, которое не имеет смысла включать в вашу тему, используйте квадратные скобки, чтобы сгенерировать свойство на лету, используя любое произвольное значение.
<div class="row-[span_16_/_span_16]">
<!-- ... -->
</div>
Узнайте больше о поддержке произвольных значений в документации по произвольным значениям.