How To Approach CSS layouts in 2017 — and beyond.

I’ll help you understand how you should approach modern layouts in CSS — it’s 2017 and a lot’s really changed.

What You Will Learn

  1. How CSS layouts were handled before now.
  2. The differences between the past approaches & the modern standards
  3. How you can get started with the new standards today (Flexbox and Grid)
  4. Why you should care about these modern standards

Introduction

I don’t exactly remember when, but I think in 2012 or 2013, I was introduced to web development. Quite mildly, I tried learning on my own.

With CSS, a lot of things made sense, except for crafting intelligent CSS layouts. There were just so many layout hacks I couldn’t bring myself to understand.

1. How CSS Layouts Were Handled Before Now

The Problem:

Let’s take a look at a pretty standard problem.

How do you create two page sections — a sidebar and a main content area with equal heights regardless of their content sizes?

See an example of what we aim for below:

Sidebar and main content areas with equal heights regardless of their content sizes

Before now, here’s how you may have solved the problem.

(i) Create a div with two elements, e.g. an <aside> and <main>

<body>
<aside>
Lorem ipsum dolor sit amet.
</aside>

<main>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</main>
</body>

There’s obviously more texts in the main section.

Give the aside section some color so it is distinguishable.

.aside {
color: #fff;
background-color: #8cacea;
}

(ii) Make both sections appear side-by-side

To have both sections stay side-by-side, you would do this:

aside {
width: 25%;
}
main {
width: 75%;
}
aside,
main{
float: left;
}

The style above splits the available width in certain proportions and then floats both the aside and main content areas.

Below is the result:

Two Content ares side-by-side

If you aren’t aware of using floats, it’s a relatively old technique for shoving elements to a named direction, left or right

Take a look at the image above, the problem isn't solved yet. The sidebar’s height is not the same as that of the main content area.

Let’s solve the problem finally.

(iii) Use the table display hack

To solve the problem of different heights, you’d have to use the table display hack — i really hate this hack, by the way.

If you’re NOT familiar with this hack, here’s what to do.

(a) Make the parent container (In this case, the body element) a table.

body {
display: table;
}

(b) Remove the floats, and make the child elements table cells

The child elements in this example are, the aside and main content areas.

aside,
main{
display: table-cell;
}

Once that is done, the problem is pretty much solved — at least, that’s how it used to be done.

Both content areas now have uniform heights

2. The Differences Between the Past Approaches & the Modern Standards

Now that you have an idea of how the problem was solved before now, let’s take a look at what Flexbox and Grid bring to the table.

Flexbox and Grid are the perfect CSS layout solutions — the modern standards. If you must write CSS at a reasonable level, then investing in a Flexbox and Grid education is priceless.

How Do You Solve the Same Problem with Flexbox?

The Flexbox formating context is kicked off by creating a flex container.

Forget the lingo, it’s quite easy.

The parent element here is the body element. It houses the sidebar and main content area. So, make it a flex container:

body {
display: flex;
}

And you get this:

Flexbox in action

Including display:flex kicks off the Flexbox model, and initiates a flexbox formatting context.

Do not forget the proportions:

aside {
width: 25%;
}
main {
width: 75%;
}

Voila! The problem is pretty much solved now.

Problem solved.

Did you see how easy that was? Simple and readable code, plus NO crazy hacks.

There’s a lot more you could do with Flexbox, such as:

(a) Center the sidebar and main content area along the vertical axis

html, body {
height: 100%;
}
body {
align-items: center;
}
SIdebar and main content area centered across the vertical axis

(b) Re-position just one of the children items

aside {
align-self: center;
}
The sidebar moved to the center of the vertical axis

( c) Change the source order of a child element without affecting the html document

aside {
order: 2
}
The sidebar now appears like it was placed after the main content area in the html document

I have only scratched the surface of what’s possible with Flexbox model.

Talk about flexbility and ease, the Flexbox model delivers just that!


How Do You Solve the Same Problem with Grid?

The CSS Grid layout is the ultimate layout solution. With it comes a lot of power too.

Let’s take a brief look at how the same problem may be solved using the Grid layout.

Just like Flexbox, the process begins just the same way.

Make the container element a grid container.

body {
display: grid;
}

If you’re curious, here’s all the CSS at this point:

body {
display: grid;
background-color: #eeeeee;
}
aside {
color: #fff;
background-color: #8cacea;
}

And this is what you have:

Initial display

NOTE

