CSS Grids are a method of organizing elements on a screen with container divs. These divs then have css code applied to them which control their location on a page into a grid format that wraps to fit the page size.

Typically, a grid is created with one container div that has the display: grid property applied to it. Then, divs are created within the container div to represent each grid element as shown below. Here is the HTML code:

Here is the CSS code:

            
        .grid-container{
            display: grid;
        }
            
        

Again, This will now display the divs in a grid format.

You can also assign propertys which adjust the size of your grid items.

            
        .grid-container{
            display: grid;
            grid-template-columns: 250px;
        }
            
        

This sample will make each of the items 250px.

CSS Grids can be extremely useful for displaying mutltiple items in a grid format that will be responsive to page size and auto adjust itself. Overall, it is very versitile because each box can be made a different size and can ultimately be used to make up your entire webpage if you so chose.