Table of contents

Flexbox grids

SFUMATO offers a simple, convenient, flexbox-based, multi-column grid system. If you've created a traditional 12-column responsive grid layout before, you'll find that it mostly follows the pattern you already know. The difference is that you don't need to work with a specific number of columns. Grid cell widths can be anything you want, typically specified with a fraction notations (like 1/3). That said, there are two primary reasons we created this grid system:

Oh, snap! Here's one...


Below you'll find information that describes the grid system and how to use it in various scenarios. You'll also find examples of implementing scalable, responsive, flexbox grids.

There are two primary ways to use the grid system: automatic and manual. Automatic mode only requires HTML markup. Manual mode requires some SCSS code but is more flexible. And you can use an automatic grid with some extra manual overrides. Read on to find out more.

NERD FACT: SFUMATO grid cell left/right (horizontal) gutters can be rems or percentages that are used for grid cell padding (1/2 the gutter value on each side). Grid cell top/bottom (row) gutters are padding values in rems (1/2 the gutter value on each side). This gives you the ability to do things like easily add borders between grid cells. The grid's left/right and top/bottom edges use negative margin to negate the extra space after the last grid cell or row.

Automatic grids

Automatic grids allow you to simply create HTML markup with some specific attributes to get a scalable, responsive grid working quickly. These are useful for grids of equal-sized columns, grids with gutters, or a quick start to a more complex grid.

Here is an example of a simple automatic grid with three columns of equal widths and a gutter, using CSS custom properties:

                                
                                    <div role="grid" style="--sf-cols: 3; --sf-gutters: 2%; --sf-row-gutters: 0.5rem;">
                                        <div role="gridcell"></div>
                                        <div role="gridcell"></div>
                                        <div role="gridcell"></div>
                                    </div>
                                
                            

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
  • phablet phab — large handheld
  • tablet-portrait tabp — tablet held in portrait orientation
  • tablet-landscape tabl — tablet held in landscape orientation
  • notebook note — notebook computer
  • desktop desk — desktop computer (large screen)
  • elastic 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 style attributes

By prefixing the following attributes for each breakpoint, you can easily control grid appearance right in the HTML markup, saving you the trouble of writing SCSS code. You can also fine-tune a grid that is established this way, since SCSS code will override these settings.

Columns

--sf-{breakpoint}-cols: #values: 1 to 99 gajillion

This tells the grid how many equal-width columns to assume as a default. You can always change the grid cell widths and other styles in your own SCSS code.

Example: a mobile layout with 1 column and a gutter beneath each row, and a tablet-portrait layout with 4 columns and a 3% gutter between the cells, with a 2rem gutter below each row of cells.

                                
                                    <div role="grid" style="--sf-row-gutters: 1.25rem; --sf-tabp-cols: 4; --sf-tabp-gutters: 3%; --sf-tabp-row-gutters: 2rem;">
                                
                            

Gutters

--sf-{breakpoint}-gutters: {value}" — percentage or rem value

Defines the left/right gap between grid cells.

Example: a tablet-portait layout that uses a gutter of 3%.

                                
                                    <div role="grid" style="--sf-tabp-cols: 4; --sf-tabp-gutters: 3%; --sf-tabp-row-gutters: 2rem;">
                                
                            

Row gutters

--sf-{breakpoint}-row-gutters: {value} — rem value

Defines the top/bottom gap between rows of grid cells.

Example: a tablet-portait layout that uses a row gutter of 2rem.

                                
                                    <div role="grid" style="--sf-tabp-cols: 4; --sf-tabp-gutters: 3%; --sf-tabp-row-gutters: 2rem;">
                                
                            

Direction

--sf-{breakpoint}-flex-direction

This defines the grid cells rendering order.

Example: a mobile layout that reverses the column order for mobile, and clears that setting for tablet-portrait.

                                
                                    <div role="grid" style="--sf-flex-direction: column-reverse; --sf-row-gutters: 1.25rem; --sf-tabp-cols: 4; --sf-tabp-gutters: 3%; --sf-tabp-row-gutters: 2rem; --sf-tabp-flex-direction: row;">
                                
                            

