在具有不同列大小的引导程序中包装网格

Question

我想设置一个包含多个条目的页面，其中包含一些描述文本和相关图标。图标大小可能不同，应对齐。 （在下面的示例中，为了简单起见，我使用字母“i”和“w”代替图标。）

当页面足够宽时，我希望将它们设置为具有宽左列和右侧的图标的网格，这样应该尽可能少地占用水平空间。这是一个带有两个“图标”的example。

.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 像素，我想响应式切换布局并将其显示为堆栈，如 this example。

.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>

这种方法可行，但如果可能的话，我想改进多个方面。

• 我的网站使用引导程序，因此我可以使用它们的“行”和“列”功能（或其他引导程序概念）。相反，设计我自己的网格感觉就像没有使用正确的工具来完成这项工作。但我不知道如何用引导程序的行和列设计这样的网格。 （This question 提出了类似的问题。）
• 我的方法需要明确的媒体查询，并根据可用空间使用两种完全不同的设计。这感觉比必要的更复杂。是否可以更好地利用网格模块的响应性（或任何其他适当的 html 或 css 技巧），以便当视口太小时图标会自动在文本下方流动？我考虑过使用自动填充，但由于我的列的大小不同，我忽略了如何继续。
• 我当前的小视口案例设计使用content1、content2 等类，并使用重复的CSS 指令将它们放置在连续的列中。如果我想要更多图标，这个问题会更加严重。我可以避免这样的重复吗？

Answer 1

display classes are responsive。因此，您可以在容器上使用d-flex d-md-grid。当它切换到display:flex 时，grid-template-columns 将被忽略。

.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>

Demo on Codeply

当然，您可以根据需要使用d-sm-grid、d-lg-grid 或d-xl-grid 而不是d-md-grid 来设置断点。