To use the Grid layout, you must have a compliant browser such as the new Firefox 52 or Chrome 57.

The image above doesn’t look like anything magical has happened. Well, not yet.

What if you split width proportions like we have done in the cases above:

aside {
width: 25%;
}
main {
width: 75%
}

Does this make a difference?

Splitting width proportions on grid child elements

It does make a difference, but NOT the kind you were expecting. The sidebar and main content areas are not side by side yet.

This brings me to explaining an important part of using the Grid Layout.

After setting up a grid container with the display: grid, you have to define how you layout rows and columns within this grid container.

How do you do that?

body {
grid-template-columns: 30% 70%;
}

A one-liner saves the day. No need to define the widths of the sidebar and main content sections again.

grid-template-columns defines the proportions in which the columns within the grid are laid

Problem solved.

If you asked me, that’s impressive. No messy hacks.

There’s even more you can do with the Grid layout — a lot more.

First off, give the main section a bit of color, so the examples that come after now are even more visual.

main {
background-color: rgba(39,174,96 ,1);
color: #fff;
}

Here’s what you should have:

Now, let’s see some of the good stuff the Grid layout has for you.

(a) You can define gaps between columns

body {
grid-column-gap: 15px;
}

Here’s the result of that:

Now you have a gap between the columns — much neater!

No need to add margins to aside or main

grid-column-gap defines the spacing (or gap) between the columns within the grid.

(b) You Can Have as Many Columns (or Rows) as You Want

The examples above have used just one aside element and a main element. I’ll add two more of those.

<body>
<aside>
Lorem ipsum dolor sit amet.
</aside>

<main>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</main>

<aside>
Lorem ipsum dolor sit amet.
</aside>

<main>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</main>

<aside>
Lorem ipsum dolor sit amet.
</aside>

<main>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</main>

</body>

Without making any changes to the CSS, the Grid layout understands just what to do.

The columns still retain the 30% — 70% layout

#EDIT: while this has nothing to do with the CSS Grid, you should only have one main element on a page. Thanks, Jason Burnett. I did a blind copy-n-paste here.


(b) You Can Define Row Gaps

Just like column gaps seen earlier, you may also define row gaps.

body {
grid-row-gap: 15px;
}
Row gaps set.

For ease, there’s a shorthand available if both row and column gaps are the same. Just use grid-gap: 15px instead of setting grid-row-gap and grid-column-gap to 15px

(c ) You can define the sizes of rows

Like you defined the relative sizes of the grid-column, you can do the same for rows.

body {
grid-template-rows: 200px 300px 400px;
}
Different row sizes

Now the first, second and third columns take the heights, 200px, 300px and 400px respectively.

I do not intend to show all that’s possible with the Grid layout here, but this is a fairly good introduction.

As you can see, there’s a lot of layout superpowers here — all at your disposal.

3. How you can get started with the new standards today (Flexbox and Grid)

You’ve seen a glimpse of how the CSS Flexbox and Grid model provide better and more reliable layout solutions. So, how do you get started with these?

For a gentle introduction, I recommend you practice the examples in this article well. Afterwards, you can move on to studying even deeper concepts.

The Grid layout does not currently have a great browser support, but you can experiment now and use it in supported browsers via feature queries.

In the conclusive section of this article, I include to links to how i may be able to help you achieve a deeper understanding of modern CSS layouts — Flexbox and Grid.

4. Why Should you Care About These Modern Standards?

If you haven’t figured out why you should care about Flexbox and Grid yet, here are a a few troubles you may experience with previous layout solutions.

(i.) If you currently use floats and clearfix hacks, then you know this can get messy

(ii.) You risk elements overlapping if you absolute positioning — since this positioning method takes the elements out of the document flow.

(iii.) You have a lot of redundant markup if you usedisplay:table for layouts.

(iv.) You’ll experience white space related issues, if you use inline-block for layout solutions.

To be honest, if you’re just starting out with web development and you don’t consider your html and css very good, you may not care about Flexbox and Grid. Your go-to solution may be Bootstrap or some other popular framework.

If you don’t want some of the caveats to using such popular frameworks, love the thrill of doing stuffs yourself, or perhaps you’re forward thinking, then my advice would be to get a decent Flexbox and Grid education.

I know you loved this article, so recommend it and help someone else learn something new


Want to become Pro?

Download my free CSS Grid cheat sheet, and also get two quality interactive Flexbox courses for free!

Get the Free CSS Grid Cheat sheet + Two Quality Flexbox Courses for free!

Get them now