WebUI mobile-first CSS

Grid System

Basic Concepts

WebUI uses a 24 column flexbox grid system to create layouts. Each row can contain up to 24 columns, and each column can contain any other content.

The grid system is one of many tools that can be used for layouts and is provided for convenience - it is built on top of flexbox and combined with other complimentary features. WebUI also provides full flexbox support for a more direct way to use flexbox, which can be used with layout grid classes too. See the Flexbox section for more information on the flexbox approach.

To support layouts generally, WebUI includes a comprehensive set of layout property classes for alignment, justification, spacing and padding. These can be used for flexbox, CSS grid, or multi-column layouts. A list of these properties can be found in the Layout Properties section below.

Layout Grid classes

Classes available for the layout grid.

Class	Description
row	Defines a layout grid row and initialise immediate child elements to 100% width.
row-inline	Defines a layout grid inline row and initialise immediate child elements to 100% width.
cols	Used to initialise immediate child elements as layout grid default columns.
cols-fixed	Used to initialise immediate child elements as layout grid fixed columns.
col	Defines a layout grid default column.
col-fixed	Defines a layout grid fixed column.
col-[proportion]	Defines a column of the specified proportion of the row width (1 - 24), e.g. col-4, col-16, col-24.

Simple rows and columns

.col

    
  

          
<div class="row info-dark">
  <div class="col border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col</span>
    </div>
  </div>
  <div class="col border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col</span>
    </div>
  </div>
  <div class="col border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col</span>
    </div>
  </div>
</div>
<div class="row info-dark">
  <div class="col border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col</span>
    </div>
  </div>
  <div class="col border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col</span>
    </div>
  </div>
</div>
    
      
HTML

Simple rows and columns with fixed size content

.col

    
  

        
<div class="row info-dark">
  <div class="col border-xs border-info">
    <div class="container height-sm width-md">
      <span class="place-middle-center">.col</span>
    </div>
  </div>
  <div class="col border-xs border-info">
    <div class="container height-sm width-md">
      <span class="place-middle-center">.col</span>
    </div>
  </div>
  <div class="col border-xs border-info">
    <div class="container height-sm width-md">
      <span class="place-middle-center">.col</span>
    </div>
  </div>
</div>
<div class="row info-dark">
  <div class="col border-xs border-info">
    <div class="container height-sm width-md">
      <span class="place-middle-center">.col</span>
    </div>
  </div>
  <div class="col border-xs border-info">
    <div class="container height-sm width-md">
      <span class="place-middle-center">.col</span>
    </div>
  </div>
</div>
  
      
HTML

Rows with columns shortcut

In this example, the class cols is added to the row, which causes all immediate child elements to become default columns.

.col

    
  

        
<div class="row cols info-dark">
  <div class="border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col</span>
    </div>
  </div>
  <div class="border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col</span>
    </div>
  </div>
  <div class="border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col</span>
    </div>
  </div>
</div>
  
      
HTML

Rows with responsive columns shortcut

Like many WebUI classes, there are breakpoint specific alternatives. This example uses cols-bp-3-over on the row, so that the child elements will only act as columns at breakpoint 3 and over and will be 100% of the row width under breakpoint 3.

.col

    
  

          
<div class="row cols-bp-3-over info-dark">
  <div class="border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col</span>
    </div>
  </div>
  <div class="border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col</span>
    </div>
  </div>
  <div class="border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col</span>
    </div>
  </div>
</div>
  
      
HTML

Combining columns and fixed columns

.col

.col-fixed

.col

    
  

            
<div class="row info-dark">
  <div class="col border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col</span>
    </div>
  </div>	
  <div class="col-fixed border-xs border-info">
    <div class="container height-sm width-md">
      <span class="place-middle-center text-nowrap">.col-fixed</span>
    </div>
  </div>
  <div class="col-fixed border-xs border-info">
    <div class="container height-sm width-lg">
      <span class="place-middle-center text-nowrap">.col-fixed</span>
    </div>
  </div>
