Grid

Ready Added in 2.0.0

Create a fully responsive, fluid and nestable grid layout.

The Grid system of Gloss allows you to arrange block elements in columns. It works closely together with the Width component to determine how much space of the container each item will take up, and it can also be combined with the Flex component to align and order grid items.

Usage

To create the grid container, add the gls-grid attribute to a <div> element. Add child <div> elements to create the cells. By default, all grid cells are stacked. To place them side by side, add one of the classes from the Width component. Using .gls-child-width-expand will automatically apply equal width to items, regardless of how many there are.

Note There’s no need to add a .gls-grid class as it will be added via JavaScript. However, if Gloss’s JavaScript is deferred, the class should be added to prevent stacking while loading.

<div gls-grid>
    <div></div>
    <div></div>
</div>

Note Often cards from the Card component are used inside a grid. This also goes for the following examples for visualization.

  • Item
    Item
    Item
  • <div class="gls-child-width-expand@s gls-text-center" gls-grid>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
</div>

Gap modifiers

The Grid component comes with a default gap that is decreased automatically from a certain breakpoint usually on a smaller desktop viewport width. To apply a different gap, add one of the following classes.

Class Description
.gls-grid-small Add this class to apply a small gap.
.gls-grid-medium Add this class to apply a medium gap like the default one, but without a breakpoint.
.gls-grid-large Add this class to apply a large gap with breakpoints.
.gls-grid-collapse Add this class to remove the grid gap entirely. 
<div class="gls-grid-small" gls-grid>...</div>
  • Item
    Item
    Item
    Item
    Item
    Item
    Item
    Item
    Item
    Item
    Item
    Item
  • <div class="gls-grid-small gls-child-width-expand@s gls-text-center" gls-grid>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
</div>

<div class="gls-grid-medium gls-child-width-expand@s gls-text-center" gls-grid>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
</div>

<div class="gls-grid-large gls-child-width-expand@s gls-text-center" gls-grid>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
</div>

<div class="gls-grid-collapse gls-child-width-expand@s gls-text-center gls-margin-large-top" gls-grid>
    <div>
        <div class="gls-background-muted gls-padding">Item</div>
    </div>
    <div>
        <div class="gls-background-primary gls-padding gls-light">Item</div>
    </div>
    <div>
        <div class="gls-background-secondary gls-padding gls-light">Item</div>
    </div>
</div>

Column and Row

To apply a different gap to just the column or row, add one of the following classes.

Class Description
.gls-grid-column-small
.gls-grid-row-small		 Add one of these classes to apply a small gap to the column or row.
.gls-grid-column-medium
.gls-grid-row-medium		 Add one of these classes to apply a medium gap to the column or row.
.gls-grid-column-large
.gls-grid-row-large		 Add one of these classes to apply a large gap to the column or row.
.gls-grid-column-collapse
.gls-grid-row-collapse		 Add one of these classes to remove the grid gap entirely from the column or row. 
<div class="gls-grid-column-small gls-grid-row-large" gls-grid>...</div>
  • Item
    Item
    Item
    Item
    Item
    Item
  • <div class="gls-grid-column-small gls-grid-row-large gls-child-width-1-3@s gls-text-center" gls-grid>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
</div>

Nested grid

You can easily extend your grid layout with nested grids.

<div gls-grid>
    <div>
        <div gls-grid>
            <div></div>
            <div></div>
        </div>
    </div>
    <div>
        <div gls-grid>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
  • Item
    Item
    Item
  • <div class="gls-child-width-1-2 gls-text-center" gls-grid>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
	</div>
	<div>
		<div class="gls-child-width-1-2 gls-text-center" gls-grid>
			<div>
				<div class="gls-card gls-card-primary gls-card-body">Item</div>
			</div>
			<div>
				<div class="gls-card gls-card-primary gls-card-body">Item</div>
			</div>
		</div>
	</div>
</div>

Divider modifier

Add the .gls-grid-divider class to separate grid cells with lines. This class can be combined with the gap modifiers. As soon as the grid stacks, the divider lines will become horizontal.

<div class="gls-grid-divider" gls-grid>...</div>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  • <div class="gls-grid-divider gls-child-width-expand@s" gls-grid>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</div>

Match height

To match the height of the direct child of each cell, add the .gls-grid-match class. This is needed to match the height of cards from the Card component.

<div class="gls-grid-match" gls-grid>....</div>
  • Item
    Item
    ...
    Item
    ...
    ...
  • <div class="gls-grid-match gls-child-width-expand@s gls-text-center" gls-grid>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
     </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item<br>...</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item<br>...<br>...</div>
    </div>
</div>

Match only one cell

You can also match the height of the direct child of just one cell. To do so, add the .gls-grid-item-match class to the grid item whose child you want to match.

<div gls-grid>
    <div class="gls-grid-item-match"></div>
    <div></div>
</div>

  • Heading

    Lorem ipsum dolor sit amet.

    Heading

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

  • <div class="gls-child-width-expand@s" gls-grid>
    <div class="gls-grid-item-match">
        <div class="gls-card gls-card-default gls-card-body">
            <h3>Heading</h3>
            <p>
                Lorem ipsum dolor sit amet.
            </p>
        </div>
     </div>
    <div>
        <h3>Heading</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
    </div>
</div>

Targets

For a more specific selection of the elements whose heights should be matched, add the target: SELECTOR option to the gls-height-match attribute from the Height component.

<div gls-grid gls-height-match="target: > div > .gls-card">
    <div>
        <div class="gls-card gls-card-default"></div>
    </div>
    <div>
        <div class="gls-card gls-card-default"></div>
    </div>
