Утилиты для управления размером элементов и их размещением по строкам сетки.
<div class="grid grid-rows-3 grid-flow-col gap-4">
<div class="row-span-3 ...">1</div>
<div class="col-span-2 ...">2</div>
<div class="row-span-2 col-span-2 ...">3</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 ...">1</div>
<div class="row-end-3 row-span-2 ...">2</div>
<div class="row-start-1 row-end-4 ...">3</div>
</div>Чтобы управлять размещением строки элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите grid-row. Например, используйте md:row-span-3, чтобы применить утилиту row-span-3 только при средних размерах экрана и выше.
<div class="grid grid-rows-3 ...">
<div class="row-span-3 md:row-span-3 ..."></div>
</div>Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.
По умолчанию Tailwind включает в себя утилиты для работы с сетками, содержащими до 6 явных строк. Вы можете изменять, добавлять или удалять их, настраивая разделы gridRow, gridRowStart и gridRowEnd в конфигурации Вашей темы Tailwind.
Для создания дополнительных утилит row-{value}, которые напрямую управляют сокращенным свойством grid-row, настройте раздел gridRow в конфигурации Вашей темы Tailwind:
// tailwind.config.js
module.exports = {
theme: {
extend: {
gridRow: {
+ 'span-16': 'span 16 / span 16',
}
}
}
}Мы используем это внутренне для наших утилит row-span-{n}. Обратите внимание, что, поскольку это настраивает сокращенное свойство grid-row напрямую, мы включаем слово span непосредственно в имя значения, оно не автоматически вставляется в имя класса. Это означает, что вы можете добавлять сюда записи, которые делают все, что захотите - они не должны быть просто утилитами span.
Чтобы добавить новые утилиты row-start-{n}, используйте раздел gridRowStart конфигурации Вашей темы Tailwind:
// tailwind.config.js
module.exports = {
theme: {
extend: {
gridRowStart: {
+ '8': '8',
+ '9': '9',
+ '10': '10',
+ '11': '11',
+ '12': '12',
+ '13': '13',
}
}
}
}Чтобы добавить новые утилиты row-end-{n}, используйте раздел gridRowEnd конфигурации Вашей темы Tailwind:
// tailwind.config.js
module.exports = {
theme: {
extend: {
gridRowEnd: {
+ '8': '8',
+ '9': '9',
+ '10': '10',
+ '11': '11',
+ '12': '12',
+ '13': '13',
}
}
}
}Дополнительные сведения о настройке темы по умолчанию смотрите в документации по настройке темы.
По умолчанию для утилит строки сетки создаются только адаптивные варианты.
Вы можете контролировать, какие варианты создаются для утилит строки сетки, изменяя свойства gridRow, gridRowStart и gridRowEnd в разделе variants Вашего файла tailwind.config.js.
// tailwind.config.js
module.exports = {
variants: {
// ...
+ gridRow: ['responsive', 'hover'],
+ gridRowStart: ['responsive', 'hover'],
+ gridRowEnd: ['responsive', 'hover'],
}
}Дополнительные сведения о настройке вариантов смотрите в документации по настройке вариантов.
Если Вы не планируете использовать в своем проекте утилиты для изменения grid-row, Вы можете полностью отключить их, установив для gridRow, gridRowStart и gridRowEnd характеристики значение false в разделе corePlugins Вашего файла конфигурации:
// tailwind.config.js
module.exports = {
corePlugins: {
// ...
+ gridRow: false,
+ gridRowStart: false,
+ gridRowEnd: false,
}
}