列跨CSS响应网格

Question

我很难得到一个响应性的网格，以很好地工作在行和列跨度。我一直试图通过引导来实现这一点，但也尝试使用本地CSS。

下面是我尝试使用CSS的一个很好的例子：

https://codepen.io/adrianpuescu/pen/PwRVej

这是我正在努力实现的网格的图像。

​

有没有办法调整代码以实现图像中的网格？我遇到的问题是如何使底层电网正常工作。

​

/* Optional */
html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
table {
  height: 100%;
}
.cell {
  background: #ddd;
  border: 5px solid #fff;
}
/* Optional */
[class*="col-"] {
  float: left;
}
.col-1 {
  width: 8.333333%;
}
.col-2 {
  width: 16.666666%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.333333%;
}
.col-5 {
  width: 41.666666%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.333333%;
}
.col-8 {
  width: 66.666666%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.333333%;
}
.col-11 {
  width: 91.666666%;
}
.col-12 {
  width: 100%;
}
.row-1 {
  height: 8.333333%;
}
.row-2 {
  height: 16.666666%;
}
.row-3 {
  height: 25%;
}
.row-4 {
  height: 33.333333%;
}
.row-5 {
  height: 41.666666%;
}
.row-6 {
  height: 50%;
}
.row-7 {
  height: 58.333333%;
}
.row-8 {
  height: 66.666666%;
}
.row-9 {
  height: 75%;
}
.row-10 {
  height: 83.333333%;
}
.row-11 {
  height: 91.666666%;
}
.row-12 {
  height: 100%;
}

<div class="row-12 col-6">      
  <div class="row-8 cell">row 1-2, cell 1</div>
  <div class="row-4 cell">row 1, cell 2</div>
</div>

<div class="row-12 col-6">
  
  <div class="row-12 col-6">
    <div class="row-4 cell">row 1, cell 1</div>
    <div class="row-8 cell">row 2-3, cell 2</div>
  </div>

  <div class="row-12 col-6">
    <div class="row-4 cell">row 1, cell 1</div>
    <div class="row-4 cell">row 2, cell 2</div>
    <div class="row-4 cell">row 3, cell 1</div>
  </div>

</div>

​

Answer 1

通过新的Grid布局规范，您可以很容易地完成这一任务。

​

.container {
  display: grid;
  grid-template-columns: repeat(1fr, 6);
  grid-template-rows: repeat(1fr, 6);
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  grid-template-areas:
    'col1 col1 col2 col2 col5 col5'
    'col1 col1 col2 col2 col5 col5'
    'col3 col3 col4 col4 col5 col5'
    'col3 col3 col4 col4 col5 col5'
    'col6 col8 col9 col9 col9 col9'
    'col7 col8 col9 col9 col9 col9';
}

[class^='col'] {
  background: pink;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.col1 { grid-area: col1; }
.col2 { grid-area: col2; }
.col3 { grid-area: col3; }
.col4 { grid-area: col4; }
.col5 { grid-area: col5; }
.col6 { grid-area: col6; }
.col7 { grid-area: col7; }
.col8 { grid-area: col8; }
.col9 { grid-area: col9; }

<div class="container">
  <div class="col1">1</div>
  <div class="col2">2</div>
  <div class="col3">3</div>
  <div class="col4">4</div>
  <div class="col5">5</div>
  <div class="col6">6</div>
  <div class="col7">7</div>
  <div class="col8">8</div>
  <div class="col9">9</div>
</div>

​

下面是关于Grid的更多信息：

布局

Answer 2

你可以把它做成桌子。在我的回答中，我已经将你们的部分划分为4行4列。列定义在<colgroup>标记中提供。如果您愿意，可以将这些样式推入CSS中。

​

/* Optional */
html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

table {
  width: 100%;
  height: 100%;
}

table td {
  background: #ddd;
  border: 5px solid #fff;
}

<table>
  <colgroup>
    <col style="width:16.66%">
    <col style="width:16.66%">
    <col style="width:33.33%">
    <col style="width:33.33%">
  </colgroup>
  <tbody>
    <tr>
      <td colspan=2>row 1, cell 1-2</td>
      <td>row 1, cell 3</td>
      <td rowspan=2>row 1, cell 4</td>
    </tr>
    <tr>
      <td colspan=2>row 2, cell 1-2</td>
      <td>row 2, cell 3</td>
    </tr>
    <tr>
      <td>row 3, cell 1</td>
      <td rowspan=2>row 3-4, cell 2</td>
      <td rowspan=2 colspan=2>row 3-4, cell 3</td>
    </tr>
    <tr>
      <td>row 4, cell 1</td>
    </tr>
  </tbody>
</table>

​

还有另一个问题：如何创建网格/Tile视图提倡使用jQuery砌体插件 (插件开销)、Flexbox (可能是复杂和混乱的)或列 (也可以是复杂的)。

如果这些解决方案适合您，则由您决定，但不可能像许多这样的问题中指出的那样只使用CSS浮点数。