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

Grid layout

Basic website layout using grid.

HTML

<div class="grid-layout">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">
    Content
    <br>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
  <div class="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';
  color: white;
}
.grid-layout > div {
  background: #333;
  padding: 10px;
}
.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: white; } .snippet-demo__grid-layout > div { background: #333; padding: 10px; } .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