Let’s get started.
What is CSS Grid
Grid is a CSS layout model that allows its users to arrange elements appearing on a website into various rows and columns. This model basically partitions a web page into sections and aligns elements without having to go through the trouble of using positioning and floats.
A grid positions elements with respect to either the web page or other elements present on the web page. Below we have shown a visual representation of a CSS grid layout.
A grid layout model works with all latest browsers. It consists of two components which are grid container and grid items. Below we have explained them in detail.
Grid Container
A grid container is a parent element that holds grid items placed within rows, and columns. For the purpose of making an element adopt the behavior of a grid container set its display property to either grid or inline-grid.
Grid Items
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.
Here is a graphical representation of the grid container, and grid items.
As already mentioned, a CSS grid divides a web page into rows, and columns to arrange elements. These rows and columns along with other important grid terminologies are explained below.
Columns in a Grid
The vertical lines in a grid within which items are placed are regarded as columns in a grid. A grid system can have at least two and at most twelve or more columns.
Rows in a Grid
The horizontal lines in a grid within which items are placed are regarded as rows in a grid. A grid system can have numerous rows.
Gaps in a Grid
The area between each row, and column is referred to as gaps.
Lines in a Grid
The lines between each row is referred to as row lines, whereas, lines between each column is referred to as column lines.
There are many properties linked to the CSS grid. Consult the next section to learn about them.
Grid Properties
The table below provides an overview of the grid layout properties.
| Properties | Description |
|---|---|
| grid-template-columns | This property states the number and size of columns in a grid layout. |
| grid-template-rows | It describes the size of rows in a grid system. |
| grid-template-areas | This property assigns names to various items in a grid. |
| grid-auto-columns | It sets the initial size of a column. |
| grid-auto-rows | This property sets the initial size of a row. |
| grid-auto-flow | It states how items that are auto-placed are positioned in a grid system. |
| grid-row-start | This property states where to begin an item in a grid. |
| grid-column-start | It performs the same function as the above property. |
| grid-row-end | |
| grid-column-end | It performs the same function as the above property. |
| grid-area | This property is used to name a specific grid area. |
| row-gap | This property states a gap between rows. |
| column-gap | It states gap between columns. |
Let’s understand grid system further with the help of an example.
Example
In the example demonstrated below we have created a simple grid layout. The sketch of the grid is shown below.
Let’s start the coding.
HTML
Here we have simply nested four div containers inside a bigger div container. Each of the div element has been assigned some class.
CSS
display: grid;
grid-gap: 5px;
grid-template-columns: 120px 120px 120px;
}
Using the class “container” assigned to the bigger div, we are displaying it as a grid. Moreover, assigned a gap of 5px between rows and columns. Lastly, we have created three columns with a size of 120px each using the grid-template-columns property.
CSS
background-color: sandybrown;
color: white;
border-radius: 6px;
padding: 25px;
font-size: 20px;
}
Now we are simply styling the items present inside the grid container using some basic CSS properties.
CSS
grid-column: 1 / 3; /* specifies the location and size of item within a column */
grid-row: 1; /* specifies the location and size of item within a row */
}
The grid-column property sets the starting and ending position of the grid item in a column, meanwhile, the grid-row property defines the position of an item in a row. For instance, in the above code snippet, item 1 will start displaying in column 1 and end in column 3, whereas, it will be displayed in row 1.
CSS
grid-column: 3 ;
grid-row: 1 / 3;
}
.three {
grid-column: 1 ;
grid-row: 2 ;
}
.four {
grid-column: 2;
grid-row: 2;
}
Using the grid-column, and grid-row properties the positions of rest of the items are also being specified.
Output
A simple grid layout has been generated.
Conclusion
A grid layout model allows its users to arrange elements appearing on a website into various rows and columns. This model basically partitions a web page into sections and aligns elements with respect to either the web page or other elements present on the web page. It consists of various elements which are grid container, and grid items. A grid container is the parent element, whereas grid items are children elements. This write-up discusses all necessary details of grid layout along with graphical representations, and an appropriate example.