</div>
<div class="row info-dark">
  <div class="col-fixed border-xs border-info">
    <div class="container height-sm width-md">
      <span class="place-middle-center text-nowrap">.col-fixed</span>
    </div>
  </div>
  <div class="col border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col</span>
    </div>
  </div>
</div>
  
      
HTML

Sized columns

.col-8

.col-6

.col-10

.col-16

.col-8

    
  

            
<div class="row info-dark">
  <div class="col-8 border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col-8</span>
    </div>
  </div>	
  <div class="col-6 border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col-6</span>
    </div>
  </div>
  <div class="col-10 border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col-10</span>
    </div>
  </div>
</div>
<div class="row info-dark">
  <div class="col-16 border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col-16</span>
    </div>
  </div>
  <div class="col-8 border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col-8</span>
    </div>
  </div>
</div>
  
      
HTML

Simple rows and responsive columns

.col-bp-3-over

    
  

            
<div class="row info-dark">
  <div class="col-bp-3-over border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col-bp-3-over</span>
    </div>
  </div>
  <div class="col-bp-3-over border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col-bp-3-over</span>
    </div>
  </div>
  <div class="col-bp-3-over border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col-bp-3-over</span>
    </div>
  </div>
</div>
<div class="row info-dark">
  <div class="col-bp-3-over border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col-bp-3-over</span>
    </div>
  </div>
  <div class="col-bp-3-over border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col-bp-3-over</span>
    </div>
  </div>
</div>
  
      
HTML

Rows with multiple breakpoint responsive columns

.col-12-bp-3-over
col-6-bp-4-over

    
  

            
<div class="row info-dark">
  <div class="col-12-bp-3-over col-6-bp-4-over border-xs border-info">
    <div class="container height-md">
      <span class="place-middle-center text-nowrap">.col-12-bp-3-over<br />col-6-bp-4-over</span>
    </div>
  </div>
  <div class="col-12-bp-3-over col-6-bp-4-over border-xs border-info">
    <div class="container height-md">
      <span class="place-middle-center text-nowrap">.col-12-bp-3-over<br />col-6-bp-4-over</span>
    </div>
  </div>
  <div class="col-12-bp-3-over col-6-bp-4-over border-xs border-info">
    <div class="container height-md">
      <span class="place-middle-center text-nowrap">.col-12-bp-3-over<br />col-6-bp-4-over</span>
    </div>
  </div>
  <div class="col-12-bp-3-over col-6-bp-4-over border-xs border-info">
    <div class="container height-md">
      <span class="place-middle-center text-nowrap">.col-12-bp-3-over<br />col-6-bp-4-over</span>
    </div>
  </div>
</div>
  
      
HTML

HTML Columns (Multi-column)

HTML columns (multi-columns) are useful for text paragraph layouts as well as masonry type layouts. The columns-* classes and column-width-* classes work together. For example, using columns-3 and column-width-md together means that the maximum number of columns will be 3, but that number will reduce if the there is no longer enough space for each column to be at or greater than the specified minimum width. Some of the layout classes such as column-gap-* also work with multi-column layouts.

NOTE: A default minimum column width of 20rem and a column-gap of 1.25rem are set unless otherwise specified.

HTML Column Classes

The following classes can be used for multi-column layouts.

Class group	Class names	Description
columns-*	columns-auto columns-[column count]	Used to allow the browser to determine the number of columns displayed, or set the preferred number of columns (1 - 24), e.g. columns-5.
column-width-*	column-width-xs column-width-sm column-width-md column-width-lg column-width-xl	Used to set minimum column width.
column-rule-*	column-rule-[theme color]	Used to set a dividing line between columns. Only basic theme colors are supported by WebUI, e.g. column-rule-default, column-rule-dark, column-rule-accent-1.
column-span-*	column-span-none column-span-all	Used to allow an element to break out of the column flow. Default: column-span-none.
column-fill-*	column-fill-auto column-fill-balance	Determines whether columns are filled sequentially or content is distrubuted equally between columns. Default: column-fill-auto.

