时间戳

首页 > 解决方案 > CSS Grid 两次显示项目

html - CSS Grid 两次显示项目

问题描述

拜托，我的CSS 网格定位有一个小问题。我有四列auto-fit属性。例如，如果我的显示器宽度大于 1376 像素，则没问题（在移动设备中也没有问题，因为那时我每行只显示一个项目 - 如您所知，不同的像素比率）。但是我对宽度为 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 个项目，第二列是最后一个。仅一行中的所有 4 个项目，或者如果监视器小于第一行的 2 个项目和第二行的 2 个项目。

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

标签： htmlcssmedia-queriescss-grid

解决方案

您可以将两个grid-box组合在另一个内部div并获得所需的输出。`

<div class="content">
    <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>
      <div class="content">
        <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>
</div>

`

推荐阅读