Layers Framework: Grids

Layers Framework

Last Updated: for: 1.5 Time to Read: 3 minutes

Layers ships with  a 12ths-based grid that uses a combination of CSS
flexbox
and
calc()
to align and auto-clear columns, creating an unbreakable grid. 

The basic HTML structure looks like this:

grid

flex
is declared on the
grid
class like this:

 

The
grid
class  sets the flex rules for the columns inside it and should wrap any layout that uses more than one column, or where child elements have a
span-
class.

The
grid
wrapper, shown in our example as a
div
with the
container
class,  determines the width of the row or content area everything is in.  This class is typically set automatically through PHP functions in the wrapper, such as
layers_center_column_class()
, but can be used directly to take advantage of their preset styles for streamlining your CSS:

.container will box the content, centered in the page with a default max-width of 1040px and a default margin.

.content will allow full width and includes several variations such as .content-main and .content-small.

These are already set for you in the Content and Post Widgets.

In static templates such as archive.php, we use .content-main followed by the
grid
wrapper.

Flexbox Resources:

Columns now use a combination of
flex-box
and
calc()
to determine width and spacing. This grid method does away with
:nth-child
counters for clearing margins and floats. In fact, our columns don’t even use
float
anymore, allowing for better mobile compatibility.

To start, each column has a class of
column
or
column-flush
Reference: framework.css

With
column
, we apply margin on both sides so that we don’t have to use
:nth-child
counters to clear it for each new row.

 

With
column-flush
, the margins are removed.

The
column
classes are used programmatically in Layers, so must be added to any column element that has a
span-
class on it.

Widths

Calc() is used to calculate grid sizes less 20px. Each column takes a
span-
class that is numbered by its fraction of 12, then its width determined by calculating what that fraction of 12 would be on your screen size, where 12 is 100%

The following example shows how the
span-4
class looks:

Reference: framework.css line 206

For example, if you have a
grid
inside a wrapper using the
container
class,
span-4
will divide the total width of the container (1040px) by 3 (the number of times you can divide 12 by 4) and arrive at roughly 346px.

See Getting Started with CSS Calc on Smashing Magazine for a primer if you are new to calc().

1
1
1
1
1
1
1
1
1
1
1
1
.span-2
.span-2
.span-2
.span-2
.span-2
.span-2
.span-3
.span-3
.span-3
.span-3
.span-4
.span-4
.span-4
.span-5
.span-5
.span-5
.span-6
.span-6
.span-7
.span-5
.span-8
.span-4
.span-9
.span-3
.span-10
.span-2
.span-11
1
Center any column with the .middled class

Grid without spaces

By using column-flush span-# you can create columns which are flush against each other.

1
1
1
1
1
1
1
1
1
1
1
1
.span-2
.span-2
.span-2
.span-2
.span-2
.span-2
.span-3
.span-3
.span-3
.span-3
.span-4
.span-4
.span-4
.span-5
.span-5
.span-2
.span-6
.span-6
.span-7
.span-5
.span-8
.span-4
.span-9
.span-3
.span-10
.span-2
.span-11
1

You can have any number of columns using any combination of span- classes, though each row can only equal 12.  For example:

Blog Style Layout

Three Columns

In the following example, the last two columns would drop to their own row, leaving the first column alone:

Columns per row differ between screen sizes.

Reference: responsive.css

Here is a breakdown of those variations:
.span-2
Desktop: 6 per row
Tablet: 3 per row
Phone: 2 per row
.span-3
Desktop: 4 per row
Tablet: 2 per row
Phone: 1 per row

.span-4
Desktop: 3 per row
Tablet: 3 per row
Phone: 1 per row

.span-5
Desktop: 2 per row
Tablet: 2 per row
Phone: 1 per row

.span-6
Desktop: 2 per row
Tablet: 2 per row
Phone: 1 per row

Thereafter anything above
.span-6
 is 1 per row from Tablet down.

Layers has a mobile-first, fully responsive grid system that adapts to smaller screens. When customizing framework css, it is important the mobile views are also adjusted where needed

Let’s look at a responsive grid. Elements within this grid will be
width: 100%
on small screens, but will  become
width: 33.33%
on medium-sized screens and above.

Flexbox and Calc() are not fully supported in older browsers such as Safari 6 or IE10. See the following for current version listings and known issues:

CSS Calc Browser Support

CSS Flexbox Browser Support