HTML Columns Example

In the following example, paragraphs of text are neatly arranged into a maximum of 3 columns. The number of columns actually displayed depends on the available width in a given container and the column width specified.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.

    
  

  
<div class="columns-3 column-width-sm column-gap-xl gap-vertical-xl">				
  <div class="text-dropcap">
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
    quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
    ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
  </div>
  <div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
    quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
    ultricies mi vitae est. Mauris placerat eleifend leo.
  </div>
  <div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
    quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
  </div>
  <div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
    quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
    ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
  </div>
  <div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
    quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
  </div>
  <div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
    quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean
    ultricies mi vitae est. Mauris placerat eleifend leo.
  </div>
  <div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
    quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
  </div>
  <div class="column-span-all pad-xl">
    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor
    quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
  </div>
</div>
  
      
HTML

Masonry Layout

The following example makes use of HTML columns to create a masonry type layout. The class no-break-inside is important here as it prevents HTML components from being split across columns.

Title

Heading

Lorem ipsum dolor sit amet, ius an possit alterum commune

Title

Heading

Lorem ipsum dolor sit amet, ius an possit alterum commune, solet labore erroribus qui ea, vitae laudem ex pro.

Title

Heading

Lorem ipsum dolor sit amet

Title

Heading

Lorem ipsum dolor sit amet

Title

Heading

Lorem ipsum dolor sit amet, ius an possit alterum commune, solet labore erroribus qui ea, vitae laudem ex pro.

Title

Heading

Lorem ipsum dolor sit amet

Title

Heading

Lorem ipsum dolor sit amet, ius an possit alterum commune, solet labore erroribus qui ea, vitae laudem ex pro.

Title

Heading

Lorem ipsum dolor sit amet, ius an possit alterum commune

Title

Heading

Lorem ipsum dolor sit amet

Title

Heading

Lorem ipsum dolor sit amet, ius an possit alterum commune, solet labore erroribus qui ea, vitae laudem ex pro.

Title

Heading

