In the past I used very simple CSS float grids for website templating, but Flexbox is even better, and much simpler. In this quick tutorial, I will show you how to create an extremely simple, infinitely scalable responsive grid.
We have semantic options for naming the tags and classes, but I’ll start off with a simple row and column based naming structure, in the vein of Bootstrap, Foundation, Skeleton, and just about every other CSS framework.
Note that I’m only writing about the functional code. For the examples, I’ve added borders and background colors to the grid to make it easier to understand.
With only two classes – .row and .column – we can create an infinite, equally spaced grid.
A Guide to Flexbox by Chris Coyier explains Flexbox in detail. For this grid, we only use a few flex properties.
display: flex defines a flex container.
flex-direction: row determines the direction of each child in a flex container as left-to-right.
flex-wrap: wrap will allow a multi-line flex.
flex-basis: 100% specifies the initial main size of a flex item (100%).
I have my mobile breakpoint set to 800px. This grid can become more complicated and have more breakpoints, but I like to have just one for mobile/tablet (small screens) and one for desktop/laptop (large screens). Using min-width media queries is optimal for mobile first layout design.
The way this is set up, each column will have 100% width on mobile, and wrap down to the next column. On desktop, all the colums will be contained to a single line.
In a framework like Bootstrap, the grid is based on 12 columns. A 50% width column would be written something like col-md-6. This is much simpler.
But that’s only so useful. What if you want a Holy Grail layout? Or a main content with a sidebar?
Well, on the small screen view, it’s still going to look the same – you still want each section to be full width. On desktop, it will be slightly different. Going with the Holy Grail example, say I want a main left sidebar that’s 25% width, an advertisement sidebar on the right that’s 20% width, and the 55% as the main content?
The class names can be anything, but I’m just going to name them after the percents for simplicity.
<div class="column _25">
25% Left Sidebar
<div class="column _55">
55% Main Content
<div class="column _20">
20% Right Sidebar
The only thing that needs to be added is the flex property inside of your min-width media query.
Finally, you’re going to want to wrap the entire grid inside of a container so your content doesn’t stretch to 3000 pixels wide on an iMac.
<!-- rows and columns -->
margin: 0 auto;
Everybody loves HTML5 semantics. Why stick with divs upon divs when we have some semantically named classes we can use instead? Rows and columns are great for quick template design, but once it comes down to the final code, you want something cleaner. Read all about HTML5 semantic tags if you’re not overly familiar.