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
- How CSS layouts were handled before now.
- The differences between the past approaches & the modern standards
- How you can get started with the new standards today (Flexbox and Grid)
- 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:
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:
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.
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:
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.
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;
}
(b) Re-position just one of the children items
aside {
align-self: center;
}
( c) Change the source order of a child element without affecting the html document
aside {
order: 2
}
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:
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?
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
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:
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.
#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;
}
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;
}
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!
