CSS 网格显示项目两次

Question

拜托，我的 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 个项目。

在css中不使用media-query可以吗？是的。我知道可以通过 media-query 但我相信 CSS Grid 在不使用它的情况下解决它是明智的。谢谢。

Answer 1

您可以简单地将每两个 div 合二为一，如下所示：https://codepen.io/Aypro18/pen/OJyMVMq?editors=1100

CSS:

.content {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
    min-height: calc(50vh - 20pt);

}

.grid-container{
  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;
  flex: 1 0 34%;
}

HTML:

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

Answer 2

您可以将两个 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>

`

Answer 3

没有 mediaquerie 的 Flex 也可以是这里的一个选项，因为没有元素要跨越一行或一列。

将元素包装在 1、2 或 4 行中的想法示例：

body {
  margin: 0;
}

.content {
  display: flex;
  flex-wrap: wrap;
}

.grid-box {
  margin: 10pt;
  padding: 20pt 10pt 0pt 20pt;
  text-align: center;
  background-color: rgba(204, 221, 204, .6);
  border-radius: 30px;
  border: 1px solid black;
  flex: 1;
  min-width: 350px;
  min-height: calc(50vh - 40pt);
}

.grid-box {/* optionnal, for the demo */
  display: flex;
  align-items: center;
  justify-content: center;
  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">
  <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 网格显示项目两次

CSS Grid Show items on at twice

html

css

media-queries

css-grid