30-seconds-of-code/snippets/grid-layout.md

Grid layout

Basic website layout using grid.

HTML

<div class="grid-layout">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box content">Content
    <br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti modi sed accusamus vero laborum? Ut ducimus doloremque perspiciatis labore velit, nostrum, molestias animi, nulla odit illum voluptas est explicabo non!
  </div>
  <div class="box footer">Footer</div>
</div>

CSS

.grid-layout {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    'sidebar header header'
    'sidebar content content'
    'sidebar footer  footer';
}
.sidebar {
  grid-area: sidebar;
}
.content {
  grid-area: content;
}
.header {
  grid-area: header;
}
.footer {
  grid-area: footer;
}

Demo

Header

Sidebar

Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Footer

<style> .snippet-demo__grid-layout { margin: 1em; display: grid; grid-gap: 10px; grid-template-columns: repeat(3, 1fr); grid-template-areas: "sidebar header header" "sidebar content content" "sidebar footer footer"; background-color: #fff; color: #444; } .box { background-color: #444; color: #fff; border-radius: 5px; padding: 10px; font-size: 150%; } .snippet-demo__grid-layout__sidebar { grid-area: sidebar; } .snippet-demo__grid-layout__content { grid-area: content; } .snippet-demo__grid-layout__header { grid-area: header; } .snippet-demo__grid-layout__footer { grid-area: footer; } </style>

Explanation

1. display: grid enables grid.
2. grid-gap: 10px defines spacing between the elements.
3. grid-template-columns: repeat(3, 1fr) defines 3 columns of the same size.
4. grid-template-areas defines the names of grid areas.
5. grid-area: sidebar makes the element use the area with the name sidebar.

Browser support

✅ No caveats.

• https://caniuse.com/#feat=css-grid