CSS Grids

To create a grid you can start with a grid container. You can create a grid-container by setting the display property of an HTML element to "grid" or "inline-grid". All children of the grid container will become grid items which are seperated into rows that span the width of the grid container.

            
                .grid-container {
                    display: grid;
                }
            
        

You can use grid-template-rows or grid-template-columns to set a grid with specified dimensions. You can use grid-template-rows to set the height of the rows and grid-template-columns to set the width of the columns.

            
                .grid-container {
                    display: grid;

                    grid-template-rows: 150px 100px
                    grid-template-columns: 100px 50px 100px
                }
            
        

You can create spaces between rows and columns in a grid by adding a grid gap. You can use grid-column-gap to create a gap between the columns and grid-row-gap to create a gap between the rows. You can also use grid-gap to set all the gaps to one size.

            
                .grid-container {
                    display: grid;
                    grid-column-gap: 50px;
                }