CODEWITHSUNDEEP
csscss-grid
Max T
Max T

Reputation: 1455

CSS grid - struggling with uneven columns

Trying to style these columns and can't figure it out how to do this with CSS grid, either one or the other column always goes off the grid. Does anyone suggest a clean solution?

enter image description here

Upvotes: 1

Views: 3420

Answers (1)

Matan Sanbira
Matan Sanbira

Reputation: 1513

adding a px column in the middle and should work.

POC:

.container {
  display: grid;
  grid-template-columns: [c1] 1fr [c2] 30px [c3] 1fr [c4] 1fr [c5];
  grid-template-rows: [r1] 100px [r2] 100px [r3];
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  padding: 10px
}

div {
  border: solid 1px;
}

.a {
  grid-column: c1 / c2;
  grid-row: r1 / r2;
}

.b {
  grid-column: c2 / c4;
  grid-row: r1 / r2;
}

.c {
  grid-column: c4 / c5;
  grid-row: r1 / r3;
  background: black;
}

.d {
  grid-column: c1 / c3;
  grid-row: r2 / r3;
}

.e {
  grid-column: c3 / c4;
  grid-row: r2 / r3;
}
<div class="container">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
  <div class="d"></div>
  <div class="e"></div>

</div>

Upvotes: 1

Related Questions