Свойство grid-column-start - начальная позиция элемента в столбце
Свойство grid-column-start задает
начальную позицию элемента в гриде или сетке
по столбцам. Значением свойства может
быть положительное или отрицательное число.
Если задаем положительное число,
то начальная позиция элемента отсчитывается слева
направо. При указании отрицательного числа элемент
будет располагаться в обратном порядке,
т.е. справа налево.
Синтаксис
селектор {
grid-column-start: положительное или отрицательное число;
}
Пример
Давайте зададим элементам в гриде начальные позиции:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
padding: 10px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-column-start: 1;
}
#elem2 {
grid-column-start: 2;
}
#elem3 {
grid-column-start: 3;
}
:
Пример
А теперь давайте в свойстве grid-column-start
укажем отрицательные числа:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
</div>
#parent {
display: grid;
padding: 10px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-column-start: -1;
}
#elem2 {
grid-column-start: -2;
}
#elem3 {
grid-column-start: -3;
}
:
Пример
А теперь с помощью
свойства grid-column-end
делаем так, чтобы первый, второй и третий элементы
располагались в первом ряду.
А четвертый элемент
занимал весь второй ряд:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
padding: 10px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-column-start: 1;
grid-column-end: 2;
}
#elem2 {
grid-column-start: 2;
grid-column-end: 3;
}
#elem3 {
grid-column-start: 3;
grid-column-end: 4;
}
#elem4 {
grid-column-start: 1;
grid-column-end: 4;
}
:
Пример
При перекрытии столбцов, занимаемых соседними элементами, каждый последующий элемент сдвигается на ряд ниже. Давайте с учетом этой возможности сделаем так, чтобы первый элемент расположился в первом ряду, второй - во втором, а третий и четвертый - заняли третий ряд:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
</div>
#parent {
display: grid;
padding: 10px;
border: 2px solid #696989;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
#elem1 {
grid-column-start: 1;
grid-column-end: 4;
}
#elem2 {
grid-column-start: 2;
grid-column-end: 3;
}
#elem3 {
grid-column-start: 1;
grid-column-end: 2;
}
#elem4 {
grid-column-start: 3;
grid-column-end: 4;
}
:
Смотрите также
-
свойство
grid-column-end,
которое задает конечную позицию элемента в гриде по столбцам -
свойство
grid-column,
которое задает начальную и конечную позиции элемента в гриде по столбцам -
свойство
grid-template-columns,
которое задает количество и ширину столбцов в гриде -
свойство
grid-auto-columns,
которое задает количество и ширину столбцов в неявном гриде