Create Modern Layouts Easily with Gridlex CSS Grid System

Frontend growth has softened radically with a introduction of CSS flexbox. This creates it most easier to create grids columns that naturally change for manageable layouts.

Instead of coding your possess flexbox grid from scratch, it’s distant easier to use a apparatus such as Gridlex. This giveaway open source flexbox library is super-lightweight and really easy to customize.

gridlex trademark homepagegridlex trademark homepage

All we do is add a Gridlex stylesheet to your webpage and work with a grid classes. Internal columns take a category .col and we hang all of these inside a .grid container. This defines any mainstay at a same width and creates a uniform interface.

This default can be overridden by adding sizing classes to any column. This approach we can have one mainstay during 70% breadth and another mainstay during 30% breadth (e.g. content/sidebar).

UI Design: An Intro to Flexible Box

UI Design: An Intro to Flexible Box

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

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

All grids supplement adult to a total of 12 mini-columns, so we can conclude how most space any mainstay should take up. This might seem treacherous though it creates clarity when we see a visible demos.

Here’s a code example used for a incomparable 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 a .grid category contains all and a columns try to split into 12 parts (in a instance this would be ⅓ breadth for each). However, a bound columns span 2 and 6 cols respectively, so a really initial mainstay uses an involuntary width formed on whatever’s left.

Using a other dual columns, we can ascertain that there would be 4 columns (12-6-2) left to hit a sum of 12. It’s all really elementary math though a category names can be confusing. Once we start personification with Gridlex on a project, you’ll collect adult a fixing complement quickly.

Gridlex is now in chronicle 2.x and it’s constantly being updated on GitHub. As browser support grows, I’d pledge some-more courtesy to flexbox, with some-more sites adopting this indication for page grids.

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

gridlex scss gridgridlex scss grid

If you’ve never used flexbox before afterwards Gridlex can be a fun library to play with. But we also suggest practicing initial regulating fun flexbox games to exam your believe and assistance we know a fundamentals.

Gridlex is available for free in a GitHub repo or we can lift it around npm or bower. It offers full documentation on a main site, including demos for varying-width columns and media queries.

You have full control over a flexbox pattern and it usually takes a few CSS classes to make it happen! And if we ever have a discerning doubt or wanna share a site we built regulating Gridlex we can summary a creator on Twitter @webdevlint.

Add Comment