Question

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

我可以有5种类型的块：

巨大，3 x 2块
大方块，2 x 2块
水平，2 x 1块
垂直，1 x 2块
square，1 x 1 block。

在这张图片中，我展示了一些变体，而右边的是＃34;平板电脑＆＃34;版。

我必须使用代码生成网格，所以我不想创建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;
}

使用浮点数我必须为每个块定义一个ID，以便在一个方向上处理1个像素空间，并且我还有很多媒体查询来使这个网格响应。

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

以下是Codepen

Answer 1

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

从the spec开头：

网格布局是一种新的CSS布局模型，具有强大的功能控制盒子及其内容的大小和位置。与Flexible Box Layout不同，它是面向单轴的网格布局针对二维布局进行了优化：那些对齐的两个方面都需要内容。

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

.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）。

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

例如：

水平，2 x 1块

变为：

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

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

.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

<强> NB：

要使上述布局响应（对于平板电脑等），您必须决定整体网格将如何更改以支持该布局。

请注意，在平板电脑视图的一个示例图像中 - 网格从3 X 2切换到2 X 3 - 这可以通过媒体查询轻松完成，该查询重新定义了包含2列和3行的网格。

浏览器支持 - Caniuse

目前受Chrome（Blink），Safari和Firefox支持，得到IE和Edge的部分支持

Answer 2

因此，Flexbox确实是这种网格系统的前进方向。我已经为你做了一支笔，看看它是如何运作的。

第一行显示相等的列，第二行和第三行分为3列。（查看课程one和two是如何制作的，你应该自己完成其余的工作）

https://codepen.io/Aotik/pen/BZyLBe

这是受我的框架Blossom的启发。您可以在此处查看有关Blossom网格系统的更多信息http://getblossom.io/design/grid

Answer 3

好吧，我发现了一个simple Grid code。这样将为所有显示创建三个或更多响应的网格项目。

<style>
/* Mobile first */
.grid {
  float: left;
  width: 100%;
}
/* Responsive column widths */
@media (min-width: 700px) {
  /* For Mobile three grid */
  .grid {
    width: 33.33333%;
  }
}
.wrapper {
  margin-bottom: 60px;
}
.wrapper:before,
.wrapper:after{
  content: ' ';
  display: grid;
  clear: both;
}
/* Main Style Begin's */
.grid {
  background-color: #8f1558;
  color: white;
  padding: 50px;
  box-sizing: border-box;
  moz-box-sizing: border-box;
  text-align: center;
}
.grid:nth-child(3n - 2) {
  background-color: #54158f;
}
.grid:nth-child(3n) {
  background-color: #8a0e37;
}
  <style>

<div class="wrapper">
  <div class="grid"><h1>WELCOME FIRST GRID</h1></div>
  <div class="grid"><h1>WELCOME SECOND GRID</h1></div>
  <div class="grid"><h1>WELCOME THIRD GRID</h1></div>
</div>

要添加更多网格，只需在第一个结束<div>内放置一个</div>，然后在移动媒体查询中调整宽度大小即可。假设如果我需要4格，那么我将放置25％而不是33.333％进行响应。祝好运。

创建此响应式css网格的更智能方法

3 个答案:

Codepen demo

浏览器支持 - Caniuse