Create Modern Layouts Easily with Gridlex CSS Grid System

By Jake Rocheleau. in Web Design. Updated on May 14, 2019.

Frontend development has improved radically with the introduction of CSS flexbox. This makes it much easier to create grids & columns that naturally shift for responsive layouts.

Instead of coding your own flexbox grid from scratch, it’s far easier to use a tool such as Gridlex. This free open source flexbox library is super-lightweight and very easy to customize.

All you do is add the Gridlex stylesheet to your webpage and work with its grid classes. Internal columns take a class .col and you wrap all of these inside a .grid container. This defines every column at the same width and creates a uniform interface.

This default can be overridden by adding sizing classes to each column. This way you can have one column at 70% width and another column at 30% width (e.g. content/sidebar).

You’ll find tons of grid samples on the Gridlex home page with live demos and code snippets to copy/paste into your site. It’s a huge library with so many optional classes to help you build the simplest grids for any website.

All grids add up to a total of 12 mini-columns, so you can define how much space each column should take up. This may seem confusing but it makes sense when you see the visual demos.

Here’s a code example used for a larger grid with varying widths:

<div class="grid">
  <div class="col">...</div>
  <div class="col-2_sm-12">...</div>
  <div class="col-6_sm-12">...</div>
</div>

Note that the .grid class contains everything and the columns attempt to split into 12 parts (in the example this would be ⅓ width for each). However, the fixed columns span 2 and 6 cols respectively, so the very first column uses an automatic width based on whatever’s left.

Using the other two columns, we can deduce that there would be 4 columns (12-6-2) left to hit a total of 12. It’s all very simple math but the class names can be confusing. Once you start playing with Gridlex on a project, you’ll pick up the naming system quickly.

Gridlex is currently in version 2.x and it’s constantly being updated on GitHub. As browser support grows, I’d guarantee more attention to flexbox, with more sites adopting this model for page grids.

You can even find a full gallery of websites running Gridlex to see how this looks when applied to live websites.

If you’ve never used flexbox before then Gridlex can be a fun library to play with. But I also recommend practicing first using fun flexbox games to test your knowledge and help you understand the fundamentals.

Gridlex is available for free in the GitHub repo or you can pull it via npm or bower. It offers full documentation on the main site, including demos for varying-width columns and media queries.

You have full control over the flexbox design and it only takes a few CSS classes to make it happen! And if you ever have a quick question or wanna share a site you built using Gridlex you can message the creator on Twitter @webdevlint.

Recommended Reading: Flexbox Patterns: The Ultimate CSS Flexbox Code Library