Невозможно добиться разметки сетки с помощью сетки CSS [дубликат]
Нет, если у вас нет универсального базового типа ValuePair с ValuePair<T> : ValuePair (он также будет работать для интерфейса) или используйте List<object>. На самом деле это работает разумно:
public abstract class ValuePair
{
public string Name { get; set; }
public object Value
{
get { return GetValue(); }
set { SetValue(value); }
}
protected abstract object GetValue();
protected abstract void SetValue(object value);
}
public class ValuePair<T> : ValuePair
{
protected override object GetValue() { return Value; }
protected override void SetValue(object value) { Value = (T)value; }
public new T Value { get; set; }
}
2 ответа
Обратите внимание на использование grid-row-start и grid-column-end - они относятся к линиям сетки . Здесь у вас 8 столбцов - поэтому линий сетки пронумерованы от 0 до 9. См. Исправленную демонстрацию ниже:
.wrapper {
display: grid;
grid-gap: 15px;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: repeat(8, 1fr);
}
.wrapper .first_box {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 9; /* CHANGED */
}
.wrapper .second_box {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 5; /* CHANGED */
}
.wrapper .third_box {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 5; /* CHANGED */
}
.wrapper .fourth_box {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 5; /* CHANGED */
grid-row-end: 9; /* CHANGED */
}
.wrapper .fifth_box {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 5; /* CHANGED */
grid-row-end: 9; /* CHANGED */
}
.wrapper div {
border: 2px solid rgb(233,171,88);
border-radius: 5px;
background-color: rgba(233,171,88,.5);
padding: 1em;
color: #d9480f;
}<div class="wrapper">
<div class="first_box">
First Box
</div>
<div class="second_box">
Second Box
</div>
<div class="third_box">
Third Box
</div>
<div class="fourth_box">
Fourth Box
</div>
<div class="fifth_box">
Fifth Box
</div>
</div> Переходя к различиям , когда вы расширяете first-column на разные строки, так как вы указали 1fr только для каждой строки, и вы не устанавливайте высоту для контейнера сетки , потребуется height, который алгоритм размещения сетки сочтет нужным.
Но если вы внимательно посмотрите, вы можете увидеть шаблон - самый маленький блок занимает столько же места, сколько его содержимое. Таким образом, мы можем говорить отношения здесь.
Распределение оставшегося пространства происходит после того, как все негибкие функции определения размера дорожки достигли своего максимума. Общий размер таких строк или столбцов вычитается из доступного пространства, в результате получается оставшееся пространство , которое затем делится между строками и столбцами гибкого размера пропорционально их коэффициенту изгиба .
MDN - акцент выше - мой.
В первом случае первый и третий столбцы имеют соотношение высот 3: 1, а второй столбец занимает 6 строк. ( 1 в соотношении 3: 1 представляет собой ящик, принимающий высоту столько же, сколько его содержимое)
Аналогично во втором случае , однако первый и третий столбцы имеют соотношение высот 3: 3, а второй столбец занимает 6 строк. Соотношение может упроститься до 1: 1 для первого и третьего и 2 для второго столбца.
, поэтому ваш вопрос заключается в том, почему боксы сжимаются, когда вы задаете свойства строки для нижних блоков.
Чтобы понять это, предположим, что сетка будет иметь минимальную высоту , которую можно построить в , это ключевая идея для определения размера сетки по умолчанию.
теперь в первом случае нижние блоки по умолчанию будут занимать 1 строку, а минимальный размер, необходимый для этой строки, будет размером текста, и, следовательно, нижние блоки будут иметь размер высоты текста (немного больше этого, но вы понимаете) Таким образом, одна строка в первом случае определяется высотой текста, и, следовательно, вышеупомянутые блоки больше, так как они занимают 3 строки.
СЕЙЧАС В ВТОРОМ СЛУЧАЕ
, когда вы также назначаете 3 строки нижним полям, теперь минимальная высота, требуемая для 3 строк, равна высоте текста, а нижние 3 строки принимают высоту, равную тексту, и, следовательно, верхние блоки также охватывают 3 строки имеют уменьшенную высоту, которая определяется высотой текста. Теперь
о поведении размеров можно прочитать здесь https://www.w3.org/TR/css-grid-1/#intrinsic-sizes.