CSS Grid Demo

The Power of Areas

Now this is where grids start getting really cool! 😎

.item__header {
    grid-area: header;
}

grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-template-areas: "header header header header"
                     "side content content content"
                     "footer footer footer footer";
        

Layout number 2:

grid-template-areas: "footer . . side"
                     "footer content content side"
                     "header content content side";

It even works with media queries!

@media (max-width: 600px) {
    .grid1 {
        grid-template-areas: "content content content content";
    }
}