Gridlex

Just a Flexbox Grid System

v. 2.7.1

Based on Flexbox (CSS Flexible Box Layout Module), Gridlex is a very simple css grid system to quickly create modern layouts and submodules.

The concept is simple: you need to wrap your .col in a .grid.

What can we expect?

• Basically each column is the same width as every other cell in the grid.
• But you can add sizing classes to individual columns.
• For responsive designs, you can add classes based on media-queries.
• Top, bottom, or middle. For the grid. And for the columns.
• Grids can be nested. Always. Directly in a column.

Sass, CSS?

I just wanna use it in my page!

To use Gridlex out of the box, call the gridlex.min.css file in your project :

Via CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.7.1/gridlex.min.css">

or

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridlex@2.7.1/dist/gridlex.min.css" integrity="sha256-z8OrWCce0gDjwavCHKqxiPIo74u8go25fRiqW6jefXk=" crossorigin="anonymous">

I want to include it in my source files!

Just include gridlex/src/gridlex.scss and update the $gl- vars:

<table> <thead> <tr> <th>Variable names</th> <th>Default value</th> </tr> </thead> <tbody> <tr> <td><code>$gl-colCount:</code></td> <td><code>12</code></td> </tr> <tr> <td><code>$gl-gridName:</code></td> <td><code>grid</code></td> </tr> <tr> <td><code>$gl-colName:</code></td> <td><code>col</code></td> </tr> <tr> <td><code>$gl-attributeName:</code></td> <td><code>class</code></td> </tr> <tr> <td><code>$gl-gutter:</code></td> <td><code>1rem</code></td> </tr> <tr> <td><code>$gl-gutter-vertical:</code></td> <td><code>1rem</code></td> </tr> <tr> <td><code>$gl-mq-width:</code></td> <td><code>'max-width'</code></td> </tr> <tr> <td><code>$gl-mq-list:</code></td> <td><pre><code>( lg: 80em, // max 1280px md: 64em, // max 1024px sm: 48em, // max 768px xs: 36em // up to 576px )</code></pre></td> </tr> </tbody> </table>

Install via Npm

npm install gridlex --save

Install via Bower

bower install gridlex --save

3 ways to use Gridlex

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

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

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

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

3- The automatic. Just add number of cells you want in the grid (.grid > .col)

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

Gridlex and media-queries

Because of responsive, you sometimes need to change the size of columns: with this keys as classes you can control your layout by media-queries.

Columns can be hidden at breakpoints using _*-0 (e.g. col-4_md-6_sm-0)

<table> <thead> <tr> <th>CSS Media Query</th> <th>Applies</th> <th>Usage</th> </tr> </thead> <tbody> <tr> <td><code>@media screen and (max-width: 36rem)</code></td> <td>Max 576px</td> <td><code><b>_xs</b>-*</code></td> </tr> <tr> <td><code>@media screen and (max-width: 48em)</code></td> <td>Max 768px</td> <td><code><b>_sm</b>-*</code></td> </tr> <tr> <td><code>@media screen and (max-width: 64em)</code></td> <td>Max 1024px</td> <td><code><b>_md</b>-*</code></td> </tr> <tr> <td><code>@media screen and (max-width: 80em)</code></td> <td>Max 1280px</td> <td><code><b>_lg</b>-*</code></td> </tr> </tbody> </table>

See more : http://gridlex.devlint.fr