Search code examples
csscss-grid

CSS Grid: fractions within fractions

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

enter image description here

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>

Solution

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