Responsive layout using CSS Grid

CSS Grid was designed to make it easier to lay out components on a page using standard CSS. It divides the page into a grid composed of rows and columns, like a table, which is similar to Bootstrap’s row- and col- classes. The added bonus is we don't have to download or reference an external library as it is built-in to CSS 3.

As an example, let’s create an HTML page but we are not going to compile.

Let us create views\cssgrid.html:

<html>
  <head>
    <title>CSS Grid Sample</title>
    <style>
      .container
      {
        margin: 0 auto;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 150px 150px 150px;
        grid-template-rows: 200px 200px 200px;
      }
      .entry
      {
        color: white;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
      }
      #first { background-color:  red; }
      #second { background-color: green; }
      #third { background-color: blue; }
      #fourth { background-color: teal; }
      #fifth { background-color: grey; }
      #sixth { background-color: brown; }
      #seventh { background-color: silver; }
      #eighth { background-color: maroon; }
      #ninth { background-color: cyan; }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="entry" id="first">1st</div>
      <div class="entry" id="second">2nd</div>
      <div class="entry" id="third">3rd</div>
      <div class="entry" id="fourth">4th</div>
      <div class="entry" id="fifth">5th</div>
      <div class="entry" id="sixth">6th</div>
      <div class="entry" id="seventh">7th</div>
      <div class="entry" id="eighth">8th</div>
      <div class="entry" id="ninth">9th</div>
    </div>
  </body>
</html>

The line

grid-template-columns: 150px 150px 150px;

means we are making three columns, with each column 150 pixels wide.

The line

grid-template-rows: 200px 200px 200px;

means we are making three rows, with each row having a height of 200 pixels.

This way, we defined a three-by-three grid, or three rows with three columns.

Do not compile. Simply open it in File Explorer to open it in the browser, then resize the browser and make it small:

Then expand the browser:

You see that when you resize the browser, the blocks remain the same sizes.

Now let’s change the CSS to make the center column expandable.

      .container
      {
        margin: 0 auto;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 150px auto 150px;
        grid-template-rows: 200px 200px 200px;
      }

Refresh the browser. This time, when you expand or contract the browser, the middle column resizes automatically.

Now let’s make the middle row expandable too.

      .container
      {
        margin: 0 auto;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 150px auto 150px;
        grid-template-rows: 200px auto 200px;
      }

And resize the browser.

Now both the center column and the middle row are expandable.

We are just skimming the surface of CSS Grid here. There are so many variations in the use of CSS grid, but for now let us settle for this rudimentary knowledge. At least we are armed with the knowledge to develop the fixed navbar and the sticky footer without Bootstrap.

PreviousUsing include in templatesNextA fixed navbar and sticky footer

Last updated