CSS Flexbox #16. How to Create Column Patterns with Flexbox

Sometimes, when you start learning how to build websites, you often are confronted with a finished design and you start coding based on it with the available tools. So, you learn the basics of a CSS Framework to avoid the layout “problem” but at the end, editing the styles of such Frameworks can be overwhelming (in my own experience).

With some flexbox rules, it is possible to create different column patterns to use them on the fly by adding these classes to the HTML container tags of your document.

Keep reading to learn how.

Step #1. Create the CSS Reset

Open your code editor and create a file called style.css
Copy and paste these reset styles:

html { box-sizing: border-box; font-size: 16px; }  *, *:before, *:after {   box-sizing: inherit; }  body, h1, h2, h3, h4, h5, h6, p, ol, ul {  margin: 0;  padding: 0;  font-family: 'Raleway', sans-serif;  font-weight: normal; }  ol, ul {   list-style: none; }

Step #2. The Flexbox Styles

Let’s suppose we need the following four-column patterns to work with:

Full width
Two columns
Three columns
Four columns

The idea (certainly not a new one) behind this, is to make each containing div a flex container and style each one according to the proposed layout.

Edit the CSS file and create five new classes called:
- .container
- .one-column
- .two-columns
- .three columns
- .four-columns

Each one of these classes will be assigned to a containing block in HTML. All of them will be flex containers and will have the flex-wrap property set to wrap. That way you can create columns with multiple elements.

The direct child items of containers with the class .one-column will have the flex-grow value of 1, the flex-shrink value of 0 (these will be defaults for all classes), and will occupy 92% of the available space.
Add margin to all the -column flex items

.container, .one-column, .two-columns, .three-columns, .four-columns { display: flex; flex-wrap: wrap; }  .container > * {    /* Target only the direct children of .container */ margin: 1em 4%; }  .one-column > * {   /* Target only the direct children of .one-column */ flex: 1 0 92%; }

Notice: flex-basis + margin-left + margin-right = 100%

With the same logic, create three more classes called .two-columns, .three-columns, and .four-columns.

Edit the CSS code:

.two-columns > * { flex: 1 0 46%; }  .three-columns > * { flex: 1 0 23%; }  .four-columns > * { flex: 1 0 11.5%; }

Those are less than twenty lines of Flexbox code.

Step #3. Create the HTML

Create an index.html file and paste in it this code:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>OSTraining - Create a Column Pattern with Flexbox</title> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Playfair+Display|Raleway|Roboto+Condensed|Roboto+Slab:400,700&display=swap" rel="stylesheet"> </head> <body> <div class="header-container"> <div class="header two-columns"> <div class="blog-name"> <h1>My Blog</h1></div> <div class="menu"> <ul> <li><a href="#">Me</a></li> <li><a href="#">You</a></li> <li><a href="#">Blog</a></li> </ul> </div> </div> </div> <div class="outer-wrapper"> <div class="container"> <div class="one-column"></div> <div class="two-columns"></div> <div class="three-columns"></div> <div class="four-columns"></div> </div> </div> </body> </html>

There is a link to Google Fonts in the <head> section of the document and a link to the stylesheet.

Edit the div with the class .one-column

<!-- One Column - Image + Text --> <div class="one-column"> <p><img src="http://lorempixel.com/750/465/abstract/1" alt="Example Image"></p> <p>They're creepy and they're kooky mysterious and spooky. They're all together ooky the Addams Family. All of them had hair of gold like their mother the youngest one in curls.</p> </div>

You could save the file and refresh the browser, but that will not look promising.

Edit the HTML file, and add some content to the div with the class .two-columns:

<!-- Two Columns - Image + Text --> <div class="two-columns"> <p> <img src="http://lorempixel.com/750/465/abstract/1" alt="Example Image"> </p> <div class="text-container"> <h3> Lorem ipsum dolor sit amet.</h3> <p> The year is 1987 and NASA launches the last of Americas deep space probes. Makin' your way in the world today takes everything you've got. Takin' a break from all your worries sure would help a lot. Today still wanted by the government they survive as soldiers of fortune. The year is 1987 and NASA launches the last of Americas deep space probes.</p> </div> </div>

The .two-columns container has two child items, an image, and a text container. The items inside the .text-container div are not flex items.

Let’s try to nest columns.

Edit the HTML code:

<!-- Three Columns - Nested Columns --> <div class="three-columns"> <img src="http://lorempixel.com/500/310/abstract/3" alt="Example Image"> <div class="text-container"> <h3> Lorem ipsum dolor sit amet.</h3> <p> Go Speed Racer. Go Speed Racer. Go Speed Racer go! Doin' it our way. Nothin's gonna turn us back now. Straight ahead and on the track now. We're gonna make our dreams come true.</p> </div> <div class="nested"> </p> <h3> Lorem ipsum dolor sit.</h3> <p> The movie star the professor and Mary Ann here on Gilligans Isle</p> <div class="two-columns"> <img src="http://lorempixel.com/500/310/abstract/4" alt="Example Image"> <p> In a freak mishap Ranger 3 and its pilot Captain William Buck Rogers are blown out of their trajectory into an orbit which freezes his life support systems and returns Buck Rogers to Earth five-hundred years later.</p> </div> </div> </div>

The .three-columns container has three child items:

an image
a .text-container div
a container with the class .nested

Within the .nested container, we have two block elements and the .two-columns container.

In other words, the .two-columns container is nested inside the third child item of the .three-columns container.

For the last .four-columns container, you will code a card layout.

