У меня есть карта, созданная с помощью CSS Grid layout. Может быть изображение слева, текст справа вверху и кнопка или ссылка справа внизу.
В приведенном ниже коде, как я могу сделать так, чтобы зеленая область занимала как можно больше места, и в то же время синяя область должна занимать как можно меньше места?
Зеленый должен оттолкнуть синюю область как можно дальше.
https://jsfiddle.net/9nxpvs5m/
.grid {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-areas:
"one two"
"one three"
}
.one {
background: red;
grid-area: one;
padding: 50px 0;
}
.two {
background: green;
grid-area: two;
}
.three {
background: blue;
grid-area: three;
}
<div class="grid">
<div class="one">
One
</div>
<div class="two">
Two
</div>
<div class="three">
Three
</div>
</div>