Может ли "подсчет промежутков" начинаться в неявной сетке?
Нет, мы начинаем с учетом явной сетки и никогда неявной сетки. Сосредоточьтесь на слове start , которое является наиболее важным, потому что явная сетка всегда является ссылкой, а неявная сетка - только результат создания дополнительного столбца / строки, чтобы содержать все.
Как я объяснил здесь , мы не можем рассматривать неявную сетку, потому что мы легко столкнемся с неопределенным поведением.
Начало рассмотрения явной сетки не обязательно означает, что мы будем находиться внутри явной сетки. Прочитайте до конца, чтобы узнать эту часть.
Из спецификации :
Нумерация c индексы в свойствах размещения сетки считать от краев явной сетки . Положительные индексы отсчитываются со стороны начала (начиная с 1 для самой явной строки начала), а отрицательные индексы отсчитываются со стороны конца (начиная с -1 для самой явной строки конца).
И
Когда элементы сетки расположены вне этих границ, контейнер сетки генерирует неявные дорожки сетки, добавляя неявные линии сетки в сетку ... ref
Давайте рассмотрим несколько примеров, чтобы лучше понять.
Вот таблица с 3-мя явными строками (4-мя строками) и без неявной строки создано:
.box {
display:grid;
grid-gap:5px;
grid-template-rows:repeat(3,50px);
grid-template-columns:repeat(3,1fr);
grid-auto-rows:200px; /* This wil never be used */
border:1px solid;
}
.a {
grid-row:span 2/3;
background:red;
}
.b {
grid-row:span 2/4;
background:red;
}
.c {
grid-row:1/4;
background:red;
}
<div class="box">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
.a заканчивается в строке 3 и занимает 2 строки. То же самое для .b, но заканчивается строкой 4. Для .c мы начинаем с 1 до 4.
Давайте создадим неявную сетку, сделав .c до 5
.box {
display:grid;
grid-gap:5px;
grid-template-rows:repeat(3,50px);
grid-template-columns:repeat(3,1fr);
grid-auto-rows:200px; /* This is used for the implicit row */
border:1px solid;
}
.a {
grid-row:span 2/3;
background:red;
}
.b {
grid-row:span 2/4;
background:red;
}
.c {
grid-row:1/5;
background:red;
}
<div class="box">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
Обратите внимание, что .a и .b не двигались, что в данном случае тривиально, потому что мы добавили линию внизу, поэтому не увидим любой трюк вокруг явной сетки.
Теперь давайте добавим неявную сетку в начале:
.box {
display:grid;
grid-gap:5px;
grid-template-rows:repeat(3,50px);
grid-template-columns:repeat(3,1fr);
grid-auto-rows:200px; /* This is used for the implicit row */
border:1px solid;
}
.a {
grid-row:span 2/3;
background:red;
}
.b {
grid-row:span 2/4;
background:red;
}
.c {
grid-row:span 4/4;
background:red;
}
<div class="box">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
Теперь это интересно, потому что мы видим, что .a и .b больше не начинаются с 3 и 4, учитывая неявную сетку, но они делают внутри явный!
Для .c мы начинаем со строки 4, но нам нужно 4 строк, а наша сетка содержит только 3, поэтому мы генерируем неявные строки и продолжаем отсчет там.
В основном, у нас есть следующие шаги:
- У нас есть явная сетка
- Мы помещаем элементы в явную сетку (мы начинаем подсчет). До сих пор не существует неявной сетки
- , мы начинаем считать, и если мы достигаем краев и больше нет строк, мы добавляем новые. Создана неявная сетка.
Другой пример:
.box {
display:grid;
grid-gap:5px;
grid-template-rows:repeat(3,50px);
grid-template-columns:repeat(3,1fr);
grid-auto-rows:10px; /* This is used for the implicit row */
border:1px solid;
}
.a {
grid-row: 2/span 6;
background:red;
}
.b {
grid-row:span 2/4;
background:red;
}
.c {
grid-row:span 4/4;
background:red;
}
<div class="box">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
Если вы проверяете код, вы можете легко визуализировать явную сетку (высота 50px для строк) и неявную (высота 20px для строк). Мы начинаем подсчет, учитывающий явную сетку, и можем закончить неявную.
В приведенном выше примере мы всегда начальный (или конечный) считается числом, которое мы можем легко идентифицировать в явной сетке, и только span больше. Давайте теперь рассмотрим случай, когда начальный (или конечный) также больше, чем строки, определенные в явной сетке.
.box {
display:grid;
grid-gap:5px;
grid-template-rows:repeat(3,50px);
grid-template-columns:repeat(3,1fr);
grid-auto-rows:10px; /* This is used for the implicit row */
border:1px solid;
}
.a {
grid-row: 1/span 2;
background:red;
}
.b {
grid-row:span 10/8;
background:red;
}
.c {
grid-row:span 2/4;
background:red;
}
<div class="box">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
В этом случае мы определили .b, чтобы он заканчивался на 8 и охватывался 10, но в явном виде нет строки 8 сетка. Затем мы создадим дополнительные неявные строки, чтобы получить строку 8, и отсчитаем оттуда и go вернем 10 строк.
Итак, мы начали подсчет с неявной сетки!?
Да и нет. Мы использовали явную сетку для подсчета линий, чтобы идентифицировать линию 8 (поэтому наша ссылка всегда является явной сеткой), затем, когда мы достигли края, мы добавили больше строк, чтобы достичь 8, затем из этой точки мы вернулись и создали больше неявные строки в начале.
Если мы рассмотрим конечный результат неявной сетки, мы не можем сказать, что мы начали подсчет с неявной сетки (вы можете ясно видеть, что это не строка 8 в неявной сетка, но последняя, строка № 11), но если мы рассмотрим тот факт, что линия 8 была создана внутри неявной сетки, то мы можем сказать, что нашей отправной точкой является неявная линия сетки.
Наша ссылка всегда явная сетка, чтобы идентифицировать начальную / конечную линию, но мы можем закончить тем, что наша линия станет неявной линией сетки, а не явной линией сетки.
box4 - это то, где вещи действительно становятся интересными. Он заканчивается на пятой строке строки, которая является , чтобы сказать вторую неявную линию сетки . Он охватывает три линии - и все же он начинается с той же линии сетки, что и box3. Это происходит потому, что пролеты должны начать подсчет в явной сетке . После запуска они могут продолжить работу в неявной сетке (как это произошло с box2), , но не могут начать считать в неявной сетке.
в книге написано «охватывает три строки» - не должно ли быть 4 или 2 строки?
Здесь речь идет о языке. Начиная с спецификации :
диапазон сетки
Сколько дорожек сетки элемент сетки занимает на каждой оси
Тогда
Дорожка сетки - это generi c термин для столбца сетки или строки сетки - другими словами, это пространство между двумя соседними линии сетки .
Таким образом, span 4 означает 4 строки или 4 столбца, что понятно, но если мы попытаемся использовать это со строками, это может быть неоднозначным, потому что у нас будет 5 задействованных линий, и наш элемент будет пересекать только 3 их и у нас 2 по краям. Может быть, книга ссылается на 3 средние строки и пропускает те, которые расположены по краям, когда говорится "охватывает три строки". Другими словами, элемент перекрывает (перекрывает) только 3 строки.