FluiD
Grid

beta
Documentation

Beware, that in following examples

background-clip: content-box;
background-color: #xyz;

styles are applied to all grid cells, unless stated otherwise.

.f-grid-gap-1 is used in most of the examples.

Grid (parent)

.f-grid

Define element as grid container.

Cell size in grid is resolved differently if:

  1. there is only one row, cell size is defined by a fraction (similar to percents of grid)
  2. cells start wrapping to second row, once number of columns multiplied by $minimal-column-width is higher than container's width.

Behavior 1. can be avoided by appling class f-grid-solid or f-grid-solid-N

Fractions:
f-col-1
f-col-2
f-col-3
Defined by $minimal-column-width:
f-col-1
f-col-2
f-col-2
f-col-2
f-col-2
f-col-2
f-col-2
<div class="y-1">Fractions:</div> 
<div class="f-grid f-grid-gap-1">
  <div class="f-col-1">f-col-1</div> 
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-3">f-col-3</div>
</div> 
<div class="y-1">Defined by 
  <b class="grid-option">$minimal-column-width</b>:
</div> 
<div class="f-grid f-grid-gap-1">
  <div class="f-col-1">f-col-1</div> 
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-2">f-col-2</div>
</div>

.f-container

Used on parent of f-grid-N or f-grid-N-M

.f-grid-N

By adding f-grid-N to f-grid, it limits number of columns in grid to N

Must be wrapped into f-container

N is number from 2 to $max-colspan

This class ensures that columns behaves like fractions rather than optimal sized ones, once grid is wider than N * $minimal-column-width. Once the grid becomes smaller then N, it starts behaving like regular grid

It does not work together with f-grid-solid!

With f-grid-5 :
f-col-5
f-col-2
f-col-3
Without f-grid-5 :
f-col-5
f-col-2
f-col-3
<div class="y-1">With 
  <a href="/docs#f-grid-n" class="clas">f-grid-5</a> :
</div> 
<div class="f-container">
  <div class="f-grid f-grid-5">
    <div class="f-col-5">f-col-5</div> 
    <div class="f-col-2">f-col-2</div> 
    <div class="f-col-3">f-col-3</div>
  </div>
</div> 
<div class="y-1">Without 
  <a href="/docs#f-grid-n" class="clas">f-grid-5</a> :
</div> 
<div class="f-grid">
  <div class="f-col-5">f-col-5</div> 
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-3">f-col-3</div>
</div>
Drag here

.f-grid-N-M

By adding f-grid-N-M to f-grid, it limits number of columns in grid to N but only when there are between N and M potential columns.

M is number from 2 to $max-colspan
N must be smaller than M

Must be wrapped into f-container

It does not work together with f-grid-solid!

with f-grid-5-7 and f-grid-3-5 applied to following grid:
f-col-4 f-col-3-7 f-col-2-5
f-col-4 f-col-2-7 f-col-1-5
<div class="f-container">
  <div class="y-1">with 
    <a href="/docs#f-grid-n-m" class="clas">f-grid-5-7</a> and
    <a href="/docs#f-grid-n-m" class="clas">f-grid-3-5</a> applied to following grid:
  </div> 
  <div class="f-grid f-grid-8 f-grid-5-7 f-grid-3-5">
    <div class="f-col-4 f-col-3-7 f-col-2-5">f-col-4 f-col-3-7 f-col-2-5</div> 
    <div class="f-col-4 f-col-2-7 f-col-1-5">f-col-4 f-col-2-7 f-col-1-5</div>
  </div>
</div>
Drag here

.f-grid-dense

Adds grid-auto-flow: dense; It tries to fill empty gaps in the grid with out of order elements.

With f-grid-dense:

