The CSS Grid Layout

The CSS Grid Layout is a two dimensional grid-based layout system that completely changes the way we can design our web pages. To start, it is important to define an element as a grid with display: grid. The next step is setting the column and row sizes with grid-template-comlumns and grid-template-rows. This will allow you to place its child elements into the grid with grid-column and grid-row. This will allow a lot of flexibility and control with how your website will appear on different screens.

            
.container {
    display: grid;
    grid-template-columns: 50px 50px 50px 50px;
    grid-template-rows: auto;
    }
            
        

There are a number of ways to adjust how the containers relate to each other. There are even options to set the space between columns and rows. The commands for this are column-gap and row-gap.

            
.container {
    grid-template-columns: 100px 50px 100px;
    grid-template-rows: 80px auto 80px; 
    column-gap: 10px;
    row-gap: 15px;
    }
            
        

The grid layout makes it very easy to center things. The command place-items sets both the align-items and justify-items properties in a single declaration. There is so much more to explore but hopefully this demonstrates a bit of the potential of the CSS Grid Layout.

            
.center {
    display: grid;
    place-items: center;
    }