创建这个响应性css网格的更聪明的方法

Question

我被电网弄疯了。对于我的网站，我有一个固定大小的模块网格，3x2。在这个网格中，我可以分发一些块，没有空间，每个元素之间有1px边距。

我可以有5种类型的区块：

• 巨大，一个3x2街区
• 大方格，一个2x2街区
• 水平的，2x1块
• 垂直的，1×2块
• 广场，1x1街区。

在这张图中，我展示了一些变体，并对"tablet“版本进行了修改。

​

我必须使用代码生成网格，所以我不想创建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像素空间，而且我还有很多媒体查询来响应这个网格。

是否有更明智的方法来设计我的网格，也许使用柔性盒？

这是科德芬

Answer 1

CSS网格布局模块将是生成这些布局的完美工具。

从规格的开场白

网格布局是一种新的CSS布局模型，它具有强大的控制框及其内容的大小和位置的能力。与面向单轴的柔性盒布局不同，网格布局是针对二维布局进行优化的:在这两个维度中都希望内容对齐。

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

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

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

2)设置具有3列和2行给定长度的网格(此处为80 Set )。

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

例如：

水平的，2x1块

变成：

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

注意，默认情况下，网格项将跨越一列和一行，因此不需要定义'square‘块。

​

.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演示

NB:

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

注意，在一个具有tablet视图的示例映像中--网格从3X2切换到2X3--这可以很容易地通过媒体查询来完成，该查询用2列和3行重新定义网格。

浏览器支持- 卡尼乌斯

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

Answer 2

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

第一行显示相等的列，第二行和第三行被分割为3列。(查看类one和two是如何生成的，您应该自己解决其余的问题)

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

这是由我的框架，花的启发。您可以在这里看到更多关于Blossom网格系统的信息，http://getblossom.io/design/grid

Answer 3

我找到了一个简单网格代码。这将为所有显示创建三个或更多响应网格项。

​

<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%的响应。祝好运。