html - 具有行和列跨度的 CSS 响应式网格

Question

我无法让响应式网格很好地处理行和列跨度。 我一直在尝试使用 bootstrap 来实现这一点，但也尝试使用 native 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

您可以使用新的网格布局规范轻松完成此操作。

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

这里有一些关于网格的更多信息:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout