Можно ли добавить отступ 1fr к элементу сетки в CSS?

#html #css #css-grid

#HTML #css #css-grid

Вопрос:

Я пытаюсь создать этот макет, используя сетку CSS.

Сама сетка и ее элементы отлично работают с помощью этой простой разметки и CSS:

 .grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 40px;
  color: white;
}

.grid__col { }

.grid__col.grid__col--a {
  grid-column: 1/span 6;
  background: navy;
}

.grid__col.grid__col--b {
  grid-column: 7/span 4;
  background: grey;
}

 <div class="grid">
  <div class="grid__col grid__col--a">A</div>
  <div class="grid__col grid__col--b">B</div>
</div>

Но есть одна проблема. Как вы можете видеть на скриншоте, содержимое внутри синего элемента должно иметь отступ, который является excatly 1fr (или даже 2fr с пробелом в столбцах и т. Д.).

Я знаю, что это subgrid произойдет, но на данный момент его поддерживает только Firefox 71. Я также попытался добавить еще одно поле с цветом фона, которое перекрывается с фактическим содержимым, например:

 .grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 40px;
  color: white;
}

.grid__col {
  grid-row: 1;
}

.grid__col.grid__col--c {
  grid-column: 1/span 6;
  background: navy;
}

.grid__col.grid__col--a {
  grid-column: 2/span 4;
}

.grid__col.grid__col--b {
  grid-column: 7/span 4;
  background: grey;
}

   <div class="grid">
    <div class="grid__col grid__col--c"></div>
    <div class="grid__col grid__col--a">A</div>
    <div class="grid__col grid__col--b">B</div>
  </div>

Проблема в том, что это поле всегда находится на высоте строки сетки и не похоже на фактическое содержимое. Это может быть проблемой, когда правый контейнер выше левого.

Есть ли способ добиться этого с помощью CSS grid?

Ответ №1:

Используйте calc() , и вы можете получить точное значение 1fr

 .grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 40px;
  color: white;
}

.grid__col { }

.grid__col.grid__col--a {
  grid-column: span 6;
  padding:0 calc((100% - 5*40px)/6);   /* 100% = 6fr   5 gaps ==> 1fr = (100% - 5 gaps)/6 */
  background: navy;
}

.grid__col.grid__col--b {
  grid-column: span 4;
  background: grey;
}

 <div class="grid">
  <div class="grid__col grid__col--a">A</div>
  <div class="grid__col grid__col--b">B</div>
</div>

1. Большое спасибо за обратную связь. Я уже пробовал это (при репликации сетки с помощью flexbox в другой попытке). Кажется, это единственное решение. Хотя это работает, это включает в себя некоторые сложные calc() вызовы, которые не являются идеальными для некоторых разрешений в браузерах Webkit. Также вам нужно создать множество классов, если вы хотите сделать его более универсальным. Жаль subgrid , что его еще нет. 😉