Lorem ipsum dolor sit amet, ius an possit alterum commune

    
  

  
<div class="columns-4 column-width-xs column-gap-sm gap-vertical-lg">
  <div class="no-break-inside border-xs border-info">
    <div class="info-dark pad-md"><b>Title</b></div>
    <div class="pad-md text-sm">
      Heading
      <p class="color-accent-4">Lorem ipsum dolor sit amet, ius an possit alterum commune<p>
    </div>
  </div>
  <div class="no-break-inside border-xs border-info">
    <div class="info-dark pad-md"><b>Title</b></div>
    <div class="pad-md text-sm">
      Heading
      <p class="color-accent-4">Lorem ipsum dolor sit amet, ius an possit alterum commune, solet labore erroribus qui ea, vitae laudem ex pro.</p>
    </div>
  </div>
  <div class="no-break-inside border-xs border-info">
    <div class="info-dark pad-md"><b>Title</b></div>
    <div class="pad-md text-sm">
      Heading
      <p class="color-accent-4">Lorem ipsum dolor sit amet</p>
    </div>
  </div>
  <div class="no-break-inside border-xs border-info">
    <div class="info-dark pad-md"><b>Title</b></div>
    <div class="pad-md text-sm">
      Heading
        <p class="color-accent-4">Lorem ipsum dolor sit amet</p>
    </div>
  </div>
  <div class="no-break-inside border-xs border-info">
    <div class="info-dark pad-md"><b>Title</b></div>
    <div class="pad-md text-sm">
      Heading
      <p class="color-accent-4">Lorem ipsum dolor sit amet, ius an possit alterum commune, solet labore erroribus qui ea, vitae laudem ex pro.</p>
    </div>
  </div>
  <div class="no-break-inside border-xs border-info">
    <div class="info-dark pad-md"><b>Title</b></div>
    <div class="pad-md text-sm">
      Heading
      <p class="color-accent-4">Lorem ipsum dolor sit amet</p>
    </div>
  </div>
  <div class="no-break-inside border-xs border-info">
    <div class="info-dark pad-md"><b>Title</b></div>
    <div class="pad-md text-sm">
      Heading
      <p class="color-accent-4">Lorem ipsum dolor sit amet, ius an possit alterum commune, solet labore erroribus qui ea, vitae laudem ex pro.</p>
    </div>
  </div>
  <div class="no-break-inside border-xs border-info">
    <div class="info-dark pad-md"><b>Title</b></div>
    <div class="pad-md text-sm">
      Heading
      <p class="color-accent-4">Lorem ipsum dolor sit amet, ius an possit alterum commune</p>
    </div>
  </div>
  <div class="no-break-inside border-xs border-info">
    <div class="info-dark pad-md"><b>Title</b></div>
    <div class="pad-md text-sm">
      Heading
      <p class="color-accent-4">Lorem ipsum dolor sit amet</p>
    </div>
  </div>
  <div class="no-break-inside border-xs border-info">
    <div class="info-dark pad-md"><b>Title</b></div>
    <div class="pad-md text-sm">
      Heading
      <p class="color-accent-4">Lorem ipsum dolor sit amet, ius an possit alterum commune, solet labore erroribus qui ea, vitae laudem ex pro.<p>
    </div>
  </div>
  <div class="no-break-inside border-xs border-info">
    <div class="info-dark pad-md"><b>Title</b></div>
    <div class="pad-md text-sm">
      Heading
      <p class="color-accent-4">Lorem ipsum dolor sit amet, ius an possit alterum commune</p>
    </div>
  </div>
</div>
  
      
HTML

Containers

Container Classes

WebUI has 4 container types available which can be used for a default context for any child elements. Each has useful defaults.

Class	Description
container	Defines a block level container with relative positioning. It is also suitable for containing floated elements.
flex-container	Defines a flexbox container with relative positioning. Child elements are not wrapped or constrained.
grid-container	Defines a grid container with relative positioning.
media-container-*	Defines a container with aspect ratio. (See the Media Container section.)

All-purpose container

This container type can be used wherever a relative positioning context is required as well as ensuring that any floated elements will be properly accomodated.

In the second example below, the container class ensures that an elements border edge is moved down to clear any of its floated child elements. The container class also sets a relative positioning context, making it convenient for any positioning you may want to do with child elements.

NOTE: You can use containers even if you don't plan to use floated elements.

    
  

  
<div class="background-default pad-xs">
  <div class="background-muted pad-lg"></div>
  <div class="float-left height-sm background-accent-4 pad-lg"></div>
  <div class="float-right height-sm background-accent-4 pad-lg"></div>     
</div>

<div class="row-spacing-md"></div>

<div class="container background-default pad-xs">
  <div class="background-muted pad-lg"></div>
  <div class="float-left height-sm background-accent-4 pad-lg"></div>
  <div class="float-right height-sm background-accent-4 pad-lg"></div>     
</div>
            
      
HTML

Flex container

The flex-container is used to create an area of the document for flexbox layouts. It sets the display property to flex, causing all immediate child elements to become flex items. In addition, the container is set to relative positioning. Containers are provided for convenience, but if different behaviour is required there are many utility classes that can be used directly instead.

A simple flex container example is shown below.

    
<div class="flex-container gap-xs justify-content-center background-default pad-xs">
  <div class="height-sm background-muted pad-lg"></div>
  <div class="height-sm background-accent-4 pad-lg"></div>
  <div class="height-sm background-accent-5 pad-lg"></div>     
</div>
            
HTML

Grid container

The grid-container is used for a convenient way to define a starting point for any grid layout. It also sets a relative positioning context.

