CSS-сетка создает пустые строки и столбцы
У меня есть сетка с 2 областями. Он отлично работает с grid-template-areas: "list details". Почему создается сетка 3x2, если я указываю только одну область: grid-template-areas: "list"? И почему он прикрепляет вторую область к нижней правой дорожке?
https://jsfiddle.net/o5txebkc/
#main {
display: grid;
grid-template-areas:
"list";
}
#main .list {
background: yellow;
grid-area: list;
}
#main .details {
background: green;
grid-area: details;
}<main id = "main">
<article class = "list">
<ul>
<li>one</li>
<li>two</li>
</ul>
</article>
<article class = "details">
<h3>Details</h3>
<p>
some details
</p>
</article>
</main>
Ответы 2
Попробуй это
#main {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
#main .list {
background: yellow;
}
#main .details {
background: green;
}<main id = "main">
<article class = "list">
<ul>
<li>one</li>
<li>two</li>
</ul>
</article>
<article class = "details">
<h3>Details</h3>
<p>
some details
</p>
</article>
</main>@InSync Я не согласен, но спасибо за ваш комментарий
@SteinTheRuler спасибо за ответ, но я действительно искал ПОЧЕМУ :) Я могу делать то, что мне нужно, но хотел бы понять логику CSS, если вы не укажете всех дочерних элементов в областях сетки-шаблона.
@DenisD вы не определяете какую-либо область сведений. Может быть, поэтому
@SteinTheRuler да, потому что я ожидал, что он будет скрыт, если он не определен в областях сетки-шаблона. Может быть, в документах есть что-то, говорящее, что все элементы сетки должны быть указаны...
Используя инструменты разработчика, чтобы выделить сетку и показать линии, я вижу, что «детали» расположены за пределами явной сетки. (Обратите внимание на отрицательные номера строк.) Это поведение изменится, если вы удалите grid-area: details; из правила класса .details { }.
Поскольку вы определили область сетки для «деталей», но не указали для нее явную позицию в сетке, она помещается в неявную сетку в ближайшую строку и столбец, где она не касается именованных строк.
- Явная сетка: создана с использованием grid-template[-*].
- Неявная сетка: расширяет заданную явную сетку, когда содержимое размещается за пределами этой сетки, например, в строки, путем рисования дополнительных линий сетки.
Мы также можем считать в обратном направлении от блочного и встроенного конца сетки... Эти строки могут быть адресованы как -1, и вы можете считать в обратном направлении от там – поэтому предпоследняя строка равна -2. Стоит отметить, что final line является последней строкой явной сетки... и не принимает во внимание учитывать любые строки или столбцы, добавленные в неявную сетку за пределами что.
Если имя задано как <custom-ident>, будут доступны только строки с этим именем. подсчитано. Если существует недостаточно строк с таким именем, вся неявная сетка предполагается, что линии имеют это имя с целью нахождения этого позиция.
Вы можете быть на что-то здесь. Однако я четко вижу вертикальные линии 1,2,3,4 и горизонтальные линии 1,2,3,4 (3 и 4 свернуты в одну). pasteboard.co/KitFbtOeEYwW.png
Но обратите внимание на номера строк. «списки» заканчиваются на -1, а «детали» начинаются на 0
Я вижу, что ты говоришь. Трудно понять эти номера линий сетки. По сути, мораль этой истории такова: если у вас есть название области, вам лучше использовать его или приготовиться к экзотическому позиционированию.
Я отредактировал свой ответ, чтобы добавить ясности. В моем предыдущем комментарии я ошибся, сказав, что «подробности» начинаются в строке 0. Явная сетка начинается в строке 1 и заканчивается в строке -1 (для обратного счета). Все, что за ее пределами, является неявной сеткой.
ОП спрашивает «почему», а не «как». Между прочим, ответ без объяснения - довольно плохой ответ.