Logo Windi CSS

Контейнер

Контейнер

Компонент для привязки ширины элемента к текущей контрольной точке.

КлассКонтрольная точкаСвойства
containerНетwidth: 100%;
sm (640px)max-width: 640px;
md (768px)max-width: 768px;
lg (1024px)max-width: 1024px;
xl (1280px)max-width: 1280px;
2xl (1536px)max-width: 1536px;

Использование

Чтобы центрировать контейнер, используйте утилиту mx-auto:

<div class="container mx-auto">
  <!-- ... -->
</div>

Чтобы добавить горизонтальный отступ, используйте утилиты px-{size}:

<div class="container mx-auto px-4">
  <!-- ... -->
</div>

Чтобы использовать контейнер только с определенной контрольной точкой и выше:

<!-- Заполнение на всю ширину до контрольной точки `lg`, затем зафиксируйте контейнер -->
<div class="md:container md:mx-auto">
  <!-- ... -->
</div>
Персонализация

Центрирование по умолчанию

windi.config.js
export default {
  theme: {
    container: {
      center: true,
    },
  },
}

Горизонтальный отступ

windi.config.js
export default {
  theme: {
    container: {
      padding: '2rem',
    },
  },
}

Укажите различную величину заполнения для каждой контрольной точки

windi.config.js
export default {
  theme: {
    container: {
      padding: {
        'DEFAULT': '1rem',
        'sm': '2rem',
        'lg': '4rem',
        'xl': '5rem',
        '2xl': '6rem',
      },
    },
  },
}