A simple grid container example is shown below.

    
<div class="grid-container grid-example-columns gap-xs background-default pad-xs">
  <div class="one background-muted pad-lg"></div>
  <div class="two background-accent-4 pad-lg"></div>
  <div class="three background-accent-5 pad-lg"></div>     
</div>
            
HTML

    
  

  
.grid-example-columns {
  grid-template-columns: repeat(6, 1fr);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 3 / 5;
  grid-row: 2;
}
.three {
  grid-column: 5 / 7;
  grid-row: 3;
}
            
      
CSS

Media container

Media containers provide an easy way to display video and many other kinds of media at a specified aspect ratio. The key to this is to use the class media-content on the element being contained. You can constrain the width of the media element by using WebUI width-* classes. See the following examples:

Media container classes.

Class	Description
media-container-21x9	Display media content with a 21x9 aspect ratio.
media-container-16x9	Display media content with a 16x9 aspect ratio.
media-container-4x3	Display media content with a 4x3 aspect ratio.
media-container-3x2	Display media content with a 3x2 aspect ratio.
media-container-1x1	Display media content with a 1x1 aspect ratio.

21x9

16x9

4x3

3x2

1x1

    
  

  
<div class="row column-gap-sm">
  <div class="col">
    <div class="media-container-21x9 border-xs border-info">
      <div class="media-content info-dark"></div>
      <label class="place-top-left pad-xs info text-bold">21x9</label>
    </div>
  </div>
  <div class="col">
    <div class="media-container-16x9 border-xs border-info">
      <div class="media-content info-dark"></div>
      <label class="place-top-left pad-xs info text-bold">16x9</label>
    </div>  
  </div>
  <div class="col">
    <div class="media-container-4x3 border-xs border-info">
      <div class="media-content info-dark"></div>
      <label class="place-top-left pad-xs info text-bold">4x3</label>
    </div>  
  </div>
  <div class="col">
    <div class="media-container-3x2 border-xs border-info">
      <div class="media-content info-dark"></div>
      <label class="place-top-left pad-xs info text-bold">3x2</label>
    </div>
  </div>
  <div class="col">
    <div class="media-container-1x1 border-xs border-info">
      <div class="media-content info-dark"></div>
      <label class="place-top-left pad-xs info text-bold">1x1</label>
    </div>
  </div>
</div>
          
      
HTML

Responsive Gutters

WebUI includes responsive gutters which can be applied to any container type or any row type - they can also be applied to most block level elements and on img tags also. This makes them super useful when you need a margin around elements to automatically increase or reduce depending on the width of the browser window, for example.

Responsive Gutter Classes.

Various classes available for responsive gutters.

Class group	Class names	Description
responsive-gutter-*	responsive-gutter-xs responsive-gutter-sm responsive-gutter-md responsive-gutter-lg responsive-gutter-xl	Adds a left and right gutter.
responsive-gutter-left-*	responsive-gutter-left-xs responsive-gutter-left-sm responsive-gutter-left-md responsive-gutter-left-lg responsive-gutter-left-xl	Adds a left gutter only.
responsive-gutter-right-*	responsive-gutter-right-xs responsive-gutter-right-sm responsive-gutter-right-md responsive-gutter-right-lg responsive-gutter-right-xl	Adds a right gutter only.

Responsive Gutter Example

    
  

  
<div class="border-xs border-default">
  <div class="responsive-gutter-md">
    <div class="flex-container justify-content-center gap-xs background-default">  
      <div class="height-sm background-muted pad-lg"></div>   
      <div class="height-sm background-accent-4 pad-lg"></div>
      <div class="height-sm background-accent-5 pad-lg"></div> 
    </div>    
  </div>
</div>
  
      
HTML

Responsive Gutters

Responsive gutters should not be applied directly to columns, but may be applied as a layout wrapper, to a row, or to elements within columns.

Layout Spacing

Gap classes

