带有图像的复杂网格

Question

我有下面的网格，我想将其转换为代码。

我搜索了像这样的网格，唯一的参考是关于masonry library的，但是对我没有帮助。

另一种方法是使用css only，但我不明白其背后的逻辑。

我们将不胜感激！

Answer 1

您可以设置具有足够行数和列数的CSS网格，然后将元素作为设计分布：

.container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-auto-flow: column dense; 
    width: 95vw;
    height: 95vh;
}

.vertical {
    grid-row: span 2;
    background-color: tomato;
}

.horizontal {
    grid-column: span 2;
    background-color: lightgreen;
}

.square {
    background-color: lightblue;
}
#v2 {
    grid-column-start: 3;
}
#v3 {
    grid-column-start: 6;
}
#v4 {
    grid-column-start: 2;
    grid-row: 2 / 4;
}
#v5 {
    grid-column-start: 5;
    grid-row: 2 / 4;
}

<div class="container">
    <div class="vertical" id="v1">V1</div>
    <div class="vertical" id="v2">V2</div>
    <div class="vertical" id="v3">V3</div>
    <div class="vertical" id="v4">V4</div>
    <div class="vertical" id="v5">V5</div>
    <div class="horizontal" id="h1">H</div>
    <div class="horizontal" id="h2">H</div>
    <div class="square">S</div>
    <div class="square">S</div>
    <div class="square">S</div>
    <div class="square">S</div>
</div>

Answer 2

我建议使用Unite Gallary。它是完全免费的，并且非常易于使用。尝试阅读他们的文档，它将很容易使用。以下是屏幕截图。

Unite Gallary

Answer 3

我知道这是一种非常古老的技术，通常对此不屑一顾，但是如果必须支持IE，则可以使用data['contact'] = request.data['contact_id'] ，就像在this answer的注释中所指定的那样。

<table>

table {
  table-layout: fixed;
  height: 200px;
  width: 100%;
}

td {
  text-align: center;
  vertical-align: bottom;
  background-color: blue;
}

请注意，使用百分比时，该表不会对<table> <tr> <td rowspan="2">Corina</td> <td>Lydia</td> <td rowspan="2">Reinas</td> <td colspan="2">Elise</td> <td rowspan="2">Vegerra</td> </tr> <tr> <td rowspan="2">Agapi</td> <td>Amira</td> <td rowspan="2">Filipa</td> </tr> <tr> <td>Daisy</td> <td colspan="2">Josephine</td> <td>Amarylis</td> </tr> </table>做出反应（至少在Firefox 61.0中如此）。

height

table {
  table-layout: fixed;
  height: 100%;
  width: 100%;
}

td {
  text-align: center;
  vertical-align: bottom;
  background-color: blue;
}

BTW：写完这张表后，我可以看到为什么不首选使用这种布局，因为这很恼火，因为某些行中只缺少列。