The Grid Layout in CSS provides us a grid or table like page layout with rows and columns.
The layout is very handy when you want to avoid positioning and floats. Unlike, the website layout, the grid layout doesn’t have a fixed number of sections and is flexible as per the requirements.
The general layout contains a parent element with multiple child elements.
Display Property
To make any HTML element a grid container, you just have to set the display property to ‘inline-grid’ or simply ‘grid’. The grid container will be the parent element and its child elements will be termed as grid items.
Grid Gaps
The vertical line formed by the grid items is called the grid column and the horizontal one is known as the grid row.
The spaces between the consecutive grid columns or rows is called a grid gaps. CSS allows us to alter the grid gaps for better presentation of the web-page. For this purpose, we have following four properties:
- grid-column-gap: Adjusting the gaps for grid columns.
- grid-row-gap: Adjusting the gaps for grid rows.
- grid-gap: Shorthand property. Two values can be given for column and row respectively or s single value can also be given for both
grid-template-columns
You can define the number of columns of your grid, using this property. It also helps us to set the column widths. Values are given in space separated list of width for respective columns.
You can give specific length values for the width or ‘auto’ to equally divide the width of the grid container.
grid-template-rows
Similar to grid-template-column, this property can be used to define the heights of the grid-rows.
justify-content
This property gets you the whole grid aligned inside the grid container.
align-content
This property is for the vertical alignment of the grid inside the grid container.