Начало / конец столбца сетки

Связующие столбцы

Используйте утилиты col-span-{n}, чтобы сделать элемент охватывающим n столбцов.

Начальная и конечная линии

Используйте утилиты col-start-{n} и col-end-{n}, чтобы сделать начало или конец элемента на линии сетки nth. Их также можно комбинировать с утилитами col-span-{n}, чтобы охватить определенное количество столбцов.

Обратите внимание, что линии сетки CSS начинаются с 1, а не с 0, поэтому элемент полной ширины в сетке из 6 столбцов будет начинаться со строки 1 и заканчиваться на строке 7.

Адаптивность

Чтобы управлять размещением столбца элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите столбца сетки. Например, используйте md:col-span-6, чтобы применить утилиту col-span-6 только при средних размерах экрана и выше.

  <div class="col-span-2 md:col-span-6"></div>

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

Кастомизация

По умолчанию Tailwind включает в себя утилиты для работы с сетками, содержащими до 12 столбцов. Вы изменяете, добавляете или удаляете их, настраивая разделы gridColumn, gridColumnStart и gridColumnEnd в конфигурации Вашей темы Tailwind.

Для создания дополнительных утилит col-{value}, которые напрямую управляют сокращенным свойством grid-column, настройте раздел gridColumn в конфигурации Вашей темы Tailwind:

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        gridColumn: {
+         'span-16': 'span 16 / span 16',
        }
      }
    }
  }

Мы используем это внутренне для наших утилит col-span-{n}. Обратите внимание: так как это настраивает сокращенное свойство grid-column напрямую, мы включаем слово span прямо в имя значения, оно не автоматически вставляется в имя класса. Это означает, что вы можете добавлять сюда записи, которые делают все, что захотите - они не должны быть просто утилитами span.

Чтобы добавить новые утилиты col-start-{n}, используйте раздел gridColumnStart конфигурации Вашей темы Tailwind:

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        gridColumnStart: {
+         '13': '13',
+         '14': '14',
+         '15': '15',
+         '16': '16',
+         '17': '17',
        }
      }
    }
  }

Чтобы добавить новые утилиты col-end-{n}, используйте раздел gridColumnEnd конфигурации Вашей темы Tailwind:

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        gridColumnEnd: {
+         '13': '13',
+         '14': '14',
+         '15': '15',
+         '16': '16',
+         '17': '17',
        }
      }
    }
  }

Дополнительные сведения о настройке темы по умолчанию смотрите в документации по настройке темы.

Варианты

По умолчанию для утилит с столбцами сетки создаются только адаптивные варианты.

Вы можете контролировать, какие вариантысоздаются для утилит grid-column, изменяя свойства gridColumn, gridColumnStart и gridColumnEnd в разделе variants файла tailwind.config.js.

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
+     gridColumn: ['responsive', 'hover'],
+     gridColumnStart: ['responsive', 'hover'],
+     gridColumnEnd: ['responsive', 'hover'],
    }
  }

Дополнительные сведения о настройке вариантов смотрите в документации по настройке вариантов.

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения grid-column, Вы можете полностью отключить их, установив для gridColumn, gridColumnStart и gridColumnEnd характеристики значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     gridColumn: false,
+     gridColumnStart: false,
+     gridColumnEnd: false,
    }
  }