Skip to content


Responsive layout with sidebar

Creates a responsive layout with a content area and a sidebar.

<div class="container">
    This element is 1fr large.
    Min: 150px / Max: 20%
.container {
  display: grid;
  grid-template-columns: 1fr minmax(150px, 20%);
  height: 100px;

main, aside {
  padding: 12px;
  text-align: center;

main {
  background: #d4f2c4;

aside {
  background: #81cfd9;

More like this

Start typing a keyphrase to see matching snippets.