CSS网格：分数内的分数 [英] CSS Grid: fractions within fractions

问题描述

我正在构建一个仪表板，并希望使用CSS网格。我设置了一个4列网格。在第三行中，我需要2个项目跨越1.5列。

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

  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];背景颜色：#fff;颜色：＃444; } .box {background-color：＃444;颜色：#fff; border-radius：5px;填充：20px;字体大小：150％； } .a {grid-column：col1-start / col4-start;网格行：row1-start; } .b {grid-column：col4-start / col4-end;网格行：row1-start / row5-start; } .c {grid-column：col1-start / col4-start;网格行：row2-start; } .d {grid-column：col1-start / col2-start;网格行：row3-start / row5-start; } .e {grid-column：col3-start;网格行：row3-start / row5-start; } .f {grid-column：col1-start / col4-end;网格行：row5-start; } .g {grid-column：col1-start / col2-start;网格行：row6-start; } .h {grid-column：col2-start / col3-start;网格行：row6-start; } .j {grid-column：col3-start / col4-start;网格行：row6-start; } .k {grid-column：col4-start / col4-end;网格行：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>  

解决方案

将列数加倍，您将具有更好的灵活性。您还可以简化代码来放置如下元素：

  .wrapper {边距：40px;显示：网格； grid-gap：5px; grid-template-columns：repeat（8，1fr）; grid-template-rows：.75fr 2fr 4fr 1fr 1fr 1fr;}。box {background-color：＃444;颜色：#fff; border-radius：5px;填充：20px;字体大小：150％；}。a，.c {grid-column：span 6; / * 6列* /}。b {grid-column：span 2; / * 2列* / grid-row：范围4； / * 4行* /}。d，.e {grid-column：span 3; / * 3列* / grid-row：span 2; / * 2行* /}。f {格栏：1 / -1; / *全宽* /}。g，.h，.j，.k {格栏：跨度2； / * 2列* /}  

 < div class = 包装> < 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>  

I am building a dashboard and would like to use CSS-grid. I have set a 4 column grid. Within the 3rd row I need 2 of the items to span 1.5 columns.

How do I make D and E equal width so they each take up half of the available space where they are together equal the width of C? Do I need to create a different column structure? 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>

解决方案

Double the number of the columns and you will have better flexbility. You can also simplify your code to place element like below:

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

这篇关于CSS网格：分数内的分数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！