为了账号安全,请及时绑定邮箱和手机立即绑定

CSS 网格显示项目两次

CSS 网格显示项目两次

蛊毒传说 2023-12-25 16:55:23
拜托,我的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 很聪明,可以在不使用它的情况下解决它。谢谢。
查看完整描述

3 回答

?
冉冉说

TA贡献1877条经验 获得超1个赞

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


查看完整回答
反对 回复 2023-12-25
?
天涯尽头无女友

TA贡献1831条经验 获得超9个赞

不带 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>


查看完整回答
反对 回复 2023-12-25
?
四季花海

TA贡献1811条经验 获得超5个赞

您可以简单地将每两个 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>


查看完整回答
反对 回复 2023-12-25
  • 3 回答
  • 0 关注
  • 66 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信