Thumbnail

Gridlex - A useful Flexbox grid system

Thumbnail

Feb Dao

|

CSS Flexbox makes it much easier to create responsive layout. Using a tool such as `Gridlex` is easier than coding your own flexbox grid from scratch.

1. What is Gridlex?

Gridlex is a free open source flexbox library, it is lightweight and easy to customize.

2. Why should you use Gridlex?

Gridlex provides a grid class system .grid and .col with tons of ways to use. You will find grid samples on the Gridlex home page (http://gridlex.devlint.fr/) with live demos and code snippets to copy and paste into your site.

3. How to use Gridlex?

You just need to wrap your .col in a .grid.

There are 3 ways to use the Girdlex

1. The basic: Just add a class gird-* (from 1 to 12)

This is the simplest way to create a grid, in this ways, you will always have the specified number of columns in a row

Basic grid
<div class="grid-3_xs-1">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

2. The precise: Compose cell by cell (with class like .col-*)

The precise
<div class="grid">
    <div class="col-12">...</div> <!-- first row: one column -->
    <div class="col-6">...</div> <!-- second row: three columns (6+3+3) -->
    <div class="col-3">...</div>
    <div class="col-3">...</div>
</div>

3. The automatic: Just add number of cells you want in the grid

Auto width columns, no size on cells, the number determines the width (size = grid/cells children) and you will only be a row!

Grid auto
<div class="grid"> <!-- Four <div class="col"> for 4 columns in the grid -->
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

4. Bonus: You can mix the 3 ways :D

Grid mixed
<div class="grid-6_sm-2">
    <!-- first row -->
    <div class="col-8_sm-12">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <!-- second row -->
    <div class="col">...</div>
    <div class="col-5_sm-6">...</div>
    <div class="col-2">...</div>
    <div class="col-1_sm-4">...</div>
    <div class="col">...</div>
    <!-- third row -->
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

You can use a lot of grid options

- No gutter: 

<div class="grid-noGutter">
    <div class="col-12">...</div>
    <div class="col-6">...</div>
    <div class="col-6">...</div>
    <div class="col-4">...</div>
    <div class="col-8">...</div>
    <div class="col-3">...</div>
    <div class="col-9">...</div>
    <div class="col-1">...</div>
    <div class="col-11">...</div>
</div>

 

- Hidden at breakpoints:

<div class="col-12 lg-hidden"></div>
<div class="col-12 md-hidden"></div>
<div class="col-12 sm-hidden"></div>
<div class="col-12 xs-hidden"></div>

 

- Horizontal elignment

<div class="grid-3">
    <div class="col">...</div>
</div>
<div class="grid-3-center">
    <div class="col">...</div>
</div>
<div class="grid-3-right">
    <div class="col">...</div>
</div>

 

- Vertical alignment on the grid

Top

<div class="grid">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

Middle

<div class="grid-middle">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

Bottom

<div class="grid-bottom">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

Mixed columns

<div class="grid-4-middle">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col-bottom">...</div>
    <div class="col-top">...</div>
</div>

 

- Reverse

<div class="grid-reverse">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
    <div class="col">E</div>
</div>

 

- Equal-height

<div class="grid-noGutter-equalHeight">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

 

And a lot of other features, you can find out on the site: http://gridlex.devlint.fr/Gridlex is currently in version 2.7.1 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.

 

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.

Comments

  • Allowed HTML tags: <em> <strong> <cite> <blockquote cite> <ul type> <ol start type> <li> <dl> <dt> <dd> <p>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
  • Use [gist:#####] where ##### is your gist number to embed the gist
    You may also include a specific file within a multi-file gist with [gist:####:my_file].

Spread the word