Разрешить строке сетки CSS заполнить доступное пространство
Я работаю с CSS-сетками и хочу, чтобы последняя строка моей CSS-сетки использовала все оставшееся пространство в оболочке, но в то же время я хочу, чтобы все остальные строки следовали стратегии min-content-strategy.
CSS для обертки:
.grid {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 100px auto;
grid-auto-rows: min-content;
row-gap: 7px;
justify-items: start;
align-items: start;
}
Моя первоначальная идея, как добиться этого, заключалась в том, чтобы просто добавить margin-top: auto к кнопке, как это можно сделать с помощью flexbox. Я также пытался установить grid-auto-rows: auto для оболочки сетки, но это тоже не работает.
Редактировать: Пример кода: https://jsfiddle.net/xt139o2g/ (я хочу, чтобы кнопка отображалась в правом нижнем углу div-оболочки)
.wrapper {
border: 1px solid blue;
height: 300px;
width: 250px;
padding: 10px;
}
.grid {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 100px auto;
grid-auto-rows: min-content;
row-gap: 7px;
justify-items: start;
align-items: start;
}
.button {
grid-column: 1 / -1;
justify-self: end;
align-self: end;
}<div class = "wrapper">
<div class = "grid">
<div>
R1C1
</div>
<div>
R1C2
</div>
<div>
R2C1
</div>
<div>
R2C2
</div>
<div class = "button">
Button
</div>
</div>
</div>Заранее спасибо!
Ответы 2
Вы можете использовать функцию repeat, чтобы установить для первых двух строк минимальное содержание:
grid-template-rows: repeat(2, min-content);
Затем используйте display: flex на .button и сдвиньте его содержимое в правый нижний угол с помощью justify-content и align-items:
display: flex;
align-items: flex-end;
justify-content: flex-end;
Демонстрация: (я добавил границы, чтобы продемонстрировать расстояние.)
.wrapper {
border: 1px solid blue;
height: 300px;
width: 250px;
padding: 10px;
}
.grid {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 100px auto;
grid-template-rows: repeat(2, min-content);
row-gap: 7px;
}
.grid>div {
width: 100%;
height: 100%;
border: 1px solid;
}
.button {
display: flex;
align-items: flex-end;
justify-content: flex-end;
grid-column: 1 / -1;
}<div class = "wrapper">
<div class = "grid">
<div>
R1C1
</div>
<div>
R1C2
</div>
<div>
R2C1
</div>
<div>
R2C2
</div>
<div class = "button">
Button
</div>
</div>
</div>Спасибо! Это действительно решает проблему, но я бы предпочел более динамичное решение, в котором можно обращаться только к последней строке, можно ли использовать что-то вроде grid-template-rows: repeat(rows-1, min-content);?
Я не думаю, что есть тривиальный способ добиться этого, но вы можете приблизиться к нему, как показано ниже:
.wrapper {
display:inline-block;
border: 1px solid blue;
height: 300px;
width: 200px;
padding: 10px;
}
.grid {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 100px auto;
grid-template-rows:repeat(100,min-content) 1fr; /* big number here*/
}
.grid *:not(:last-child) {
margin-bottom:7px; /* replace the gap */
}
.button {
grid-column: 1 / -1;
grid-row: 101; /* place it at the 1fr template */
margin:auto 0 0 auto;
}<div class = "wrapper">
<div class = "grid">
<div>
R1C1
</div>
<div>
R1C2
</div>
<div>
R2C1
</div>
<div>
R2C2
</div>
<div class = "button">
Button
</div>
</div>
</div>
<div class = "wrapper">
<div class = "grid">
<div>
R1C1
</div>
<div>
R1C2
</div>
<div class = "button">
Button
</div>
</div>
</div>
<div class = "wrapper">
<div class = "grid">
<div>
R1C1
</div>
<div>
R1C2
</div>
<div>
R1C1
</div>
<div>
R1C2
</div>
<div>
R1C1
</div>
<div>
R1C2
</div>
<div>
R1C1
</div>
<div>
R1C2
</div>
<div class = "button">
Button
</div>
</div>
</div>
Можете ли вы добавить рабочий фрагмент?