Edit the HTML code:

<!-- Four Columns - Card Container --> <div class="four-columns"> <div class="card-container"> <div class="one-column"> <img src="http://lorempixel.com/250/155/abstract/5" alt="Example Image"> <h3> Lorem ipsum dolor sit.</h3> <p> It's time to put on makeup. It's time to dress up right. It's time to raise the curtain on the Muppet Show tonight</p> <ul> <li> alpha</li> <li> beta</li> <li> gamma</li> <li> delta</li> </ul> </div> </div> <div class="card-container"> <div class="one-column"> <img src="http://lorempixel.com/250/155/abstract/6" alt="Example Image"> <h3> Lorem ipsum dolor sit.</h3> <p> It's time to put on makeup. It's time to dress up right. It's time to raise the curtain on the Muppet Show tonight</p> <ul> <li> alpha</li> <li> beta</li> <li> gamma</li> <li> delta</li> </ul> </div> </div> <div class="card-container"> <div class="one-column"> <img src="http://lorempixel.com/250/155/abstract/7" alt="Example Image"> <h3> Lorem ipsum dolor sit.</h3> <p> It's time to put on makeup. It's time to dress up right. It's time to raise the curtain on the Muppet Show tonight</p> <ul> <li> alpha</li> <li> beta</li> <li> gamma</li> <li> delta</li> </ul> </div> </div> <div class="card-container"> <div class="one-column"> <img src="http://lorempixel.com/250/155/abstract/8" alt="Example Image"> <h3> Lorem ipsum dolor sit.</h3> <p> It's time to put on makeup. It's time to dress up right. It's time to raise the curtain on the Muppet Show tonight</p> <ul> <li> alpha</li> <li> beta</li> <li> gamma</li> <li> delta</li> </ul> </div> </div> </div>

By now, you already have grasped how this logic works. Four card elements inside the .four-columns container. There is a .one-column container inside each .card-container div.

Save both files and open the HTML file in your browser

There is some additional styling to add.

Step #4. Additional Styling

Take the <header> section first. It is already a flex container (.two-columns). The name of the blog will be on the left, whereas the main menu will be on the right side of the layout. You can declare the menu container as a flex container.

Edit the CSS code:

.menu ul { display: flex; justify-content: space-evenly; }

Let’s center the images and make them responsive.

Edit the CSS code:

.container > img, .container > * > img, .container > * > * > img, .container > * > * > * > img { flex-grow: 0; display: block; max-width: 100%; height: auto; margin: 0 auto; }

Some padding everywhere.

Edit the CSS code:

p, ul, img { padding: 8px 12px; }  h2, h3 { padding-left: 8px; }

Give the layout a fixed width and center it on the page.

Edit the CSS code:

.outer-wrapper { width: 1000px; margin: 0 auto; }  .container { width: 90%; margin: 0 auto; }

One last touch to the <header> section.

Edit the CSS code:

/* Header Section */  /* Making the header container stay always on top + border + min-height => this height * has to be compensated with margin on top of the next block level element (sibling) * ==> .outer-wrapper + shadow **/ .header-container { background-color: rgb(236, 236, 236); border-bottom: 0.5em double #2e2e2e; position: fixed; top: 0; left: 0; z-index: 10; width: 100vw; min-height: 75px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }  .outer-wrapper { margin-top: 75px; z-index: 5; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }  /* Align items vertically on the .header section */  .header { display: flex; align-items: baseline; padding-top: 0.5em; }  .header h1 { padding-left: 25%; font-family: 'Playfair Display', serif; font-size: 2.5em; font-weight: bold; }  .header a { text-decoration: none; font-family: 'Roboto Slab', serif; text-transform: uppercase; color: #2e2e2e; }

Polish the typography a little bit.

Edit the CSS code:

body, p, ol, ul { font-family: 'Raleway', sans-serif; color: #1f1f1f; }  .container h1, .container h2, .container h3, .container h4, .container h5, .container h6 { font-family: 'Playfair Display', serif; text-decoration: underline; color: #1d1d1d; }

Save all files and refresh your browser.

You can now create different column patterns (e.g. 33/33/33, 33/66, 75/25) in your CSS and reuse these classes in your HTML code.

Conclusion

To be honest, the possibility to layout everything with a column system, was the main reason to learn and use a CSS framework, when I first started to code websites. And the menus of course!

However, there is no better way (in my opinion) of coding a website than breaking up a design in parts and coding it with HTML and CSS.

This system is not a complete solution, but it can help you spare time in prototyping/design stages. You could even replace some of the functionalities of your illustration program (with the right “CSS attitude”).

If you think, you would be better covered with a CSS framework, join OSTraining and get access to complete web developing resources, like this Bootstrap 4 course. By the way, Bootstrap 4 uses Flexbox to handle the layout.

The whole code I used in this exercise can be found here.

I hope you liked this “reverse thinking ” exercise. Thanks for reading!

Previous tutorials in this Flexbox series

Author

Jorge Montoya

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.

View all posts

You're using the paragraphs module? I'm not sure that's possible - have you looked at the Feeds module? https://www.drupal.org/docs/contributed-modules/feeds-paragraphs

Hi, there is a way to insert data into an Entity reference revision field ? I have a node with…

Hey Ed - totally agree. We'll get that in the next draft of the workflow. thanks!

Also, should consider website translation workflow in a Drupal site. Whether it be utilization of a plugin or using a…

Hey nstocco - that's the subject for an entire course :). Yes - the best practice is to use Git…