It may be a good idea to use one of these sidebars or the banner to house your page/site navigation.

This is an example of text that you might put in this sidebar. You may want to just put a paragraph tag directly in the 'leftbar' div, or you can divide it into sections or divs. Up to you.

This is another box you could put in the sidebar. I would add images, links, etc. to make this look more interesting but I'm too lazy.

What will you put here?

See my Newsletter where I first made this grid to see what I put in my sidebars.


A simple css grid template

This template coded by Leviathren is free to use! I only ask that you don't remove the credit in the notes (the greyed out text at the top of the code that doesn't display on the page).

The 'main' tag is at the bottom of all the other sections because I assume this section of the page will contain the most content, and would therefore make it a pain scrolling past to get to other parts of the page with the more you add. Shorter sections, the banner, sidebars, and footer are higher in the code despite not necessarily being displayed that way on the page. You can move things about to suit your needs of course.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Vel quam elementum pulvinar etiam non quam lacus. Cursus in hac habitasse platea dictumst quisque. Mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing. Sem fringilla ut morbi tincidunt augue. Urna et pharetra pharetra massa massa. Et leo duis ut diam quam nulla porttitor. Adipiscing commodo elit at imperdiet. Arcu non sodales neque sodales ut etiam. Sed turpis tincidunt id aliquet risus feugiat in. Nisi lacus sed viverra tellus in hac habitasse. Faucibus turpis in eu mi bibendum neque egestas congue quisque. Neque volutpat ac tincidunt vitae semper. Malesuada fames ac turpis egestas. Augue lacus viverra vitae congue eu. At tempor commodo ullamcorper a lacus vestibulum. Duis ut diam quam nulla porttitor massa. Id velit ut tortor pretium viverra suspendisse. Mattis nunc sed blandit libero volutpat sed. Neque egestas congue quisque egestas.