#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. Почему бы не использовать
%
значение для заполнения?
Ответ №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
, что его еще нет. 😉