f-col-5 (1)
f-col-4 (2)
f-col-3 (3)
f-col-4 (4)
f-col-1 (5)
f-col-1 (6)
f-col-1 (7)
f-col-1 (8)
<div class="f-grid f-grid-dense f-grid-gap-1">
  <div class="f-col-5">f-col-5 (1)</div> 
  <div class="f-col-4">f-col-4 (2)</div> 
  <div class="f-col-3">f-col-3 (3)</div> 
  <div class="f-col-4">f-col-4 (4)</div> 
  <div class="f-col-1">f-col-1 (5)</div> 
  <div class="f-col-1">f-col-1 (6)</div> 
  <div class="f-col-1">f-col-1 (7)</div> 
  <div class="f-col-1">f-col-1 (8)</div>
</div>

Without f-grid-dense:

f-col-5 (1)
f-col-4 (2)
f-col-3 (3)
f-col-4 (4)
f-col-1 (5)
f-col-1 (6)
f-col-1 (7)
f-col-1 (8)
<div class="f-grid f-grid-gap-1">
  <div class="f-col-5">f-col-5 (1)</div> 
  <div class="f-col-4">f-col-4 (2)</div> 
  <div class="f-col-3">f-col-3 (3)</div> 
  <div class="f-col-4">f-col-4 (4)</div> 
  <div class="f-col-1">f-col-1 (5)</div> 
  <div class="f-col-1">f-col-1 (6)</div> 
  <div class="f-col-1">f-col-1 (7)</div> 
  <div class="f-col-1">f-col-1 (8)</div>
</div>

.f-grid-solid

