В каскадных таблицах стилей (CSS) с использованием CSS Grid Layout есть два способа указать, на сколько строк элемент должен распространяться по вертикали: grid-row: 3 и grid-row: span 2. Давайте рассмотрим разницу между ними.
1. grid-row: 3
Когда вы устанавливаете grid-row на определенное число, например, 3, вы указываете ячейку сетки, которой принадлежит элемент. Это означает, что элемент будет занимать только одну строку - третью в сетке. Все другие элементы, которые выставлены в ту же строку или любую другую, будут размещены рядом с ним по горизонтали. Ниже приведен пример:
<div class="grid-container"> <div class="item1">Ячейка 1</div> <div class="item2">Ячейка 2</div> <div class="item3">Ячейка 3</div> </div>
.grid-container {
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.item3 {
grid-row: 3;
}
В этом примере элемент с классом item3 будет занимать только третью строку сетки. Он будет отображаться на том же горизонтальном уровне, что и другие элементы, занимающие ту же строку.
2. grid-row: span 2
Когда вы используете grid-row: span 2, вы указываете, что элемент должен охватывать несколько строк. В приведенном ниже примере элемент с классом item3 будет распространяться на две строки - третью и четвертую в сетке.
<div class="grid-container"> <div class="item1">Ячейка 1</div> <div class="item2">Ячейка 2</div> <div class="item3">Ячейка 3</div> </div>
.grid-container {
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.item3 {
grid-row: span 2;
}
В этом случае элемент с классом item3 будет занимать и третью и четвертую строку сетки. Остальные элементы будут сдвинуты вниз, чтобы уступить место элементу, распространяющемуся на несколько строк.
Таким образом, основная разница между grid-row: 3 и grid-row: span 2 заключается в том, что первый указывает на конкретную строку, которую должен занимать элемент, в то время как второй указывает на количество строк, которые должен заполнять элемент.