Обертывание сетки в бутстрапе с разными размерами столбцов

Я хотел бы настроить страницу с несколькими записями, состоящими из некоторого текста описания и связанных значков. Значки могут различаться по размеру и должны быть выровнены. (Я использую буквы «i» и «w» вместо значков для простоты в моих примерах ниже.)

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

.container {
    display: grid;
    grid-template-columns: 1fr repeat(2, max-content);
}
.content {
    justify-self: center;
}
<div class="container">
    <div class="header">Some text</div>
    <div class="content">i</div>
    <div class="content">i</div>
    <div class="header">Some more text</div>
    <div class="content">w</div>
    <div class="content">w</div>
</div>

Когда область просмотра слишком мала, чтобы левый столбец был уменьшен, скажем, ниже 200 пикселей, я хотел бы быстро переключать макет и отображать его в виде стека, как в этот пример.

.container {
    display: grid;
    grid-template-columns: 1fr repeat(2, max-content) 1fr;
}
.container > div {
    justify-self: center;
}
.header {
    grid-column-start: 1;
    grid-column-end: 5;
}
.content1 {
    grid-column-start: 2;
}
.content2 {
    grid-column-start: 3;
}
<div class="container">
    <div class="header">Some text</div>
    <div class="content1">i</div>
    <div class="content2">i</div>
    <div class="header">Some more text</div>
    <div class="content1">w</div>
    <div class="content2">w</div>
</div>

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

  • Мой веб-сайт использует начальную загрузку, поэтому я мог использовать их функции «строки» и «столбца» (или другие концепции начальной загрузки). Вместо этого создание собственной сетки похоже на использование неправильных инструментов для работы. Но я не мог понять, как спроектировать такую ​​сетку с загрузочными строками и столбцами. (Этот вопрос вызывает аналогичную проблему.)
  • Мой подход требует явного медиа-запроса и использует два совершенно разных дизайна в зависимости от доступного места. Это кажется более сложным, чем необходимо. Можно ли лучше использовать отзывчивость модуля сетки (или любую другую подходящую хитрость html или css), чтобы значки автоматически располагались под текстом, когда область просмотра слишком мала? Я думал об использовании автозаполнения, но, поскольку мои столбцы не имеют одинакового размера, я игнорирую, как действовать дальше.
  • В моем текущем дизайне для небольшого окна просмотра используются классы content1, content2 и т. д., а также повторяющиеся инструкции CSS для их размещения в последовательных столбцах. Эта проблема усугубится, если я захочу больше значков. Могу ли я избежать такого повторения?

css css-grid bootstrap-5
person Olivier Cailloux    schedule 27.06.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Классы отображения отзывчивы. Поэтому вы можете использовать d-flex d-md-grid в контейнере. Когда он переключится на display:flex, столбцы шаблона сетки будут проигнорированы.

.container {
    grid-template-columns: 1fr repeat(2, max-content);
}
.content {
    justify-self: center;
}

<div class="container d-flex d-md-grid flex-wrap align-items-center justify-content-center text-md-start text-center">
    <div class="header w-100">Some text</div>
    <div class="content">i</div>
    <div class="content">i</div>
    <div class="header w-100">Some more text</div>
    <div class="content">w</div>
    <div class="content">w</div>
</div>

Демонстрация на Codeply

Конечно, вы можете использовать d-sm-grid, d-lg-grid или d-xl-grid вместо d-md-grid, чтобы установить точку останова по желанию.

person Zim    schedule 14.07.2021
comment
Это удивительно для случая «большого размера», но не для маленького: я получаю i и w в разных строках (каждый в своей строке), тогда как я хочу, чтобы i были рядом друг с другом, в одной строке. row (и аналогично для w), как показывает мой пример. Любая идея о том, как это сделать? - person Olivier Cailloux; 15.07.2021
comment
Довольно легко приспособиться к моему изменению направления изгиба и обертывания. Обновил код. - person Zim; 15.07.2021
comment
Спасибо, но случай «маленького размера» по-прежнему не совсем правильный: буквы i не выровнены по столбцам в буквах w. Я игнорирую, как добиться этого правильно (см. конец моего вопроса). - person Olivier Cailloux; 16.07.2021