Grid

Grids are relatively the newcomer in CSS but are fast gaining popularity due to their ability to be especially useful in creating the page layout or when using repeating similar content such as cards.

Sample

Logo
Navigation
Main Content
Sidebar
Footer

Code

The code below is the magic that makes the above sample happen.

<div class="grid-container"> <div class="grid-item">Logo</div> <div class="grid-item grid-navigation">Navigation</div> <div class="grid-item grid-main-content">Main Content</div> <div class="grid-item">Sidebar</div> <div class="grid-item grid-footer">Footer</div> </div> <style> .grid-container { display: grid; grid-template-columns: max-content auto 35%; grid-column-gap: 1em; grid-row-gap: 1em; } .grid-item { padding: .5em; background-color: #DDDDDD; } .grid-navigation, .grid-main-content { grid-column: span 2; } .grid-footer { grid-column: span 3; } </style>