Silva.Earth

Layout ~ Grid

Flexify all the things

The grid module is a layout container to align multiple elements on a grid. As the grid is based on Flexbox, it has favorable behavior such as equal height and easy alignment out of the box. Responsive cell sizing and breakpoints are entirely declarative, where you can optimize for only the sizes you need.

Default grid

By default, the grid behaves as a flexbox container. Without sizes set on grid cells, they are evenly distributed. The height of a grid cell automatically takes up the height of the tallest grid cell in the row. Both the grid and grid cells have no gutter by default.

I am a grid cell

I am a grid cell

I am a grid cell
that takes up more height

I am a cell that has some text in it

I am a grid cell
that takes up more height

I am a grid cell
that takes up
even more height

Grid alignment

Vertical

All cells in a grid row can be aligned to the top, middle, or bottom.

I am a cell in a top-aligned grid that has some text in it

I am a cell that has some more text in it I am a cell that has some more text in it I am a cell that has some more text in it

I am a cell in a top-aligned grid that has some text in it

I am a cell in a middle-aligned grid that has some text in it

I am a cell that has some more text in it I am a cell that has some more text in it I am a cell that has some more text in it

I am a cell in a middle-aligned grid that has some text in it

I am a cell in a bottom-aligned grid that has some text in it

I am a cell that has some more text in it I am a cell that has some more text in it I am a cell that has some more text in it

I am a cell in a bottom-aligned grid that has some text in it

Grid alignment

Horizontal

By default, grid cells take up available space in the row. However, if a grid cell has a specific size that does not take up all space in a row, all cells in the row can be aligned to the left, center, right, space-around or space-between.

I am a cell in a left-aligned grid that has some text in it

I am a cell that has some more text in it I am a cell that has some more text in it I am a cell that has some more text in it

I am a cell in a center-aligned grid that has some text in it

I am a cell that has some more text in it I am a cell that has some more text in it I am a cell that has some more text in it

I am a cell in a right-aligned grid that has some text in it

I am a cell that has some more text in it I am a cell that has some more text in it I am a cell that has some more text in it

I am a cell in a space-around grid that has some text in it

I am a cell that has some more text in it I am a cell that has some more text in it I am a cell that has some more text in it

I am a cell in a space-between grid that has some text in it

I am a cell that has some more text in it I am a cell that has some more text in it I am a cell that has some more text in it

Cell alignment

Vertical

Individual cells in a row can be aligned to the top, middle, bottom, or have a default alignment.

Top aligned cell

Middle-aligned cell

Bottom-aligned cell

Cell with no specific alignment
Cell with no specific alignment
Cell with no specific alignment

Cell alignment

Horizontal

Individual cells in a row can be aligned to the left, center, or right.

Left aligned cell

Center-aligned cell

Right-aligned cell

Cell sizing

Set cell-specific widths

By default, individual cells take up available space in a row, yet this can overridden per cell.

1/6

1/4

1/3

1/2

2/3

3/4

1/1

1/3

1/2

auto

1/2

1/2

1/2

1/2

Golden

Ratio

Gutters

Horizontal

Horizontal gutters between cells can be enabled at grid level.

I am a cell that has some text in it

I am a cell that has some text in it

I am a cell that has some text in it

Gutters

Vertical

Vertical gutters between rows can be enabled at grid level.

I am a cell that has some text in it

I am a cell that has some text in it

I am a cell that has some text in it

I am a cell that has some text in it

Gutters

Horizontal and vertical

A grid can have both horizontal and vertical gutters.

I am a cell that has some text in it

I am a cell that has some text in it

I am a cell that has some text in it

I am a cell that has some text in it

Responsive cell sizing

Cell sizes that are breakpoint-specific

Individual cell sizes can be set per breakpoint.

1/6 on XS, 1/2 on L

1/4 on M, 1/3 on L

1/2 on XS, 1/6 on L

Nested grids

Without and with gutters

Grid cells can contain grids to create nested grids.

1

2.1

2.2

1

2.1

2.2

Advanced equal height

Grid cells by default will have equal height across a row. Content within a grid cell, however, is aligned based on said content and does not neccessarily align. In the below scenario, the paragraph elements is set to grow, causing any content below it to always be pushed down, no matter the length of the paragraph or the availability of other elements.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.

Link

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.

Link

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.

Link

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.

Link

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.

Link

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.

Link

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.

Link

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.

Link

The future of grids

Although a Flexbox-based grid is vastly superior over float-based grids in many ways, Flexbox's main strength lies in layout in a single dimension. This is due to Flexbox calculating container dimensions after the content is loaded, potentially leading to jumpy pages in complicated, multidimensional layouts. As such, Flexbox is recommended for rows of content within a layout, not necessarily for page-level layout. Multi dimensional grids of the future will be based on the CSS Grid Layout Module, once it gains enough support.