Table of Contents

How to Create Responsive Layout Using CSS

Code Playground is only enabled on larger screen sizes.

It is also possible to create the same layout using a grid system instead of the flexbox.

First, set display to grid, and create the columns using the grid-template-columns property:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flexbox Responsive Layout</title>
 
    <link rel="stylesheet" href="style.css" />
  </head>
 
  <body>
    <div class="container">
      <div class="nav">Navbar</div>
      <div class="side-primary">Primary sidebar</div>
      <div class="content">
        Main Content
        <p>. . .</p>
      </div>
      <div class="side-secondary">Secondary sidebar</div>
      <div class="footer">Footer</div>
    </div>
  </body>
</html>

css

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

Notice that we are using the unit fr, which stands for fraction. This example means we are dividing the page into four equal fractions, and each column takes one fraction.

On small screens

On a small screen, all elements should take up all four columns:

css

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
 
.nav {
  /* Span from column line 1 to 5 */
  grid-column: 1 / 5;
}
 
.side-primary {
  grid-column: 1 / 5;
}
 
.content {
  grid-column: 1 / 5;
}
 
.side-secondary {
  grid-column: 1 / 5;
}
 
.footer {
  grid-column: 1 / 5;
}

Container width: 200px (small)

Header

Content
Lorem ipsum, dolor sit amet consectetur adipisicing elit. This area expands to fill the grid's free space.

On medium screens

On medium screens, the primary sidebar takes one column, and the main content section takes three.

css

@media screen and (min-width: 640px) {
  .nav {
    grid-column: 1 / 5;
  }
 
  .side-primary {
    grid-column: 1 / 2;
  }
 
  .content {
    grid-column: 2 / 5;
  }
 
  .side-secondary {
    display: none;
  }
 
  .footer {
    grid-column: 1 / 5;
  }
}

Container width: 350px (medium)

Header

Content
Lorem ipsum, dolor sit amet consectetur adipisicing elit. This area expands to fill the grid's free space.

On large screens

Finally, on large screens, the sidebars each take one column, and the main content takes two.

css

@media screen and (min-width: 1024px) {
  .side-primary {
    grid-column: 1 / 2;
  }
 
  .content {
    grid-column: 2 / 4;
  }
 
  .side-secondary {
    display: block;
    grid-column: 4 / 5;
  }
}

Container width: 400px (large)

Header

Content
Lorem ipsum, dolor sit amet consectetur adipisicing elit. This area expands to fill the grid's free space.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="/styles.css">
</head>

<body>
  <div class="container">
    <div class="nav">Navbar</div>
    <div class="side-primary">Primary sidebar</div>
    <div class="content">
      Main Content
      <p>. . .</p>
    </div>
    <div class="side-secondary">Secondary sidebar</div>
    <div class="footer">Footer</div>
  </div>
</body>

</html>

Open Sandbox

Loading course content...