CSS 网格显示项目两次

Question

拜托，我的CSS 网格定位有一个小问题。我有四列auto-fit财产。例如，如果我的显示器宽度大于 1376px，则没有问题（在移动设备中也没有问题，因为这样我每行仅显示一个项目 - 如您所知，像素比例不同）。但我对宽度为 1024px 的显示器有问题，例如然后我显示 3 个项目，在第二行中我只有最后一个项目，看起来非常糟糕。

HML 片段

<div class="content">

    <div class="grid-box"> 

        <div class="grid-box-icon"><i class="fa fa-hands-wash"></i></div>

        <h2>Wash your hands</h2>

    </div>

    <div class="grid-box">

        <div class="grid-box-icon"><i class="fa fa-head-side-mask"></i></div>

        <h2>Cover your face</h2>

    </div>

    <div class="grid-box">

        <div class="grid-box-icon"><i class="fa fa-people-arrows"></i></div>

        <h2>Social distance</h2>

    </div>

    <div class="grid-box">

        <div class="grid-box-icon"><i class="fa fa-spray-can"></i></div>

        <h2>Sanitize common items</h2>

    </div>

</div>

还有我的 css 片段

.content {

    display: grid;

    grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );

    min-height: calc(50vh - 20pt);

}

.grid-box {

    margin: 10pt;

    padding: 20pt 10pt 0pt 20pt;

    text-align: center;

    background-color: rgba($color: #ccddcc, $alpha: 0.6);

    border-radius: 30px;

    border: 1px solid black;

}

我想要的结果是仅以双胞胎的形式显示。第一列中没有 3 个项目，第二列中没有 3 个项目。仅一行中的所有 4 个项目，或者监视器小于第一行上的 2 个项目和第二行上的 2 个项目。

请问可以不使用media-querycss吗？是的。我知道这是可能的，media-query但我相信 CSS Grid 很聪明，可以在不使用它的情况下解决它。谢谢。

Answer 1

您可以将两个组合grid-box到另一个中div并获得所需的输出。`<div class="content">&nbsp; &nbsp; <div class="content">&nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-box">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-box-icon"><i class="fa fa-hands-wash"></i></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Wash your hands</h2>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-box-icon"><i class="fa fa-head-side-mask"></i></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Cover your face</h2>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="content">&nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-box-icon"><i class="fa fa-people-arrows"></i></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Social distance</h2>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-box">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-box-icon"><i class="fa fa-spray-can"></i></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Sanitize common items</h2>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>

Answer 2

不带 mediaquerie 的 Flex 也可以是这里的一个选项，因为没有元素可以跨越行或列。将元素包装在 1、2 或 4 行中的想法示例：body {&nbsp; margin: 0;}.content {&nbsp; display: flex;&nbsp; flex-wrap: wrap;}.grid-box {&nbsp; margin: 10pt;&nbsp; padding: 20pt 10pt 0pt 20pt;&nbsp; text-align: center;&nbsp; background-color: rgba(204, 221, 204, .6);&nbsp; border-radius: 30px;&nbsp; border: 1px solid black;&nbsp; flex: 1;&nbsp; min-width: 350px;&nbsp; min-height: calc(50vh - 40pt);}.grid-box {/* optionnal, for the demo */&nbsp; display: flex;&nbsp; align-items: center;&nbsp; justify-content: center;&nbsp; flex-direction: column;}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" /><div class="content">&nbsp; <div class="grid-box">&nbsp; &nbsp; <div class="grid-box-icon"><i class="fa fa-hands-wash"></i></div>&nbsp; &nbsp; <h2>Wash your hands</h2>&nbsp; </div>&nbsp; <div class="grid-box">&nbsp; &nbsp; <div class="grid-box-icon"><i class="fa fa-head-side-mask"></i></div>&nbsp; &nbsp; <h2>Cover your face</h2>&nbsp; </div>&nbsp; <div class="grid-box">&nbsp; &nbsp; <div class="grid-box-icon"><i class="fa fa-people-arrows"></i></div>&nbsp; &nbsp; <h2>Social distance</h2>&nbsp; </div>&nbsp; <div class="grid-box">&nbsp; &nbsp; <div class="grid-box-icon"><i class="fa fa-spray-can"></i></div>&nbsp; &nbsp; <h2>Sanitize common items</h2>&nbsp; </div></div>

Answer 3

您可以简单地将每两个 div 放入一个，如下所示：https ://codepen.io/Aypro18/pen/OJyMVMq?editors=1100CSS：.content {&nbsp; &nbsp; display: grid;&nbsp; &nbsp; grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );&nbsp; &nbsp; min-height: calc(50vh - 20pt);}.grid-container{&nbsp; display: grid;&nbsp; &nbsp; grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );&nbsp; &nbsp; min-height: calc(50vh - 20pt);}.grid-box {&nbsp; &nbsp; margin: 10pt;&nbsp; &nbsp; padding: 20pt 10pt 0pt 20pt;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; background-color: rgba($color: #ccddcc, $alpha: 0.6);&nbsp; &nbsp; border-radius: 30px;&nbsp; &nbsp; border: 1px solid black;&nbsp; flex: 1 0 34%;}HTML：<div class="content">&nbsp; <div class="grid-container">&nbsp; &nbsp; <div class="grid-box">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-box-icon"><i class="fa fa-hands-wash"></i></div>&nbsp; &nbsp; &nbsp; &nbsp; <h2>Wash your hands</h2>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="grid-box">&nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-box-icon"><i class="fa fa-head-side-mask"></i></div>&nbsp; &nbsp; &nbsp; &nbsp; <h2>Cover your face</h2>&nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; <div class="grid-container">&nbsp; &nbsp; <div class="grid-box">&nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-box-icon"><i class="fa fa-people-arrows"></i></div>&nbsp; &nbsp; &nbsp; &nbsp; <h2>Social distance</h2>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="grid-box">&nbsp; &nbsp; &nbsp; &nbsp; <div class="grid-box-icon"><i class="fa fa-spray-can"></i></div>&nbsp; &nbsp; &nbsp; &nbsp; <h2>Sanitize common items</h2>&nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>