Grid cell heights

--sf-{breakpoint}-equal-heights

All grid cells in a row will be the height of the tallest grid cell in that row.

Example: a tablet-portait layout that uses equal heights.

                                
                                    <div role="grid" style="--sf-tabp-cols: 4; --sf-tabp-gutters: 3%; --sf-tabp-row-gutters: 2rem; --sf-tabp-equal-heights: 1;">
                                
                            

Grid cell vertical alignment

--sf-{breakpoint}-centered

All grid cells in a row will vertically center their direct descendants.

Example: a tablet-portait layout that uses vertical centering.

                                
                                    <div role="grid" style="--sf-tabp-cols: 4; --sf-tabp-gutters: 3%; --sf-tabp-row-gutters: 2rem; --sf-tabp-centered: 1;">
                                
                            

Grid cell attributes

By prefixing the following attributes for each breakpoint, you can easily control grid cell appearance right in the HTML markup, saving you the trouble of writing SCSS code. You can also fine-tune grid cells established this way, since SCSS code will override these settings.

Widths

--sf-{breakpoint}-width: {%} — percentage
--sf-{breakpoint}-frac: {#/#}" — fraction

Defines the width of an individual grid cell.

Example: a grid with two columns and asymmetric grid cell widths.

                                    
                                        <div role="grid">
                                            <div role="gridcell" style="--sf-tabp-frac: 1/3;"></div>
                                            <div role="gridcell" style="--sf-tabp-width: 67%;"></div>
                                        </div>
                                    
                                

Push

--sf-{breakpoint}-push: {%} — percentage
--sf-{breakpoint}-push-frac: {#/#} — fraction

Pushes a grid cell to the right by a specific amount. This eliminates the need to create empty grid cells for some layouts.

Example: a grid with two columns with pushed grid cells.

                                    
                                        <div role="grid">
                                            <div role="gridcell" style="--sf-tabp-frac: 1/6; --sf-tabp-push-frac: 1/6;"></div>
                                            <div role="gridcell" style="--sf-tabp-frac: 1/6; --sf-tabp-push: 16%;"></div>
                                        </div>
                                    
                                

Pull

--sf-{breakpoint}-pull: {%} — percentage
--sf-{breakpoint}-pull-frac: {#/#} — fraction

Pulls a grid cell to the left by a specific amount. This eliminates the need to create empty grid cells for some layouts.

Example: a grid with two columns with pulled grid cells.

                                    
                                        <div role="grid">
                                            <div role="gridcell" style="--sf-tabp-frac: 1/6; --sf-tabp-pull-frac: 1/6;"></div>
                                            <div role="gridcell" style="--sf-tabp-frac: 1/6; --sf-tabp-pull: 16%;"></div>
                                        </div>
                                    
                                

Auto-width

--sf-{breakpoint}-width-auto: true

Forces a grid cell to fill the remaining space so long as the content doesn't extend the grid cell wider than the remaining space.

Example: a grid with two columns, the last of which fills the remaining space.

                                    
                                        <div role="grid">
                                            <div role="gridcell" style="--sf-tabp-frac: 1/3;"></div>
                                            <div role="gridcell" style="--sf-tabp-width-auto: true;"></div>
                                        </div>
                                    
                                

Manual grids are cake

If you need full control of your grid layout (or want to keep the markup clean of CSS custom properties), you'll want to use this type of implementation. Here, the basics of grid behavior are handled for you, but you control things like grid cell widths, gutters, etc.

The markup below is used for the table of contents and intro content at the top of this page. This is a fully manual grid with two columns and gutters; one column is more narrow than the other.

NOTE: When manually styling grids, there are no limits on the range of values for percentages or rems. Those limits are applied only to the HTML (automatic) grids because styles have to pre-exist for them to work.

HTML

                                        
                                            <div id="toc" role="grid">
                                                <div role="gridcell">
                                                    <h3>On this page...</h3>
                                                    ...
                                                    <h3>Examples</h3>
                                                    ...
                                                </div>
                                                <div role="gridcell">
                                                    <h1>Flexbox grids</h1>
                                                    <p>
                                                        SFUMATO offers a...
                                                    </p>
                                                    ...
                                                </div>
                                            </div>                                        
                                        
                                    

SCSS

                                        
                                            [role="grid"] {

                                                @include sf-set-gutter (
                                                    $gutter: false,
                                                    $row-gutter: 2.25rem
                                                );
                                
                                                @include sf-set-gutter (
                                                    $from: tablet-portrait,
                                                    $gutter: 10%,
                                                    $row-gutter: false
                                                );
                                                        
                                                > [role="gridcell"] {

                                                    &:nth-child(1) {

                                                        @include sf-set-width (
                                                            $from: tablet-portrait,
                                                            $width: 30%
                                                        );
                                                    }

                                                    &:nth-child(2) {

                                                        @include sf-set-width (
                                                            $from: tablet-portrait,
                                                            $width: 70%
                                                        );
                                                    }
                                                }
                                            }
                                        
                                    

Manual grid styles

You can override grid behaviors in SCSS code more easily with some helpers. These are applied to the [role="grid"] selector.

                                
                                    [role="grid"] {
                                        @include sf-make-reverse();
                                    }
                                
                            
  • Turn the grid into an equal height grid: @include sf-make-equal-heights();
  • Turn the grid into a centered grid: @include sf-make-centered-grid();
  • Turn the grid into a reverse grid: @include sf-make-reverse();

Gutter

Set a grid's gutter and row gutter. Using this mixin allows for easy use of media breakpoints and adjusts the grid's margins.

                                
                                    [role="grid"] {
                                        @include sf-set-gutter (
                                            $from:tablet-portrait,
                                            $gutter:10%,
                                            $row-gutter:3rem
                                        );
                                    }
                                
                            

Manual grid cell styles

You can also alter grid cell styles in SCSS more easily with some helpers. These are applied to the [role="gridcell"] selectors.

Width

Set a grid cell's width. Using this mixin allows for easy use of media breakpoints and handles growing grid cells to fill the remaining space.

                                
                                    [role="gridcell"] {
                                        @include sf-set-width(
                                            $from: tablet-portrait,
                                            $width: 30%
                                        );
                                    }
                                
                            
  • $from; media query breakpoint (e.g. tablet-portrait)
  • $upto; media query breakpoint (e.g. desktop)
  • $width; width as a percentage (e.g. 50%) or 12-column value (e.g. 6)
  • $important; use an !important attribute

Push and pull

Push a grid cell to the right or pull to the left instead of using empty grid cells for positioning:

                                
                                    [role="gridcell"] {
                                        @include sf-push (
                                            $from: tablet-portrait,
                                            $width: 16%
                                        );

                                        @include sf-pull (
                                            $from: tablet-portrait,
                                            $width: 4
                                        );
                                    }
                                
                            
  • $from; media query breakpoint (e.g. tablet-portrait)
  • $upto; media query breakpoint (e.g. desktop)
  • $width; width as a percentage (e.g. 50%) or 12-column value (e.g. 6)

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

                            
                        

Grid with push

This grid pushed its columns over to center them on tablet-portrait and above. Pull is also available.

Box 1

Box 2

HTML

                            
                        

Reverse grid

Useful for layouts where cells need to be in reverse order for one or more breakpoints. This example uses reverse order grid cells for tablet-portrait and wider displays.

Box 1

Box 2

Box 3

HTML

                            
                        

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

                            
                        

Grid with gutters and push

This grid pushed its columns over to center them on tablet-portrait and above. Pull is also available.

Box 1

Box 2

HTML

                            
                        

Reverse grid with gutters

Useful for layouts where cells need to be in reverse order for one or more breakpoints. This example uses reverse order grid cells for tablet-portrait and wider displays.

Box 1

Box 2

Box 3

HTML

                            
                        

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

Box 6

HTML

                            
                        

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

                            
                        

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

                            
                        

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