Responsive layout with sidebar

Angelos Chalaris · 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;

Recommended snippets

  • Creates a responsive image mosaic.

  • Aspect ratio

    CSS, Layout

    Creates a responsive container with a specified aspect ratio.

  • 3-tile layout

    CSS, Layout

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