html - 创建此响应式 CSS 网格的更智能方式

Question

我对网格感到疯狂。对于我的网站，我有一个固定大小的模块化网格，3 x 2。在这个网格中，我可以分配一些 block ，没有空间，每个元素之间有 1 px 的边距。

我可以有 5 种类型的 block :

• 巨大，3 x 2 block
• 大正方形，2 x 2 block
• 水平，2 x 1 block
• 垂直，1 x 2 block
• 正方形，1 x 1 block 。

在这张图片中，我展示了一些变体，并取消了右侧的“平板电脑”版本。

我必须使用代码生成网格，所以我不想创建 X 个固定模板来填充，我想要一个可以自行调整的模板。 现在我为每个变体使用 float 和一些类。

例如第一个封面变体

<section class="cover variant-1">
  <div class="cover-block horizontal" id="block-1">
    <img alt="image" src="https://via.placeholder.com/900x350" />
  </div>
  <div class="cover-block small" id="block-2">
    <img alt="image" src="https://via.placeholder.com/450x350" />
  </div>
  <div class="cover-block square" id="block-3">
    <img alt="image" src="https://via.placeholder.com/450x350" />
  </div>
 <div class="cover-block horizontal" id="block-4">
    <img alt="image" src="https://via.placeholder.com/900x350" />
  </div>
</section>

还有第二个封面变体

<section class="cover variant-2">
  <div class="cover-block big-square" id="block-1">
    <img alt="image" src="https://via.placeholder.com/900x700" />
  </div>
  <div class="cover-block vertical" id="block-2">
    <img alt="image" src="https://via.placeholder.com/450x700" />
  </div>
</section>

CSS 是

.cover {
  float: none;
  max-width: 1350px;
  max-height: 700px;
  margin: 0;
}
.cover .cover-block {
  float: left;
  position: relative;
  border: 0px solid #fff;
}
.cover .cover-block img {
  width: 100%;
  height: 100%;
}
.cover .cover-block.huge {
  width: 1350px;
  height: 700px;
}
.cover .cover-block.vertical {
  width: 450px;
  height: 700px;
}
.cover .cover-block.horizontal {
  width: 900px;
  height: 350px;
}
.cover .cover-block.big-square {
  width: 900px;
  height: 700px;
}
.cover .cover-block.square {
  width: 450px;
  height: 350px;
}
.cover .variant-1 #block-1 {
  border-width: 0 1px 0 0;
}
.cover .variant-1 #block-2 {
  border-width: 0 1px 0 0;
}
.cover .variant-1 #block-4 {
  border-width: 1px 1px 0 0;
}
.cover .variant-1 #block-5 {
  border-width: 1px 0 0 0;
}
.cover .variant-2 #block-1 {
  border-width: 0 1px 0 0;
}
.cover .variant-2 #block-3 {
  border-width: 1px 1px 0 0;
}
.cover .variant-2 #block-4 {
  border-width: 1px 0 0 0;
}
.cover .variant-2 #block-5 {
  display: none;
}

对于 float ，我必须为每个 block 定义一个 ID 来处理一个方向上的 1 个像素空间，而且我还有很多媒体查询来使这个网格响应。

有没有更聪明的方法来设计我的网格，也许使用 flexbox？

这是 Codepen

Answer 1

CSS Grid Layout Module将是生成这些布局的完美工具。

来自 the spec 的开头几行:

Grid Layout is a new layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions.

基本上，相关代码归结为:

.container {
  display: grid; /* 1 */
  grid-template-columns: repeat(3, 80px); /* 2 */
  grid-template-rows: repeat(2, 80px); /* 2 */
  margin: 20px;
}

1) 使容器元素成为网格容器

2) 设置 3 列 2 行的网格，给定长度(这里是 80px)。

然后对于每个“ block ”变体 - 只需使用 grid-column 和 grid-row 属性设置每个 block 的跨度。

例如:

horizontal, a 2 x 1 block

变成:

.horizontal {
  grid-column: span 2;
  grid-row: span 1;
}

请注意，默认情况下，网格项将跨越一列和一行 - 因此不需要定义“方形” block 。

.container {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  grid-template-rows: repeat(2, 80px);
  margin: 20px;
}
@media (max-width: 1200px) {
  .container.supports-tablet {
    grid-template-columns: repeat(2, 80px);
    grid-template-rows: repeat(3, 80px);
  }
  .container.supports-tablet:after {
    content: "tablet view!!!";
    color: red;
  }
}
.container div {
  border: 1px solid blue;
  margin-left: -1px;
  margin-bottom: -1px;
}
.huge {
  grid-column: span 3;
  grid-row: span 2;
  
}
.big-square {
  grid-column: span 2;
  grid-row: span 2;
}

.horizontal {
  grid-column: span 2;
  grid-row: span 1;
}
.vertical {
  grid-column: span 1;
  grid-row: span 2;
}

<div class="container supports-tablet">
  <div class="horizontal">horizontal</div>
  <div>square</div>
  <div>square</div>
  <div class="horizontal">horizontal</div>
</div>

<div class="container">
  <div class="big-square">big-square</div>
  <div class="vertical">vertical</div>
</div>
<div class="container">
  <div class="vertical">vertical</div>
  <div class="horizontal">horizontal</div>
  <div class="horizontal">horizontal</div>
</div>
<div class="container">
  <div class="horizontal">horizontal</div>
  <div class="vertical">vertical</div>
  <div>square</div>
  <div>square</div>
</div>

<div class="container">
  <div class="huge">huge</div> 
</div>

<div class="container">
  <div class="vertical">vertical</div>
  <div>square</div>
  <div class="vertical">vertical</div>
  <div>square</div>
</div>

Codepen demo

---

注意:

要使上述布局具有响应性(对于平板电脑等)，您必须决定整个网格将如何更改以支持该布局。

请注意，在带有平板电脑 View 的示例图像中 - 网格从 3 X 2 切换为 2 X 3 - 这可以通过重新定义具有 2 列和 3 行的网格的媒体查询轻松完成。

---

浏览器支持 - Caniuse

目前支持 Chrome (Blink)、Safari 和 Firefox，IE 和 Edge 部分支持