CSS 网格 : fractions within fractions

Question

我正在构建仪表板并想使用 CSS-grid。我设置了一个 4 列网格。在第 3 行中，我需要 2 个元素来跨越 1.5 列。

如何使 D 和 E 的宽度相等，以便它们各自占据可用空间的一半，使它们合在一起等于 C 的宽度？我需要创建不同的列结构吗？ Codepen

body {
  margin: 40px;
}

.wrapper {
		display: grid;
    grid-gap: 5px;
		grid-template-columns: [col1-start] 1fr  [col2-start] 1fr [col3-start] 1fr [col4-start] 1fr [col4-end];
		grid-template-rows: [row1-start] .75fr [row2-start] 2fr [row3-start] 4fr [row4-start] 1fr [row5-start] 1fr [row6-start] 1fr [row6-end];
		background-color: #fff;
		color: #444;
	}

	.box {
		background-color: #444;
		color: #fff;
		border-radius: 5px;
		padding: 20px;
		font-size: 150%;

	}

	.a {
		grid-column: col1-start / col4-start;
		grid-row: row1-start ;
	}
	.b {
		grid-column: col4-start / col4-end ;
		grid-row: row1-start / row5-start;
	}
	.c {
		grid-column: col1-start / col4-start;
		grid-row: row2-start ;
	}
	.d {
		grid-column: col1-start / col2-start ;
		grid-row: row3-start / row5-start ;
	}

  .e {
    grid-column: col3-start ;
    grid-row: row3-start / row5-start  ;
  }
  
  .f {
    grid-column: col1-start / col4-end;
    grid-row: row5-start ;
  }

  .g {
     grid-column: col1-start / col2-start;
      grid-row: row6-start ;
  }

  .h {
    grid-column: col2-start / col3-start;
        grid-row: row6-start ;
  }

   .j {
    grid-column: col3-start / col4-start;
        grid-row: row6-start ;
  }

.k {
    grid-column: col4-start / col4-end;
        grid-row: row6-start ;
  }

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box j">J</div>
  <div class="box k">K</div>
</div>

Answer 1

将列数加倍，您将拥有更好的灵 active 。您还可以简化代码以放置如下元素:

.wrapper {
  margin: 40px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows:  .75fr  2fr  4fr  1fr  1fr  1fr ;
}
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}
.a, .c{
  grid-column:span 6; /* 6 columns */
}

.b {
  grid-column: span 2; /* 2 columns */
  grid-row: span 4; /* 4 rows */
}

.d, .e{
  grid-column:span 3; /* 3 columns */
  grid-row:span 2; /* 2 rows */
}

.f {
  grid-column: 1/-1; /* Full width */
}

.g, .h, .j, .k{
  grid-column: span 2; /* 2 columns */
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box j">J</div>
  <div class="box k">K</div>
</div>