Удаление зазоров сетки

Question

У меня есть div с элементами, выровненными в виде строки, это класс css для него:

.myRow {
  display: grid;
  grid-template-columns: 0.1fr 0.1fr 2fr 3fr 2fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: center;
  padding: 10px;
}

<div class="myRow">
  <div style="color:blue; width: 5px;">aa</div>
  <div style="color:red;">bb</div>
  <div style="color:green;">ccc</div>
  <div style="color:orange;">ddd</div>
  <div style="color:purple;">eee</div>
</div>

Я хочу иметь возможность удалить первые два пробела и сохранить оставшиеся пробелы, например, как работает grid-template-columns.

Возможно ли это сделать с помощью сетки?

Редактировать: я хочу, чтобы это было так:

Answer 1

Вы не можете установить несколько размеров для сетки разрыва.Свойства column-gap и row-gap (ранее grid-column-gap и grid-row-gap) принимают только одно значение.

Этот вопрос подробно рассматривается здесь:

• Установка разной длины для промежутков сетки в CSS Grid

---

Псевдо-элементы, примененные к контейнеру сетки, считаются элементами сетки.

Это поведение объясняется здесь:

• псевдоэлемент, действующий как элемент сетки в сетке CSS

---

Свойство order можно использовать для переупорядочения элементов сетки на экране.

Подробнеездесь:

• Рассмотрим свойство order гибких и сеточных макетов

---

Взятые в комбинации, вы можете создать разрывы столбцов- их всего два - с псевдоэлементами ::before и ::after, расположите их с помощью свойства order и избавьтесь от правила grid-column-gap.

.myRow {
  display: grid;
  grid-template-columns: 0.1fr 0.1fr 2fr auto 3fr auto 2fr;
  justify-content: center;
  padding: 10px;
}

.myRow::before {
  content: "";
  width: 10px;
  background-color: white;
}

.myRow::after {
  content: "";
  width: 10px;
  background-color: white;
}

.myRow > :nth-child(1) { order: -3; }
.myRow > :nth-child(2) { order: -2; }
.myRow > :nth-child(3) { order: -1; }
.myRow > :nth-child(5) { order: 1; }

.myRow > div {
  background-color: lightgray;
}

<div class="myRow">
  <div style="color:blue;">aa</div>
  <div style="color:red;">bb</div>
  <div style="color:green;">ccc</div>
  <div style="color:orange;">ddd</div>
  <div style="color:purple;">eee</div>
</div>

Вот еще немного о том, как это работает:

Поскольку значение по умолчанию для свойства order равно 0, а элементызатем размещаются в исходном порядке, вот как браузер видит приведенный выше код псевдокласса nth-child:

.myRow > :nth-child(1) { order: -3; }
.myRow > :nth-child(2) { order: -2; }
.myRow > :nth-child(3) { order: -1; } /*
.myRow > ::before      { order: 0; }
.myRow > :nth-child(4) { order: 0; }
.myRow > ::after       { order: 0; } */
.myRow > :nth-child(5) { order: 1; }

Answer 2

Добавить отрицательное правое поле , значение которого равно разрыву сетки

.myRow {
  display: grid;
  grid-template-columns: 0.1fr 0.1fr 2fr 3fr 2fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: center;
  padding: 10px;
}

.margin {
  margin-right: -10px
}

<div class="myRow">
  <div class="margin" style="color:blue; width: 5px; ">aa</div>
  <div class="margin" style="color:red;">bb</div>
  <div style="color:green;">ccc</div>
  <div style="color:orange;">ddd</div>
  <div style="color:purple;">eee</div>
</div>