Adding any number of columns with Flexbox

In this recipe, we will see how to add an arbitrary number of columns with Flexbox. This means we no longer have to stick to the 12-column grid. This simple recipe will show the fundamental paradigm shift that the Flexbox model brings to front-end development.

Getting ready

Before you start with this recipe, preview the completed page by running the harp server command inside the chapter8/completed/app folder. To see the recipe itself, point your browser to localhost:9000/recipe08-03. Try resizing the browser to see the behavior of the completed Flexbox grid.

How to do it…

1. Open the file titled recipe08-03.ejs add the following code in it:

<style>
 .col {
 flex-grow: 0;
 }
</style>
<div class="container">
 <h2 class="mt-5">Recipe 08-03: Adding Any Number of Columns with Flexbox</h2>
 <p class="mt-4">In this recipe we will look at using the flexbox grid to create layouts that were not possible in earlier versions of...