grid-column-start property
The grid-column-start property
specifies a starting position of an element
in a grid or column grid. The property value
can be a positive or negative number. If we
specify a positive number, then the starting
position of the element is counted from left
to right. If you specify a negative number,
the element will be placed in the reverse
order, i.e. from right to left.
Syntax
selector {
grid-column-start: positive or negative number;
}
Example
Let's give the elements in the grid start positions:
<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;
}
:
Example
Now let’s specify negative numbers in
the grid-column-start property:
<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;
}
:
Example
And now, using the
grid-column-end
property, we make sure that the first,
second and third elements are located
in first row. And the fourth element
occupied the entire second row:
<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;
}
:
Example
When columns occupied by adjacent elements overlap, each subsequent element is moved one row lower. Let's take this possibility into account so that the first element is located in the first row, the second - in the second, and the third and fourth - occupy the third row:
<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;
}
:
See also
-
the
grid-column-endproperty
that specifies an ending position of an element in grid by columns -
the
grid-columnproperty
that specifies a starting and ending positions of an element in a grid by columns -
the
grid-template-columnsproperty
that specifies a number and width of columns in a grid -
the
grid-auto-columnsproperty
that specifies a number and width of columns in an implicitly-created grid