Grid layout

Grid layout system

 .grd

This layout makes use of the global flx union

Requirements:

Define the amount of columns & rows making use of the modifiers or unions

Modifiers:

Columns count

Defines not only the column count but also the behavior. Rows are calculated autamatically when using auto-fit or auto-fill

 /** auto-fit with min column size of 18rem (270px aprox) & no max size (flexible) */
 .grd.--grdColumns

 /** auto-fit with min column size of 6rem (90px aprox) & fitting content max size */
 .grd.--grdColumns-autoMin

 /** auto-fit without min column size & no max size (flexible) */
 .grd.--grdColumns-auto

 /** auto-fill without min column size & no max size (flexible) */
 .grd.--grdColumns-autoFill

 /** single column */
 .grd.--grdColumns-single

 /** fixed amount of columns (2-12) */
 .grd.--grdColumns-auto2

Unions:

Left aligned voids

Allows the usage of common void usecases with the content at the left.
First value represents the void proportional size. A single row is defined.

 /** 1 to 1 proportion */
 .grd.--grdVoidLeft
 .grd.--grdVoidLeft-1
 .grd.--grdVoidLeft-1-1

 /** 1 to 4 proportion */
 .grd.--grdVoidLeft-1-4

 /** 2 to 3 proportion */
 .grd.--grdVoidLeft-2-3

 /** 3 to 2 proportion */
 .grd.--grdVoidLeft-3-2

Right aligned voids

Allows the usage of common void usecases with the content at the right.
Second value represents the void proportional size. A single row is defined.

 /** 1 to 1 proportion */
 .grd.--grdVoidRight
 .grd.--grdVoidRight-1
 .grd.--grdVoidRight-1-1

 /** 4 to 1 proportion */
 .grd.--grdVoidRight-4-4

 /** 2 to 3 proportion */
 .grd.--grdVoidRight-2-3

 /** 3 to 2 proportion */
 .grd.--grdVoidRight-3-2

Example

njk
<div class="flx --flxColumn">
 TODO: grid example
</div>
html compiled
<div class="flx --flxColumn">TODO: grid example</div>

Grid item

Optional class with the common styles for the grid layout item

 .grd-item

Requirements:

None, not even being inside of a grid component

Modifiers:

Item column span

How many columns the item can occupy

 /** 2 columns by default */
 .grd-item.--grdColumnSpan

 /** Column range from (2-12)  */
 .grd-item.--grdColumnSpan-2

Unions:

None

Example

njk
<div class="flx --flxColumn">
 TODO: grid item example
</div>
html compiled
<div class="flx --flxColumn">TODO: grid item example</div>