Simple Custom Responsive Grid Layout

If simple design is adopted for your website, you do not need to use Bootstrap or CSS frameworks to make things complicated. This post shows how to write a simple responsive layout by CSS media query.

In the following demo, the layout consists of two columns (left column and right column). If the screen width is larger than 767px, left column will be 70% wide and right column will be 30% wide. If the screen width is less than 767px, both left and right columns are 100% wide and left column will be on top of right column.

Demo

Source Code for Demo (HTML):

layout.html | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Simple Custom Responsive Grid Layout</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="left-column" style="background-color: yellow">
  View this page on devices with screen width larger than 767px
  and also on devices with screen width less than 767px.
</div><!--
--><div class="right-column" style="background-color: aqua">
  You can use Chrome "Device Mode and Mobile Emulation" to
  view this page as mobile devices
</div>

</body>
</html>

Note

Add the following line in the head section of your HTML. Otherwise CSS media query will not work.

<meta name="viewport" content="width=device-width, initial-scale=1">

Note

Because display: inline-block is used for .left-column and .right-column, there is whitespace issue [1] in such design.

<!-- and --> is used to prevent whitespace issue. Please refer to [2] for details.

Source Code for Demo (CSS): Use CSS media query

style.css | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.left-column{
  width:70%;
  display:inline-block
}

@media screen and (max-width: 767px){
  .left-column{
    width:100%;
    display:block
  }
}

.right-column{
  width:30%;
  display:inline-block
}

@media screen and (max-width: 767px){
  .right-column{
    width:100%;
    display:block
  }
}

If you prefer to use SASS for your CSS writing, here is the SCSS equivalent of above CSS:

style.scss | repository | view raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
.left-column {
  width: 70%;
  display: inline-block;
  @media screen and (max-width: 767px) {
    width: 100%;
    display: block;
  }
}

.right-column {
  width: 30%;
  display: inline-block;
  @media screen and (max-width: 767px) {
    width: 100%;
    display: block;
  }
}

Tested on: Chromium Version 41.0.2272.76 Ubuntu 14.10 (64-bit), pyScss 1.3.4

Powered by Github Pages, Pelican, pyScss.