The gap-*, row-gap-* and column-gap-* classes can be used for flexbox, CSS grid, or multi-column layouts.

See the Layout Properties section below for more information about gap classes.

When using the gap-* classes the same gap will be added between both rows and columns. In the following example, when the browser viewport is less than breakpoint 3 columns will stack with a gap between each row, so the gap is applied to the main axis and the cross axis. The separate row-gap-* or column-gap-* classes can be used instead if a gap is only required on one axis.

The following example shows how to add gaps between elements in a flexbox based layout.

.col-bp-3-over

    
  

        
<div class="row gap-md info-dark">
  <div class="col-bp-3-over border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col-bp-3-over</span>
    </div>
  </div>
  <div class="col-bp-3-over border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col-bp-3-over</span>
    </div>
  </div>
  <div class="col-bp-3-over border-xs border-info">
    <div class="container height-sm">
      <span class="place-middle-center">.col-bp-3-over</span>
    </div>
  </div>
</div>
  
      
HTML

Layout Properties

Standard Layout Classes

The following classes can be used for flexbox, CSS grid, or multi-column layouts.

Class group	Class names	Description
align-self-*	align-self-start align-self-flex-start align-self-center align-self-end align-self-flex-end align-self-stretch align-self-baseline	Used to override any align-items-* class applied to a parent element.
align-items-*	align-items-start align-items-flex-start align-items-center align-items-end align-items-flex-end align-items-stretch align-items-baseline	Used to align all immediate child elements perpendicular to the flex-direction, and the block axis of a grid container.
align-content-*	align-content-start align-content-flex-start align-content-center align-content-end align-content-flex-end align-content-stretch align-content-baseline align-content-space-between align-content-space-around	Used to set the distribution of space between or around immediate child elements perpendicular to the flex-direction, and the block axis of a grid container.
justify-self-*	justify-self-start justify-self-flex-start justify-self-center justify-self-end justify-self-flex-end justify-self-stretch justify-self-baseline	Used to override any justify-items-* class applied to a parent element.
justify-items-*	justify-items-start justify-items-flex-start justify-items-center justify-items-end justify-items-flex-end justify-items-stretch justify-items-baseline	Used to set the justify-self property on all immediate child elements of a flex row or grid track along the inline axis.
justify-content-*	justify-content-start justify-content-flex-start justify-content-left justify-content-center justify-content-end justify-content-flex-end justify-content-right justify-content-space-between justify-content-space-around justify-content-space-evenly	Used to set the distribution of space between or around immediate child elements along the inline axis of a flex container or grid container.
gap-*	gap-xs gap-sm gap-md gap-lg gap-xl	Used to set gutters between both rows and columns of a flexbox, grid, multi-column layout. Use "row-gap-" and "column-gap-" to set row gap and column gaps separately.
.row-gap-*	.row-gap-xs row-gap-sm row-gap-md row-gap-lg row-gap-xl	Used to set gutters between rows of a flexbox or grid layout.
column-gap-*	column-gap-xs column-gap-sm column-gap-md column-gap-lg column-gap-xl	Used to set gutters between columns of a flexbox, grid or multi-column layout.
gap-horizontal-*	gap-horizontal-xs gap-horizontal-sm gap-horizontal-md gap-horizontal-lg gap-horizontal-xl	Used to set a margin between any HTML elements horizontally, but not flexbox or grid layout rows and columns.
gap-vertical-*	gap-vertical-xs gap-vertical-sm gap-vertical-md gap-vertical-lg gap-vertical-xl	Used to set a margin between any HTML elements vertically, but not flexbox or grid layout rows and columns.
col-padding-*	col-padding-initial col-padding-xs col-padding-sm col-padding-md col-padding-lg col-padding-xl	Used to apply padding to columns of a flexbox, grid layout tracks, or HTML tables.
order-*	order-first order-1 order-2 order-3 order-4 order-5 order-6	Used to set the visual order of a flexbox or grid layout item.