Table of contents

CSS grids

SFUMATO offers a simple, convenient, multi-column grid system based on the CSS grid specification. The difference between SFUMATO grids and standard 12-column grid systems is that you don't need to work with a specific number of columns, and rows and cells can span most any location. Additionally, column and row gutters are a native feature that don't require negative margin tricks.

They're easy!

The markup for the grid above uses simple, consistent CSS custom properties, which means you can control them from Javascript and server-side code. It also means that you can make your web app theme-able without page reloads!
scrollable

SFUMATO exposes standard CSS grid attributes so what you already know about using CSS grids will work with SFUMATO.

Attributes

Media breakpoints

You can specify media breakpoints along with your grid attributes to finely control when the grid changes appearance. Below are the breakpoints (and their selector prefixes) that ship with SFUMATO:

  • zero — mobile first
  • phab — large handheld
  • tabp — tablet held in portrait orientation
  • tabl — tablet held in landscape orientation
  • note — notebook computer
  • desk — desktop computer (large screen)
  • elas — the point at which scaling and resizing should stop; can also be used as a super large breakpoint for layouts that never stop scaling up

Grid attributes

Using the following CSS custom properties you can easily create a powerful CSS grid.

--sf-{breakpoint-}cols

Defines the number and size behavior of columns per row. Values include:

none {length} {percentage} {flex} max-content min-content minmax(min, max) auto fit-content([{length}|{percentage}]) repeat([{positive-integer}|auto-fill|auto-fit], {track-list})

--sf-{breakpoint-}flow

Controls how grid cells wrap or otherwise fill a row. Values include:

row column dense row dense column dense

--sf-{breakpoint-}rows

Defines the number and size behavior of grid rows. Values include:

none {length} {percentage} {flex} max-content min-content minmax(min, max) auto fit-content([{length}|{percentage}]) repeat([{positive-integer}|auto-fill|auto-fit], {track-list})

--sf-{breakpoint-}col-gap

Defines the horizontal gutter (gap) between grid cells. Values include:

normal {rem, fr, etc. length} {percentage}

--sf-{breakpoint-}row-gap

Defines the vertical gutter (gap) between grid cells. Values include:

normal {rem, fr, etc. length} {percentage}

--sf-{breakpoint-}top-gap

Defines the vertical gap (margin) at the top of the grid. Value units include:

{rem, vw, px, etc.}

--sf-{breakpoint-}bottom-gap

Defines the vertical gap (margin) at the bottom of the grid. Value units include:

{rem, vw, px, etc.}

--sf-{breakpoint-}auto-columns

Defines the size of grid columns that are not explicitly set by --sf-{breakpoint-}cols.

--sf-{breakpoint-}auto-rows

Defines the size of grid rows that are not explicitly set by --sf-{breakpoint-}rows.

--sf-{breakpoint-}align-items

Defines the horizontal alignment of grid cells. Values include flexbox items:

normal start end flex-start flex-end self-start self-end center left right baseline|first baseline|last baseline stretch safe unsafe legacy

--sf-{breakpoint-}vertical-align-items

Defines the vertical alignment of grid cells. Values include flexbox items:

normal start end flex-start flex-end self-start self-end center baseline|first baseline|last baseline stretch safe unsafe

Grid cell attributes

The following grid cell attributes allow you to fine-tune their layout within the grid.

--sf-{breakpoint-}overflow

Defines the overflow behavior of grid cell contents.

visible hidden scroll auto

--sf-{breakpoint-}col

Defines the size and location of a grid cell, overriding the grid definition for that grid cell. Uses the start and end properties of a grid cell.

auto {integer} -1 {integer}/{span} {integer}

--sf-{breakpoint-}row

Defines the size and location of a grid cell within the grid row, overriding the grid definition for that grid cell. Uses the start and end properties of a row.

auto {integer} -1 {integer}/{span} {integer}

--sf-{breakpoint-}align-items

Defines the horizontal alignment of the grid cell. Values include flexbox items:

normal start end flex-start flex-end self-start self-end center left right baseline|first baseline|last baseline stretch safe unsafe legacy

--sf-{breakpoint-}vertical-align-items

Defines the vertical alignment of the grid cell. Values include flexbox items:

normal start end flex-start flex-end self-start self-end center baseline|first baseline|last baseline stretch safe unsafe

--sf-{breakpoint-}cell-top-gap

Adds a top gap (margin) to an individual grid cell. This is in addition to any grid row gaps. Value units include:

{rem, vw, px, etc.}

--sf-{breakpoint-}cell-bottom-gap

Adds a bottom gap (margin) to an individual grid cell. This is in addition to any grid row gaps. Value units include:

{rem, vw, px, etc.}

Examples

The following are some examples of how to implement various grid configurations.

Basic grid

This is a grid without gutters and which has grid cell widths set.

Box 1

Box 2

Box 3

Box 4

Box 5

Box 6

HTML
scrollable

Grid with gutters

This grid has gutters and uses the default grid cell widths based on the number of columns set.

Box 1

Box 2

Box 3

Box 4

Box 5

HTML
scrollable

Varied width grid cells

Useful for layouts where grid cells use varied widths, like for sidebar navigation.

Box 1

Box 2

Box 3

Box 4

Box 5

HTML
scrollable

Equal height grid cells

Useful for things like pricing panels. Equal heights are not necessary in a single column mobile layout.

Box 1

Box 2

Box 3

Sample box #3

HTML
scrollable

Vertically centered grid cells

Useful for things like a series of logos. Equal heights are not necessary in a single column mobile layout.

Box 1

Box 2

Box 3

Sample box #3

HTML
scrollable

Nested grid

Nesting grids is useful for more complex layouts with varying gutter sizes.

Box 1

Box 2

Box 3

Box 4

Box 2

Box 3

HTML
scrollable

Cell positioning grid

Repositioning cells is one of the great features of CSS grids.

Cell 1

Cell 2

Cell 3

Cell 4

Cell 5

Cell 6

HTML
scrollable