Row and Column structures

Instructions:

◦ Current styles (colors, margins, paddings... and the Row and Column headings) are only visible here to be more understandable.

◦ To define the number of Columns, edit the value of the Sass $grid-columns-number var (default: 16).

◦ All content (including new levels of Rows) are necessarily contained in a Column: a row will never have any other content than Columns.

◦ Columns are necessarily containred in a parent Row: a Column cannot exist without a Row.

◦ To not break the Grid structure, only the Rows can receive additional classes to set the dimensions (paddings, height...) and I recommend to do the same about the themes (colors, backgrounds...) and so, in order to get some uniform code, and I recommend to not stylise the Columns.

grid__row--divided-1
grid__column--filling-1
grid__row--divided-2
grid__column--filling-2
grid__row--divided-2
grid__column--filling-1
grid__column--filling-1
grid__row--divided-3
grid__column--filling-1
grid__column--filling-1
grid__column--filling-1
grid__row--divided-3
grid__column--filling-1
grid__column--filling-1
grid__row--divided-12
grid__column--filling-4
grid__column--filling-8
grid__row--full
grid__column--filling-auto
grid__column--filling-auto
grid__row--full
grid__column--filling-remaining
grid__column--filling-auto
grid__row--full
grid__column--filling-auto
grid__column--filling-remaining
grid__row--full
grid__column--filling-remaining
grid__column--filling-remaining
grid__row--full
grid__column--filling-auto
grid__column--filling-remaining
grid__column--filling-auto
grid__row--full
grid__column--filling-remaining
grid__column--filling-auto
grid__column--filling-remaining

Horizontal alignments of the Row content

(in short: the Columns)

grid__row--divided-5 grid__row--aligning-content-left (default value)
grid__column--filling-1
grid__column--filling-1
grid__column--filling-1
grid__row--divided-5 grid__row--aligning-content-left (default value)
grid__column--filling-2
grid__column--filling-1
grid__row--divided-5 grid__row--aligning-content-right
grid__column--filling-1
grid__column--filling-1
grid__column--filling-1
grid__row--divided-5 grid__row--aligning-content-right
grid__column--filling-2
grid__column--filling-1
grid__row--divided-5 grid__row--aligning-content-center
grid__column--filling-1
grid__column--filling-1
grid__column--filling-1
grid__row--divided-5 grid__row--aligning-content-center
grid__column--filling-2
grid__column--filling-1
grid__row--divided-5 grid__row--aligning-content-justified
grid__column--filling-1
grid__column--filling-1
grid__column--filling-1
grid__row--divided-5 grid__row--aligning-content-justified
grid__column--filling-2
grid__column--filling-1
grid__row--divided-5 grid__row--aligning-content-distributed
grid__column--filling-1
grid__column--filling-1
grid__column--filling-1
grid__row--divided-5 grid__row--aligning-content-distributed
grid__column--filling-2
grid__column--filling-1

Vertical alignments of the Row content

(in short: the Columns)

grid__row--divided-3 grid__row--aligning-items-top (default value)
grid__column--filling-1
grid__column--filling-1
grid__column--filling-1
grid__row--divided-3 grid__row--aligning-items-bottom
grid__column--filling-1
grid__column--filling-1
grid__column--filling-1
grid__row--divided-3 grid__row--aligning-items-center
grid__column--filling-1
grid__column--filling-1
grid__column--filling-1
grid__row--divided-3 grid__row--aligning-items-stretched
grid__column--filling-1
grid__column--filling-1
grid__column--filling-1

Self vertical alignments of a Column into its Row

grid__row--divided-3 grid__row--aligning-items-stretched
grid__column--filling-1
grid__column--filling-1 grid__column--aligned-top
grid__column--filling-1
grid__row--divided-3 grid__row--aligning-items-stretched
grid__column--filling-1
grid__column--filling-1 grid__column--aligned-bottom
grid__column--filling-1
grid__row--divided-3 grid__row--aligning-items-stretched
grid__column--filling-1
grid__column--filling-1 grid__column--aligned-center
grid__column--filling-1
grid__row--divided-3 grid__row--aligning-items-stretched
grid__column--filling-1
grid__column--filling-1 grid__column--aligned-stretched
grid__column--filling-1

Vertical alignments of the Column content

(can be everything, like a new level of Rows)

grid__row--divided-1
grid__column--filling-1 grid__column--aligning-content-top (default)
Some content
To show you how it
Works!
grid__row--divided-1
grid__column--filling-1 grid__column--aligning-content-bottom
Some content
To show you how it
Works!
grid__row--divided-1
grid__column--filling-1 grid__column--aligning-content-center
Some content
To show you how it
Works!
grid__row--divided-1
grid__column--filling-1 grid__column--aligning-content-justified
Some content
To show you how it
Works!
grid__row--divided-1
grid__column--filling-1 grid__column--aligning-content-distributed
Some content
To show you how it
Works!

Horizontal alignments of the Column content

(can be everything, like a new level of Rows)

grid__row--divided-1
grid__column--filling-1 grid__column--aligning-items-stretch (default)
Some content
To show you how it
Works!
grid__row--divided-1
grid__column--filling-1 grid__column--aligning-items-left
Some content
To show you how it
Works!
grid__row--divided-1
grid__column--filling-1 grid__column--aligning-items-right
Some content
To show you how it
Works!
grid__row--divided-1
grid__column--filling-1 grid__column--aligning-items-center
Some content
To show you how it
Works!

Self horizontal alignments of a Row in its Column

grid__row--divided-1
grid__column--filling-1
grid__row--divided-1
grid__row--divided-1 grid__row--aligned-left
grid__row--divided-1
grid__row--divided-1
grid__column--filling-1
grid__row--divided-1
grid__row--divided-1 grid__row--aligned-right
grid__row--divided-1
grid__row--divided-1
grid__column--filling-1
grid__row--divided-1
grid__row--divided-1 grid__row--aligned-center
grid__row--divided-1
grid__row--divided-1
grid__column--filling-1
grid__row--divided-1
grid__row--divided-1 grid__row--aligned-stretched
grid__row--divided-1