响应式网页设计的动态列数网格

Question

我正在寻找一个允许我根据浏览器窗口大小创建具有最佳列数的动态网格的库。

以下网格

+-----------+-----------+-----------+-----------+
|     1     |     2     |     3     |     4     |
+-----------+-----------+-----------+-----------+
|     5     |     6     |     7     |     8     |
+-----------+-----------+-----------+-----------+

当窗口变小时，应该调整

的大小和重新排序。

+-----------+-----------+-----------+
|     1     |     2     |     3     |
+-----------+-----------+-----------+
|     4     |     5     |     6     |
+-----------+-----------+-----------+
|     7     |     8     |           |
+-----------+-----------+-----------+

有谁知道如何通过响应式网页设计实现这样的目标？

Answer 1

您可以使用 Flexbox

Fiddle

WOW

ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

li {
  padding: 20px;
  border: 1px solid black;
  flex: 0 1 25%;
  box-sizing: border-box;
  margin: 5px 0;
}

@media(max-width: 768px) {
  li {
    flex: 0 1 33.333%;
  }
}

大屏幕

小屏幕

Answer 2

您熟悉Bootstrap网格系统吗？ https://getbootstrap.com/examples/grid/

从此处获取Bootstrap CDN的链接（https://www.bootstrapcdn.com/）并链接到您的HTML并尝试此操作：

html的

<div class="container">
 <div class="col-md-3 col-sm-4 square">1</div>
 <div class="col-md-3 col-sm-4 square">2</div>
 <div class="col-md-3 col-sm-4 square">3</div>
 <div class="col-md-3 col-sm-4 square">4</div>
 <div class="col-md-3 col-sm-4 square">5</div>
 <div class="col-md-3 col-sm-4 square">6</div>
 <div class="col-md-3 col-sm-4 square">7</div>
 <div class="col-md-3 col-sm-4 square">8</div>
</div>

.css

.square {
  border:solid;
  border-color: WHATEVERCOLOR;
  width: 200px;
  height: 200px;
}

如果您想知道“.col-md”或“col-sm”的类修复，请查看此页面上的“网格选项”段落： http://v4-alpha.getbootstrap.com/layout/grid/