带有偶数项的 Css 网格行答案

【问题标题】：Css grid rows with even items带有偶数项的 Css 网格行
【发布时间】：2020-03-06 12:35:39
【问题描述】：

我有一排有 6 件商品。根据宽度，它会将项目分成新的行。

问题是这可能发生（asterix 是一个项目）：

*****
*

当我调整屏幕大小时，我希望它适应如下：

******

***
***

**
**
**

*
*
*
*
*
*

我知道我可以为此使用媒体查询，但我希望有其他解决方案。有吗？

main {
  background: #eee;
  max-width: 600px;
}
section {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, auto));
  grid-gap: 1rem;
}

div {
  background: #ddd;
}

<main>
  <section>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
  </section>
</main>

【问题讨论】：

您可以使用引导网格来执行此操作，或者为每个分辨率（桌面/移动）编写自己的样式。检查此链接：getbootstrap.com/docs/4.4/layout/overview 和 getbootstrap.com/docs/4.4/layout/grid
重复：stackoverflow.com/q/60400211/8620333 但我无法关闭，因为没有答案，也没有答案，因为不可能
可能在引导网格的帮助下，因为它有像 md sm xs 这样的类来满足上述需求
@TemaniAfif 不可能的答案也是该问题的有效答案。
从浏览器的角度来看，您想要的细分 (6 - 3 - 2 -1) 是任意的。它没有理由符合您的偏好。它可以以另一种方式（6 - 4 - 2 -1）同样容易地崩溃。如果您要求的包装行为不是自然行为，则需要提供一种人为的力量来实现这一点。它可以是媒体查询、脚本或其他东西。

标签： css responsive css-grid

【解决方案1】：

您必须使用媒体查询。我不认为还有什么是有意义的。

main {
  background: #eee;
  max-width: 600px;
}

section {
  display: grid;
  grid-template-columns: repeat(6, minmax(100px, auto));
  grid-template-rows: repeat(1, 1fr);
  grid-gap: 1rem;
}

@media only screen and (max-width: 800px) {
  section {
    grid-template-columns: repeat(3, minmax(100px, auto));
    grid-template-rows: repeat(2, 1fr)
   }
}

@media only screen and (max-width: 600px) {
  section {
    grid-template-columns: repeat(2, minmax(100px, auto));
    grid-template-rows: repeat(3, 1fr)
   }
}

@media only screen and (max-width: 400px) {
  section {
    grid-template-columns: repeat(1, minmax(100px, auto));
    grid-template-rows: repeat(6, 1fr)
   }
}

div {
  background: #ddd;
}

<main>
  <section>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
  </section>
</main>

【讨论】：

【解决方案2】：

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    

</head>
<body>
    <div class="row">
        <div class="col-lg-2 col-md-4 col-sm-6 col-xm-12">
            <input type="text" class="form-control bg-dark" name="">
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xm-12">
            <input type="text" class="form-control bg-danger" name="">
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xm-12">
            <input type="text" class="form-control bg-light" name="">
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xm-12">
            <input type="text" class="form-control bg-primary" name="">
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xm-12">
            <input type="text" class="form-control bg-info" name="">
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 col-xm-12">
            <input type="text" class="form-control bg-primary" name="">
        </div>
    </div>

</body>
</html>

试试这个

【讨论】：