HTML Layouts

Advanced website layouts can be achieved using a combination of HTML and CSS. Here's an overview.

Most modern websites and blogs consist of a header, footer, navbar, perhaps another sidebar, and let's not forget, the main content area. Something like this:

Example of a website layout
Example of the most common sections of a website layout.

HTML has a number of elements that can be used to define each of these areas. These include the main, header, footer, nav, aside and article elements. Also, the div element is a generic block level element that can be used for grouping HTML elements.

So the above layout could be marked up as follows:

<header>Header</header>
<article>Article</article>
<nav>Nav</nav>
<div>Ads</div>
<footer>Footer</footer>

But those elements merely provide the document's structure. They don't deal with presentation. So we'll end up with this:

As mentioned earlier in this tutorial, CSS is what we need for defining the presentation of our HTML documents.

CSS Grid Layout

CSS grid layout was purpose built for website layouts. It works on a two-dimensional grid system, where you specify which elements go to which parts of the grid.

So we could take the above HTML code, then use CSS grid to position each element:

If your browser supports grid layout, that example should look like the example at the top of this page. Here it is again:

Example of a website layout

In this example, we use the grid-template-areas property with a kind of "ASCII art" syntax to specify where each element goes. That's the bit that looks like this:

grid-template-areas: 
  "header header header"
  "nav article ads"
  "footer footer footer";

Then we tie each element to each of those grid areas using the grid-area property.

#pageHeader {
  grid-area: header;
}
#pageFooter {
  grid-area: footer;
}
#mainArticle { 
  grid-area: article;      
  }
#mainNav { 
  grid-area: nav; 
  }
#siteAds { 
  grid-area: ads; 
  }

The rest of the code deals with sizing, gutters, general aesthetics, etc.

In this case we did actually change the markup slightly by adding IDs to the elements. We didn't need to do this, but it's good practice. By doing this, we ensure that the grid areas will be occupied only by the elements with the correct ID. If we didn't do this, we could run into major problems if we ever add another element of the same name (for example, another header element) to the page.

Responsive Layouts

Responsive layouts adjust according to the screen size being used to view the website. This means that your website will probably look different on a mobile phone vs a tablet vs a desktop computer. The website adjusts itself to provide the best layout for the screen size.

We can modify the above example so that it uses a different layout on small devices such as mobile phones.

To do this, we add a media query to test for the size of the screen. If it's smaller than a certain width, we show them the new layout.

The above example will have all the elements stacked upon each other (unless you're viewing this example on a very wide screen). Stacking the elements like this is ideal for small devices such as mobile phones. Click the Preview button to view it in a new window (which should display the original layout — unless you're already viewing this on a small device).

Here's the media query we used for that example:

@media all and (max-width: 575px) {
  body { 
    grid-template-areas: 
      "header"
      "article"
      "ads"
      "nav"
      "footer";
    grid-template-rows: 80px 1fr 70px 1fr 70px;  
    grid-template-columns: 1fr;
 }
}

We simply change the ASCII art to reflect our new layout, which in this case, is simply stacking each element on top of each other (but in the order we specify). We also change the values of the rows and columns as required.

Check out the grid tutorial if you're interested in learning more about working with the grid.

Non-Grid Browsers

Grid layout is still very new, and as such, browser support is limited. The good news is that most major browsers started supporting grid from March 2017, so the wheels are definitely in motion. But there are still a lot of web users using non-grid browsers.

So until grid has widespread browser support, in order to support non-grid browsers, you will need to use other methods for your website layouts, such as CSS floats (with the float property) and/or flexbox (with flex and related properties).

If this feels a bit overwhelming, don't despair! You can download any of these HTML templates for your own use. You can open up the files and see how each one is built. And you can modify them as you wish.