CSS Grid layout is a two-dimensional layout method that divides the page into rows and columns and places elements in them. When using the Grid layout, you need to define the grid container and grid items.
The first step is to enable Grid layout display: grid;by .
In the second step, use grid-template-columnsthe and grid-template-rowsattributes to define the rows and columns of the grid. For example, if you want to create a 3x3 grid, you can use:
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);The third step is to place grid item elements inside the grid container. Use grid-columnthe and grid-rowattributes to position grid items. For example, if you want to place an element on the first row and second column, you can use:
grid-column: 2 / 3;
grid-row: 1 / 2;There are other properties that can help you have more control over the grid layout, such as grid-gap(add spacing in the grid), justify-content(horizontal alignment), align-content(vertical alignment), etc.
In addition to the above properties, there are some other properties that can help you better control the grid layout, these properties include:
grid-template-areas: Specifies the name of the grid and the layout of the grid items.grid-area: Specifies the grid area where the grid item resides.grid-column-start,grid-column-end,grid-row-start,grid-row-end: Specifies the starting and ending position of the grid item in the grid, respectively.grid-auto-columns,grid-auto-rows: Specifies the size of automatically generated rows and columns in the grid in addition to the defined rows and columns.grid-auto-flow: Specifies how empty areas in the grid are filled with grid items.
There are many possibilities for using CSS Grid layout, and combined with Flexbox layout, you can have more control over the positioning of elements.
Note that these properties need to be used on the grid container, not the grid item. Also, CSS Grid layout is a relatively new technology and not all browsers support it. Therefore, browser compatibility should be checked before use.
References: