带有图像的复杂网格

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

我知道这是一种非常古老的技术，通常不受欢迎，但如果您必须支持 IE，您可以使用 <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>

请注意，table 不会像使用百分比时预期的那样对 height 做出反应（至少在 Firefox 61.0 中是这样）。

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>

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

Answer 3

我建议使用 Unite Gallary. It is completely free and very easy to use. Try reading their documentation and it will be easy to use. Below is a screenshot.

Unite Gallary

带有图像的复杂网格

Complex grid with images

html

css

gallery

jquery-masonry

masonry