带有图像的复杂网格答案

【问题标题】：Complex grid with images带有图像的复杂网格
【发布时间】：2018-07-21 15:33:49
【问题描述】：

我有下面的网格，我想把它转换成代码。

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

另一种方法是使用css only，但我无法理解其背后的逻辑。

我们将不胜感激任何有助于开始一个良好开始的帮助！

【问题讨论】：

Try checking this out

标签： html css gallery jquery-masonry masonry

【解决方案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>

【讨论】：

这确实是一个很好的答案，但不支持 I.E.我想要一个没有网格 css 的解决方案。

【解决方案2】：

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

Unite Gallary

【讨论】：

【解决方案3】：

我知道这是一种非常古老的技术，通常不受欢迎，但如果您必须支持 IE，则可以使用 <table>，正如您在对 this answer 的评论中指定的那样。

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;
}

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

顺便说一句：写完这张表后，我明白了为什么不喜欢使用这种布局，因为在某些行中只缺少列是非常令人恼火的。

【讨论】：