When flexbox comes to the rescue. Flexbox Grid.

Introduction

For many of us working with CSS some times might be very frustrating. Especially when it comes to a grid-type layout. Even when you need to do a basic task like positioning two blocks in a row float: left doesn’t seem complicated at first. However, if you’re familiar with floating  it has a side-effect: the parent element always loses its height. There’re few ways to solve this problem.

But, wait… I just want to position my elements next to each other! I don’t want to care about clearing and other related problems (like horizontal & vertical alignment etc) :mad: .

Flexbox

That’s where flexbox comes into play.

      

Look at that! No clearing, no floats. Just works.

In nowadays flexbox has a pretty decent support. All browsers (even including IE 10 and 11) support flexbox. Yes, with IE you need to use vendor prefixes and they do have some bugs,  but how many time you can save using a flexbox! You don’t even need to write fallbacks with floats (until it comes to IE9 and lower versions).

Based on that, I want to share the next trick: how to implement your own grid with a few lines of code.

Flexbox Grid

Here’s an example of the basic grid which can replace “floating grid”:

      

Before going into details I want to describe a general idea: We’ll create a grid with columns and put our content (in this case cards) into the columns. A good practice tells that we shouldn’t mix our content styles with the grid or column styles. So, grid and columns are responsible for the layout only.

Here’s a little step-by-step explanation of what CSS structure means:

1. We put our content into a wrapper which is a pretty standard practice to prevent it from shrinking on wide screens.

2. We created grid using class .grid:

   .grid {
     display: flex;
     flex-wrap: wrap;
     margin-left: -8px;
     margin-right: -8px;
   }

   display: flex is our friend and basically tells the browser that this element should be displayed as flexible box layout. Please note that display: flex will override all floats (floats basically won’t work anymore on current and child elements). flex-wrap: wrap helps to wrap our rows into multiple lines. Negative horizontal margins are for eliminating  left and right padding of internal columns.

3. We wrote .columns for the grid:

   .column {
     display: flex;
     padding-left: 8px;
     padding-right: 8px;
     width: 100%;
   }
   @media (min-width: 768px) {
     .column {
       width: 33%;
     }
   }
   @media (min-width: 992px) {
     .column {
       width: 25%;
     }
   }

   In this context display: flex plays important role: it helps all items in a row to be the same size as a tallest column in a row. It’s extremely helpful when you’re trying to align content with different height. To better understand why it’s there try to remove it and see what would happen. Got it? If you were using floats you also need to write additional JavaScript logic to calculate how many items are in a row, get the tallest one and apply height of it to all items in a row… But with one line of display: flex you already solved this headache. Moving on: horizontal paddings are for spacing between the columns. 100% width for taking all available horizontal space (primarily for mobile experience). There’re also media queries that will adjust width of the columns based on resolution.

4. Finally, our card element.

   .card {
     background: #f5f2ec;
     padding: 20px;
     color: #29333a;
     margin: 8px 0;
     width: 100%;
   }

   This peace should be pretty straightforward.

Conclusion

In this example we created a simple flexbox  grid that solves many issues. No bootstrap, foundation or any other framework needed. Few lines of code can reduce amount of code, remove dependency from 3rd party library and help to avoid headache with horizontal/vertical alignment.