</div>
  • Item
    Item
    ...
    Item
    ...
    ...
  • <div class="gls-child-width-expand@s gls-text-center" gls-grid gls-height-match="target: > div > .gls-card">
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
     </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item<br>...</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item<br>...<br>...</div>
    </div>
</div>

Grid and width

The grid is mostly used in combination with the Width component. This allows for great flexibility when determining the column widths.

<div gls-grid>
    <div class="gls-width-auto@m"></div>
    <div class="gls-width-1-3@m"></div>
    <div class="gls-width-expand@m"></div>
</div>
  • Auto
    1-3
    Expand
  • <div class="gls-text-center" gls-grid>
    <div class="gls-width-auto@m">
        <div class="gls-card gls-card-default gls-card-body">Auto</div>
    </div>
    <div class="gls-width-1-3@m">
        <div class="gls-card gls-card-default gls-card-body">1-3</div>
    </div>
    <div class="gls-width-expand@m">
        <div class="gls-card gls-card-default gls-card-body">Expand</div>
    </div>
</div>

Child width

If the grid columns are evenly split, you can add one of the .gls-child-width-* classes to the grid container instead of adding a class to each of the items.

<div class="gls-child-width-1-2@s gls-child-width-1-3@m" gls-grid>...</div>
  • Item
    Item
    Item
  • <div class="gls-child-width-1-2@s gls-child-width-1-3@m gls-text-center" gls-grid>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
</div>

For more detailed information, take a look at the Width component.

Grid and flex

You can easily combine the grid with the Flex component. That way you can modify the items’ alignment, ordering, direction and wrapping. This allows you, for example, to flip the cells’ display order for wider viewports. All this works together with the gap and divider modifiers.

<div class="gls-flex-center" gls-grid>
    <div></div>
    <div class="gls-flex-first"></div>
</div>
  • Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
  • <div class="gls-grid-small gls-child-width-1-4@s gls-flex-center gls-text-center" gls-grid>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item 1</div>
    </div>
    <div class="gls-flex-last">
        <div class="gls-card gls-card-secondary gls-card-body">Item 2</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item 3</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item 4</div>
    </div>
    <div class="gls-flex-first">
        <div class="gls-card gls-card-primary gls-card-body">Item 5</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item 6</div>
    </div>
</div>

Masonry

If grid cells have different heights, a layout free of gaps can be created by adding masonry: true to the attribute.

<div gls-grid="masonry: true">...</div>
  • Item
    Item
    Item
    Item
    Item
    Item
    Item
    Item
    Item
  • <div class="gls-child-width-1-2@s gls-child-width-1-3@m" gls-grid="masonry: true">
    <div>
        <div class="gls-card gls-card-default gls-flex gls-flex-center gls-flex-middle" style="height: 100px">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-flex gls-flex-center gls-flex-middle" style="height: 130px">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-flex gls-flex-center gls-flex-middle" style="height: 150px">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-flex gls-flex-center gls-flex-middle" style="height: 160px">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-flex gls-flex-center gls-flex-middle" style="height: 120px">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-flex gls-flex-center gls-flex-middle" style="height: 140px">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-flex gls-flex-center gls-flex-middle" style="height: 200px">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-flex gls-flex-center gls-flex-middle" style="height: 180px">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-flex gls-flex-center gls-flex-middle" style="height: 140px">Item</div>
    </div>
</div>

Note You can view more examples in the tests for the Grid Masonry.

Filter and order

Grid items can also be filtered and sorted by category, date or other metadata. Take a look at the Filter component.

Parallax

To move single columns of a grid at different speeds while scrolling, just add parallax: NUMBER to the attribute. The number sets the parallax translation in pixels.

<div gls-grid="parallax: 150">...</div>

This effect can be applied to two types of markup. The following example uses three defined columns with three items each.

  • Item
    Item
    Item
    Item
    Item
    Item
    Item
    Item
    Item
  • <div class="gls-child-width-expand@s gls-text-center" gls-grid="parallax: 150">
    <div>
        <div class="gls-card gls-card-default gls-card-body gls-grid-margin">Item</div>
        <div class="gls-card gls-card-default gls-card-body gls-grid-margin">Item</div>
        <div class="gls-card gls-card-default gls-card-body gls-grid-margin">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body gls-grid-margin">Item</div>
        <div class="gls-card gls-card-default gls-card-body gls-grid-margin">Item</div>
        <div class="gls-card gls-card-default gls-card-body gls-grid-margin">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body gls-grid-margin">Item</div>
        <div class="gls-card gls-card-default gls-card-body gls-grid-margin">Item</div>
        <div class="gls-card gls-card-default gls-card-body gls-grid-margin">Item</div>
    </div>
</div>

The parallax effect is also applied if grid columns wrap into the next row, as shown in the next example.

  • Item
    Item
    Item
    Item
    Item
    Item
    Item
    Item
    Item
    Item
    Item
    Item
  • <div class="gls-child-width-1-2@s gls-child-width-1-3@m gls-child-width-1-4@l gls-text-center" gls-grid="parallax: 150">
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Item</div>
    </div>
</div>

Note You can view more examples in the Grid Parallax tests.

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

Option Value Default Description
margin String gls-grid-margin This class is added to items that break into the next row, typically to create margin to the previous row.
first-column String gls-first-column This class is added to the first element in each row.
masonry Boolean false Enables masonry layout for this grid.
parallax Number 0 Parallax translation value. The value must be a positive integer. Falsy disables the parallax effect (default).

JavaScript

Learn more about JavaScript components.

Initialization

Gloss.grid(element, options);