如何使用auto-fit制作一个带边距的响应css网格

Question

我不需要使用自动调整。我只想让代码正常工作。

我想要一个左边距89px，右边距89px和两个项目在中间。所以我最初有这样的东西：

.container3 {
grid-template-columns: repeat(1, 89px 1fr 1fr 89px);
}

以上内容有效，但没有响应。当屏幕变小时，我需要将这些拆分成单独的行。这是我能想到的最好的，但它不起作用。。。

.container3 {
height: 800px;
/* background-color: pink; */
display: grid;
grid-template-columns: repeat(
auto-fit,
89px minmax(300px, 1fr) minmax(300px, 1fr) 89px
);

Answer 1

如果希望它们分解成单独的行，可以使用网格断点。引导网格选项

你可以试试这样的东西：

<div class="container3">
<div class="row">
<div class="col-12 col-md-4">First row in xs screen / left column in medium and higher devices</div>
<div class="col-12 col-md-4">Second row in xs screen / middle column in medium and higher devices</div>
<div class="col-12 col-md-4">Last row in xs screen / Right column in medium and higher devices</div>
</div>
</div>