Question

这是我的第一个网站，也是我最初的编码经验，我正在尝试制作一个看起来像这样的网格。在某些断点处添加另一列。我如何实现这种影响，即元素大小会扩展到发生某个断点，然后将其分为两列，而在另一个断点处则分为三列。我还希望元素能够相互适应，而不是新的行都以相同的高度开始。我希望它看起来像这样（https://i.imgur.com/ZCtgqLa.png）

我已经尝试了几件事，但是做不到。移动设备很简单，我可以执行内联代码块或flex-direction：列，但是当我们进入2个以上的列时，我会迷路。我可以手动设置对象的宽度，使它们内联块或包装flexbox，它会形成2列网格，但它们不能互相容纳，而是每一行都从相同的高度开始，而不是适合前几行元素的底部。除了在某个媒体查询中手动创建2个flexbox列之外，我不确定如何实现这种效果，但是我想每天轻松地向网站添加新元素，因此，必须手动更改代码对于三种不同的媒体查询似乎根本没有效率。

.ongoingprojects1 ul {
  display: inline-block;
    }

 .ongoingprojects1 li {
    position: relative;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: calc(99% / 2);
  }
.ongoingprojects1 img {
    max-height: 100%;
    max-width: 100%;
}

        <div class="ongoingprojects1">
        <h1> wussgood</h1>
        <ul>
          <li><a href="./example.html">BITE</a>
              <img src="./test.png">
          </li>
          <li><a href="./pixelart">Pixel Art</a><img src="./trial3.gif"></li>
          <li><p> object 3</p></li>
          <li><p> object 4</p></li>
          <li><p> object 5</p></li>
        </ul>
    </div>

这形成了一个2列系统，其中所有列表项都在我不希望的新行中以相同的高度开始。

如何创建一个网格或弹性框系统，其中项目位于不规则的行中并相互堆叠？

0 个答案: