Create Modern Layouts Easily with Gridlex CSS Grid System

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.

gridlex logo homepagegridlex logo homepage

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).

UI Design: An Intro to Flexible Box

UI Design: An Intro to Flexible Box

In a previous post, we have discussed that HTML elements are essentially a “box”. Traditionally, when we position…Read more

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>

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.

gridlex scss gridgridlex scss grid

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.

Source: http://www.hongkiat.com/blog/gridlex-flexbox-grid-system/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s