Responsive layout with sidebar

CSS, Layout · Sep 16, 2020

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

  • Use display: grid on the parent container, to create a grid layout.
  • Use minmax() for the second column (sidebar) to allow it to take up between 150px and 20%.
  • Use 1fr for the first column (main content) to take up the rest of the remaining space.
This element is 1fr large.
<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;

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this

  • Responsive image mosaic

    Creates a responsive image mosaic.

    CSS, Layout · Dec 30, 2020

  • Aspect ratio

    Creates a responsive container with a specified aspect ratio.

    CSS, Layout · Aug 14, 2022

  • 3-tile layout

    Aligns items horizontally using display: inline-block to create a 3-tile layout.

    CSS, Layout · Dec 30, 2020