CSS сетка - борется с неровными колоннами

Question

Попытка стилизовать эти столбцы и не может понять, как это сделать с сеткой CSS, либо один, либо другой столбец всегда уходит из сетки. Кто-нибудь предлагает чистый раствор?

Answer 1

добавление столбца px в середине и должно работать.

PO C:

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

Answer 2

Постарайтесь поместить все столбцы и строки в одно основное деление.

Также вы можете использовать сетку bootstrap,
Это сэкономит вам много времени.

Вы можете увидеть документацию на их официальном сайте.
* Официальный сайт 1023 *

А вот пояснение к сетке bootstrap:
Bootstrap объяснение сетки

Если вы используете JS framework (Angular / React / et c),
Не забудьте прочитать документацию о том, как установить bootstrap в свои рамки