Uses repeat(auto-fill, ... instead of repeat(auto-fit, ....

If used and content of grid does not fill all potential cols, the content won't stretch into the unused space.

Unfortunately, if a grid with potential 12 columns is filled with many .f-col-5's, two right columns will be empty.

With f-grid-solid:

With two cells:
f-col-3
f-col-3
With many cells:
f-col-3
f-col-3
f-col-3
f-col-3
<div class="y-1">With two cells:</div> 
<div class="f-grid-wrap-overflow">
  <div class="f-grid f-grid-solid f-grid-gap-1 colored-bg">
    <div class="f-col-3">f-col-3</div> 
    <div class="f-col-3">f-col-3</div>
  </div>
</div> 
<div class="y-1">With many cells:</div> 
<div class="f-grid-wrap-overflow">
  <div class="f-grid f-grid-solid f-grid-gap-1 colored-bg ">
    <div class="f-col-3">f-col-3</div> 
    <div class="f-col-3">f-col-3</div> 
    <div class="f-col-3">f-col-3</div> 
    <div class="f-col-3">f-col-3</div>
  </div>
</div>
Drag here

Without f-grid-solid:

f-col-3
f-col-3
<div class="f-grid f-grid-gap-1">
  <div class="f-col-3">f-col-3</div> 
  <div class="f-col-3">f-col-3</div>
</div>

.f-grid-solid-N

Can be used on grid containing only identical f-col-N cells

N is number from 2 to $max-colspan

As shown above, the f-grid-solid works well as long as the columns won't fill the grid. Once the cells overflow to next "row" the f-grid-solid can leave empty column(s) at the end.

In order to get best of both worlds

  1. proportionally split remaining space between occupied columns, but
  2. to do it only when there is more than one row,

there is f-grid-solid-N.

This cannot be done by CSS grid syntax, but rather by good old margins.
It would require insanely huge amount css selectors to cover all possible combinations.
To limit the selectors to reasonable amount it only covers scenarios where all cells has same width f-col-n.

f-col-4
f-col-4
.f-grid-solid-4:
f-col-4
f-col-4
.f-grid-solid-2:
f-col-2
f-col-2
.f-grid-solid-3:
f-col-3
<div class="y-1">
  <a href="/docs#f-grid-solid" class="clas">f-grid-solid</a>:
</div> 
<div class="f-grid-wrap-overflow">
  <div class="f-grid f-grid-solid colored-bg ">
    <div class="f-col-4">f-col-4</div> 
    <div class="f-col-4">f-col-4</div>
  </div>
</div> 
<div class="y-1">.f-grid-solid-4:</div> 
<div class="f-grid-wrap-overflow">
  <div class="f-grid f-grid-solid-4 colored-bg ">
    <div class="f-col-4">f-col-4</div> 
    <div class="f-col-4">f-col-4</div>
  </div>
</div> 
<div class="y-1">.f-grid-solid-2:</div> 
<div class="f-grid-wrap-overflow">
  <div class="f-grid f-grid-solid-2 colored-bg ">
    <div class="f-col-2">f-col-2</div> 
    <div class="f-col-2">f-col-2</div>
  </div>
</div> 
<div class="y-1">.f-grid-solid-3:</div> 
<div class="f-grid-wrap-overflow">
  <div class="f-grid f-grid-solid-3 colored-bg ">
    <div class="f-col-3">f-col-3</div>
  </div>
</div>
Drag here

.f-grid-N-collapse

Tells when children of the container collapse to full width. f-grid-n-collapse collapse when container is smaller than (N + 1) * $minimal-column-width.

N is number from 2 to $max-colspan

with f-grid-4-collapse:

f-col-3
f-col-2
f-col-1
<div class="f-grid f-grid-4-collapse f-grid-gap-1">
  <div class="f-col-3">f-col-3</div> 
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-1">f-col-1</div>
</div>
Drag here

.f-grid-gap-N

Set the gap between elements of column. Default is 0

f-grid-gap-05 Half of common gap
f-grid-gap-1 Common gap
f-grid-gap-2 Double the common gap
f-grid-gap-3 Triple the common gap
f-col-2
f-col-2
f-col-2
f-col-2
f-col-2
f-col-2
f-col-2
f-col-2
f-col-2
f-col-2
f-col-2
f-col-2
f-col-2
f-col-2
f-col-2
<div class="f-grid">
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-2">f-col-2</div>
</div> 
<div class="f-grid f-grid-gap-05">
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-2">f-col-2</div>
</div> 
<div class="f-grid f-grid-gap-1">
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-2">f-col-2</div>
</div> 
<div class="f-grid f-grid-gap-2">
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-2">f-col-2</div>
</div> 
<div class="f-grid f-grid-gap-3">
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-2">f-col-2</div>
</div>

Gaps can differ across nested grids

f-col-4
f-col-5
f-col-2
f-col-2
f-col-2
<div class="f-grid f-grid-gap-3">
  <div class="f-col-4">f-col-4</div> 
  <div class="f-col-5">f-col-5
    <div class="f-grid f-grid-gap-05">
      <div class="f-col-2">f-col-2</div> 
      <div class="f-col-2">f-col-2</div> 
      <div class="f-col-2">f-col-2</div>
    </div>
  </div>
</div>

Cell (children)

.f-col-N

Defines element as grid's cell, which spans across N columns

N is number from 2 to $max-colspan

f-col-1
f-col-2
f-col-3
<div class="f-grid f-grid-gap-1">
  <div class="f-col-1">f-col-1</div> 
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-3">f-col-3</div>
</div>

If there are not enough elements to fill the first row, cells will consume all remaining space evenly. This can be used for creation of layouts.

See two following examples, to understand a layout usage of fluid grid. The only difference is the point, when columns start collapsing one below another.

Grid one:
f-col-1
f-col-1
Grid two:
f-col-3
f-col-3
f-col-3
f-col-3
Grid one:
<div class="f-grid f-grid-gap-1">
  <div class="f-col-1">f-col-1</div> 
  <div class="f-col-1">f-col-1</div>
</div>
			Grid two:
<div class="f-grid f-grid-gap-1">
  <div class="f-col-3">f-col-3</div> 
  <div class="f-col-3">f-col-3</div> 
  <div class="f-col-3">f-col-3</div> 
  <div class="f-col-3">f-col-3</div>
</div>
Drag here

.f-col-max

Defines element as grid's cell, which spans across all avaiable columns

f-col-3
f-col-3
f-col-3
f-col-3
f-col-max
<div class="f-grid f-grid-gap-1">
  <div class="f-col-3">f-col-3</div> 
  <div class="f-col-3">f-col-3</div> 
  <div class="f-col-3">f-col-3</div> 
  <div class="f-col-3">f-col-3</div> 
  <div class="f-col-max">f-col-max</div>
</div>
Drag here

It can happen, that the f-col-max creates new (empty) columns, which would not be defined otherwise. Be smart when using this class, as it can lead to weird result.

.f-row-N

Defines element as grid's cell, which spans across N rows

N is number from 2 to $max-rowspan

f-col-3
f-col-3 f-row-2
f-col-3
f-col-3
f-col-3
<div class="f-grid f-grid-gap-1">
  <div class="f-col-3">f-col-3</div> 
  <div class="f-col-3 f-row-2">f-col-3 f-row-2</div> 
  <div class="f-col-3">f-col-3</div> 
  <div class="f-col-3">f-col-3</div> 
  <div class="f-col-3">f-col-3</div>
</div>
Drag here

.f-row-N-M

Tells how many rows the element will take between N and M grid size (column count)

M is number from 2 to $max-colspan
N is number from 1 to $max-rowspan

f-col-3
f-col-3 f-row-2 f-row-1-6
f-col-3
f-col-3
f-col-3
<div class="f-grid f-grid-gap-1">
  <div class="f-col-3">f-col-3</div> 
  <div class="f-col-3 f-row-2 f-row-1-6">f-col-3 f-row-2 f-row-1-6</div> 
  <div class="f-col-3">f-col-3</div> 
  <div class="f-col-3">f-col-3</div> 
  <div class="f-col-3">f-col-3</div>
</div>
Drag here

.f-col-N@M

Defines how many columns the element will take N at specific grid size (column count) M

M is number from 2 to $max-colspan
N is number from 1 to $max-rowspan

N must be always smaller than M

See below: When there are M (4) columns in the grid, the cell only takes N (2)

f-col-4
f-col-3 f-col-2@4
f-col-1
f-col-1
f-col-1
f-col-1
f-col-1
<div class="f-grid f-grid-gap-1">
  <div class="f-col-4">f-col-4</div> 
  <div class="f-col-3 f-col-2@4">f-col-3 f-col-2@4</div> 
  <div class="f-col-1">f-col-1</div> 
  <div class="f-col-1">f-col-1</div> 
  <div class="f-col-1">f-col-1</div> 
  <div class="f-col-1">f-col-1</div> 
  <div class="f-col-1">f-col-1</div>
</div>
Drag here

.f-col-N-M

Defines how many columns the element will take N,when grid size (column count) is between N and M

M is number from 2 to $max-colspan

N must be always smaller than M

See below: When there are between 2-5 columns in the grid, the cell only takes N (2)

f-col-5 f-col-2-5
f-col-5 f-col-2-5
f-col-5 f-col-2-5
<div class="f-grid f-grid-gap-1">
  <div class="f-col-5 f-col-2-5">f-col-5 f-col-2-5</div> 
  <div class="f-col-5 f-col-2-5">f-col-5 f-col-2-5</div> 
  <div class="f-col-5 f-col-2-5">f-col-5 f-col-2-5</div>
</div>
Drag here

.f-col-N-collapse

At what container size N or smaller, the cell itself should collapse to full width.

f-col-3 f-col-6-collapse
f-col-1
f-col-1
f-col-1
f-col-1
f-col-1
f-col-1
<div class="f-grid f-grid-gap-1">
  <div class="f-col-3 f-col-6-collapse">f-col-3 f-col-6-collapse</div> 
  <div class="f-col-1">f-col-1</div> 
  <div class="f-col-1">f-col-1</div> 
  <div class="f-col-1">f-col-1</div> 
  <div class="f-col-1">f-col-1</div> 
  <div class="f-col-1">f-col-1</div> 
  <div class="f-col-1">f-col-1</div>
</div>
Drag here

Max N is defined during build time of the grid

Nested grids

.f-grid-bottom, .f-grid-center, .f-grid-top

If cell f-col-N is a f-grid at the same time, it can get one of this three classes to align cells of the nested grid

f-col-2
f-col-1
f-col-1
f-col-1
<div class="f-grid f-grid-gap-1">
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-4 f-grid f-grid-bottom">
    <div class="f-col-1">f-col-1</div> 
    <div class="f-col-1">f-col-1</div> 
    <div class="f-col-1">f-col-1</div>
  </div>
</div>

Grids can be nested "infinitely"

If you don't use Gaps with combination with backgrounds on cells you can define f-grid on f-col-N directly:

<div class="f-col-2 f-grid"></div>

With background-clip: content-box;

f-col-2
f-col-1
f-col-1
f-col-1

Without background-clip: content-box;

f-col-2
f-col-1
f-col-1
f-col-1
<p>
  <b>With</b> 
  <i>background-clip: content-box;</i>
</p> 
<div class="mb-1">
  <div class="f-grid f-grid-gap-1">
    <div class="f-col-2">f-col-2</div> 
    <div class="f-col-2 f-grid">
      <div class="f-col-1">f-col-1</div> 
      <div class="f-col-1 f-grid ">
        <div class="f-col-1">f-col-1</div> 
        <div class="f-col-1">f-col-1</div>
      </div>
    </div>
  </div>
</div> 
<p>
  <b>Without</b> 
  <i>background-clip: content-box;</i>
</p> 
<div class="no-background-clip">
  <div class="f-grid f-grid-gap-1">
    <div class="f-col-2">f-col-2</div> 
    <div class="f-col-2 f-grid">
      <div class="f-col-1">f-col-1</div> 
      <div class="f-col-1 f-grid ">
        <div class="f-col-1">f-col-1</div> 
        <div class="f-col-1">f-col-1</div>
      </div>
    </div>
  </div>
</div>

If you need backgrounds on cells (Grid with gaps and without background-clip), you can nest f-grid into an f-col-N

With background-clip: content-box;

f-col-2
f-col-1
f-col-1
f-col-1

Without background-clip: content-box;

f-col-2
f-col-1
f-col-1
f-col-1
<p>
  <b>With</b> 
  <i>background-clip: content-box;</i>
</p> 
<div class="mb-1">
  <div class="f-grid f-grid-gap-1">
    <div class="f-col-2">f-col-2</div> 
    <div class="f-col-2">
      <div class="f-grid f-grid-gap-1">
        <div class="f-col-1">f-col-1</div> 
        <div class="f-col-1">
          <div class="f-grid f-grid-gap-1">
            <div class="f-col-1">f-col-1</div> 
            <div class="f-col-1">f-col-1</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div> 
<p>
  <b>Without</b> 
  <i>background-clip: content-box;</i>
</p> 
<div class="no-background-clip">
  <div class="f-grid f-grid-gap-1">
    <div class="f-col-2">f-col-2</div> 
    <div class="f-col-2">
      <div class="f-grid f-grid-gap-1">
        <div class="f-col-1">f-col-1</div> 
        <div class="f-col-1">
          <div class="f-grid f-grid-gap-1">
            <div class="f-col-1">f-col-1</div> 
            <div class="f-col-1">f-col-1</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Dealing with backgrounds (if used with gaps)

Tips and Drawbacks

Gaps and Backgrounds

Beware that there are several issues when combining f-grid-gap-N on grid and cell with background-color. See examples in section below and above.

If you need various backgrounds to be used on different cells, and you can afford not using f-grid-gap-N, it is probably the most straightforward way. You can then apply padding by nested elements of the grid cells. Otherwise see the tricks...

The Gap

By default gap between cels is set to 0. But gap can be set by f-grid-gap-N class.

The Fluid grid does not use CSS gap property. The reasons are:

  1. poor support for cell backgrounds. (One can not add background to cells including the gap itself)
  2. Container queries would need to be defined for each gap option, so the generated CSS code would be many times bigger if real grid gp is used

As it is a common requirement to have a grid based layout with differently colored backgrounds of different cells, and mostly the gaps should not be white :), the only way is to use old fashioned negative margin for grid and positive padding for cells to compensate it.

You can use grid without gaps and used extra nested elements for spacings and background. It would just require additional HTML markup which is mostly not desired

Background-clip

Because negative margin / positive padding technique is used in Fluid grid, background applied to cell also covers half of gap width around. In this way you can add different backgrounds to different cells while avoiding the gaps being white.

If you wish a background not to cover gaps (as you can see in examples all around) you need to apply following style to cells:

background-clip: content-box;

With background-clip: content-box on cells:

f-col-2
f-col-2
<div class="f-grid background-clip f-grid-gap-1">
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-2">f-col-2</div>
</div>

(Default) Without background-clip: content-box on cells:

f-col-2
f-col-2
<div class="f-grid no-background-clip f-grid-gap-1">
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-2">f-col-2</div>
</div>

Grid wrappers (for background handling of grids with gaps)

.f-grid-wrap-overflow

By adding this class to a wrapper of the f-grid element,

overflow:hidden;

is applied to the wrapper. This fixes potential issues with backgrounds applied to f-grid elements with f-grid-gap-N

With f-grid-wrap-overflow (bg on grid itself):

f-col-2
f-col-2

Without f-grid-wrap-overflow (bg on grid itself):

f-col-2
f-col-2
<p>With 
  <a href="/docs#f-grid-wrap-overflow" class="clas">f-grid-wrap-overflow</a> (bg on
			grid itself):
</p> 
<div class="f-grid-wrap-overflow">
  <div class="f-grid colored-bg f-grid-gap-1">
    <div class="f-col-2">f-col-2</div> 
    <div class="f-col-2">f-col-2</div>
  </div>
</div> 
<p>Without 
  <a href="/docs#f-grid-wrap-overflow" class="clas">f-grid-wrap-overflow</a> (bg
			on grid itself):
</p> 
<div class="f-grid colored-bg f-grid-gap-1">
  <div class="f-col-2">f-col-2</div> 
  <div class="f-col-2">f-col-2</div>
</div>

Beware that this overflow has impact on relatively/abolutely positioned elements inside the grid. They (tooltips etc.) cannot be positined outisde of borders of the grid

.f-grid-wrap-fix

By adding this class to a wrapper of the f-grid element, following style is applied:

padding-block: 0.02px;

It fixes potential issues with backgrounds applied to wrapper of f-grid element when f-grid-gap-N is used on the grid

You won't need this fix in case your wrapper already has top and bottom paddings.

With f-grid-wrap-fix:

f-col-2
f-col-2
f-col-2
f-col-2

Without f-grid-wrap-fix:

f-col-2
f-col-2
<p>With 
  <a href="/docs#f-grid-wrap-fix" class="clas">f-grid-wrap-fix</a>:
</p> 
<div class="f-grid-wrap-fix colored-bg">
  <div class="f-grid f-grid-gap-1">
    <div class="f-col-2">f-col-2</div> 
    <div class="f-col-2">f-col-2
      <div class="f-grid f-grid-gap-1">
        <div class="f-col-2">f-col-2</div> 
        <div class="f-col-2">f-col-2</div>
      </div>
    </div>
  </div>
</div> 
<p>Without 
  <a href="/docs#f-grid-wrap-fix" class="clas">f-grid-wrap-fix</a>:
</p> 
<div class="colored-bg">
  <div class="f-grid f-grid-gap-1">
    <div class="f-col-2">f-col-2</div> 
    <div class="f-col-2">f-col-2</div>
  </div>
</div>

This is kind of hack used to mitigate a css "bug".

Issue is, that if element with negative margin top/bottom is wrapped to another elmement. The wrapper's height is increased by the negative margin, unless the wrapper has applied top/mottom padding on it.