Сетевая система bootstrap 5.3.7

https://getbootstrap.com/docs/5.3/layout/grid/

Пример 

Система сеток Bootstrap использует ряд контейнеров, строк и столбцов для компоновки и выравнивания содержимого. Она построена на flexbox и полностью адаптивна. Ниже приведён пример и подробное объяснение того, как работает система сеток.

В приведенном выше примере создаются три столбца одинаковой ширины для всех устройств и экранов с использованием наших предопределенных классов сетки. Эти столбцы располагаются по центру страницы с помощью родительского элемента .container.

Как это работает 

Если разобраться, то вот как устроена система электроснабжения:

• Наша сетка поддерживает шесть адаптивных точек останова. Точки останова основаны на min-width медиазапросах, то есть они влияют на эту точку останова и все точки, расположенные выше (например, .col-sm-4 применяется к sm, md, lg, xl и xxl). Это означает, что вы можете управлять размером и поведением контейнера и столбцов в каждой точке останова.
• Контейнеры центрируют и выравнивают контент по горизонтали. Используйте .container для адаптивной ширины в пикселях, .container-fluid для width: 100% во всех окнах просмотра и на всех устройствах или адаптивный контейнер (например, .container-md) для комбинации адаптивной и фиксированной ширины.
• Строки — это обертки для столбцов. Каждый столбец имеет горизонтальную padding (называемую канавкой) для управления расстоянием между ними. Это padding затем компенсируется строками с отрицательными полями, чтобы содержимое столбцов визуально выравнивалось по левому краю. Строки также поддерживают классы модификаторов для равномерного применения размера столбцов и классы канавок для изменения расстояния между элементами содержимого.
• Столбцы невероятно гибкие. В каждой строке доступно 12 столбцов шаблона, что позволяет создавать различные комбинации элементов, занимающих любое количество столбцов. Классы столбцов указывают на количество столбцов шаблона, которые нужно охватить (например, col-4 охватывает четыре столбца). width Размеры задаются в процентах, поэтому они всегда будут одинаковыми.
• Классы для оформления желобов доступны. Желоба также адаптивны и настраиваемы. во всех точках останова, с теми же размерами, что и наши поля и отступы. Измените горизонтальные желоба с помощью .gx-* классов, вертикальные желоба с помощью .gy-* или все желоба с помощью .g-* классов. .g-0 Также можно удалить желоба.
• Переменные, карты и миксины Sass управляют сеткой. Если вы не хотите использовать предопределенные классы сетки в Bootstrap, вы можете использовать наш исходный код Sass для сетки, чтобы создать свою собственную сетку с более семантической разметкой. Мы также включили некоторые пользовательские свойства CSS для использования этих переменных Sass, чтобы обеспечить вам еще большую гибкость.

Помните об ограничениях и недостатках flexbox, таких как невозможность использовать некоторые HTML-элементы в качестве гибких контейнеров.

Параметры сетки 

Система сеток Bootstrap может адаптироваться ко всем шести точкам останова по умолчанию, а также к любым настраиваемым точкам останова. Вот шесть уровней сетки по умолчанию:

• Очень маленький (xs)
• Маленький (см)
• Средний (md)
• Большой (lg)
• Очень большой (xl)
• Очень очень большой (xxl)

Как отмечалось выше, каждая из этих точек останова имеет свой собственный контейнер, уникальный префикс класса и модификаторы. Вот как меняется сетка в этих точках останова:

Автоматическое расположение столбцов 

Используйте классы столбцов для конкретных точек останова, чтобы легко изменять размер столбцов без использования явного нумерованного класса, такого как .col-sm-6.

Равной ширины 

Например, вот две схемы сетки, которые подходят для любого устройства и области просмотра, от xs до xxl. Добавьте любое количество классов без единиц измерения для каждой необходимой вам точки останова, и все столбцы будут одинаковой ширины.

Содержимое переменной ширины 

Используйте классы col-{breakpoint}-auto для определения размера столбцов в зависимости от естественной ширины их содержимого.

Адаптивные классы 

Сетка Bootstrap включает в себя шесть уровней предопределённых классов для создания сложных адаптивных макетов. Настраивайте размер столбцов на очень маленьких, маленьких, средних, больших или очень больших устройствах по своему усмотрению.

Все точки останова 

Для сеток, которые одинаковы для всех устройств, от самых маленьких до самых больших, используйте классы .col и .col-*. Укажите номерной класс, если вам нужен столбец определённого размера; в противном случае используйте .col.

Уложенный горизонтально 

Используя один набор классов .col-sm-*, вы можете создать базовую систему сетки, которая изначально имеет вертикальную ориентацию, а в точке малого изменения размера (sm) становится горизонтальной.

Столбцы строк 

Используйте адаптивные классы .row-cols-* для быстрого определения количества столбцов, которые лучше всего отображают ваш контент и макет. В то время как обычные классы .col-* применяются к отдельным столбцам (например, .col-md-4), классы столбцов строк устанавливаются на родительском элементе .row в качестве краткого обозначения. С помощью .row-cols-auto вы можете задать столбцам их естественную ширину.

Используйте эти классы столбцов строк для быстрого создания базовых макетов таблиц или для управления макетом карточек.