У меня есть макет с тремя столбцами и двумя строками - столбцы должны быть фиксированного размера, но я бы grid-column-gap
между столбцами был отзывчивым, но не должен быть ниже минимального размера.Я пытался использовать что-то вроде следующего, но minmax
, похоже, здесь не работает (моя IDE тоже помечает это как неправильное использование).Спасибо за любые подсказки!
.mainGrid-main {
max-width: $max-width;
width: $max-width;
grid-column-gap: minmax(76px, 1fr);
grid-row-gap: 89px;
margin: 50px auto;
display: grid;
justify-content: center;
grid-template-columns: repeat(3, $cardWidth);
grid-template-rows: repeat(2, 1fr);
grid-template-areas: '0 1 2' '3 4 5';
$areas: 0, 1, 2, 3, 4, 5;
@each $area in $areas {
.mainGrid--card-#{$area} {
grid-area: #{$area};
}
}
}