What is a Grid Item
A grid item is a child element that is present inside a grid container. Inside a container by default, there is one item present for each column, in each row. However, you can span grid items across numerous rows and columns.
There are numerous properties associated with a grid item that defines its characteristics. We have explained these properties below.
Grid Item Properties
Properties linked to a grid item are explained in detail below.
grid-row-start Property
As the name suggests, this property states in which row the grid item will start displaying.
Syntax
Parameters explained
auto: This is a default value that places items according to the flow of the grid.
row-line: It states on which row the item will start showing.
Example
Suppose you want to place a specific item in the first row of the container here is how it is done.
HTML
In order to generate a grid container we have created a div element having class “container items” and to place certain grid items inside that container we have nested six div elements inside the grid container div each having a different class.
CSS
display: grid;
grid-template-columns: 200px 200px 200px;
grid-gap: 5px;
background-color: sandybrown;
padding: 10px;
}
.three {
grid-row-start: 1;
}
In the above code, we are first of all assigning the larger div a grid display to make it a grid container then we are specifying that there are three columns in the grid each having a width of 200px and has a gap of 5px. The container has also been given some background color and padding. Lastly, we are stating that the third item will be displayed at the beginning of row 1.
CSS
background-color: bisque;
padding: 20px;
text-align: center;
font-size: 35px;
}
Now using some basic CSS properties we are styling our items that are present inside the container.
Output
Item 3 has been placed at the start of row 1.
grid-column-start Property
To specify in which column the grid item will start displaying, the grid-column-start property is used.
Syntax
Parameters explained
auto: This is a default value that places items according to the flow of the grid.
span-n: It states the number of columns the item shall span.
column-line: It defines in which column the item will begin showing.
Example
Suppose you want to place a specific grid item on a specific column.
CSS
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-gap: 5px;
background-color: sandybrown;
padding: 10px;
}
.one {
grid-column-start: 2;
}
In the above code, we have made four columns each with a 200px width and then using the grid-column-start property we are placing item 1 in column 2.
Output
Item 1 has been successfully placed in column 2.
grid-row-end Property
This property states on which row the grid item will end displaying, or the number rows a grid item will span.
Syntax
Parameters explained
auto: This is a default value that makes an item span a single row only.
span-n: It states the number of rows the item shall span.
row-line: It defines on which row the item will end displaying.
Example
Let’s make an item span across 2 rows.
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-gap: 5px;
background-color: sandybrown;
padding: 10px;
}
.one {
grid-row-end: span 2;
}
In the above code, we are making item 1 span across 2 rows by using the grid-row-end property.
Output
The item has successfully been spanned across two rows.
grid-column-end Property
This property states on which column the grid item will end displaying, or the number columns a grid item will span.
Syntax
Parameters explained
auto: This is a default value that makes an item span a single column only.
span-n: It states the number of columns the item shall span.
column-line: It defines on which column the item will end displaying.
Example
Let’s make an element span across two columns.
CSS
grid-column-end: span 2;
}
The above code states that item 1 will span across two columns.
Output
Item 1 is spanning across two columns.
grid-row Property
For the purpose of defining the location and size of a grid item, the grid-row property is used. Moreover, it is a shorthand property for the properties mentioned below.
- grid-row-start
- grid-row-end.
Syntax
Parameters explained
grid-row-start: It states on which row the item will start showing.
grid-row-end: It defines on which row the item will end showing.
Example
Consider the example below.
CSS
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 5px;
background-color: sandybrown;
padding: 10px;
}
.two {
grid-row: 1 / span 2;
}
In the above code we have stated that item 2 will be placed in row 1 and will be span across 2 rows. Meanwhile, the grid has four columns each with an auto width.
Output
The shorthand property has been implemented properly.
grid-column Property
In order to describe the position and width of a grid item, the grid-row property is used. Moreover, it is a shorthand property for the properties listed here.
- grid-column-start
- grid-column-end.
Syntax
Parameters explained
grid-column-start: It states on which column the item will start showing.
grid-column-end: It defines on which column the item will end showing.
Example
Here is an example of this property.
CSS
grid-column: 2 / span 2;
}
The code above states that item 1 will be placed in column 2 and will span across 2 columns.
Output
The property is working properly.
grid-area Property
This property is used to define the location and size of a grid item or give a certain name to a grid item which is then referred to by the grid-template-areas property. Furthermore, it is a shorthand property for the properties mentioned below.
- grid-row-start
- grid-row-end
- grid-column-start
- grid-column-end
Syntax
Parameters explained
grid-row-start: This value states where to start displaying an item in a row.
grid-column-start: It states where to start displaying an item in a column.
grid-row-end: It describes where to stop showing items in a row, or how many rows to span.
grid-column-end: It describes where to stop showing items in a column, or how many columns to span.
item-name: This value states the grid item name.
Example
To understand the working of this property consider the following example.
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 5px;
background-color: sandybrown;
padding: 10px;
}
.seven {
grid-area: 2 / 1 / span 2 / span 3;
}
The above code states that there are four columns each with an auto width. Meanwhile, the seventh item in the grid will be placed in the second row, and first column, and span 2 rows, and 3 columns.
Output
The property was implemented successfully.
Conclusion
A grid item is a child element that is present inside a grid container. Inside a container by default, there is one item present for each column, in each row. To assign different characteristics to a grid item there are numerous properties associated with it such as grid-row, grid-column, grid-area, etc. This guide teaches you what a grid item is and how you can make these items behave a certain way using the related properties along with appropriate examples.
