Width

Ready Added in 2.0.0

Define the width of elements for different viewport sizes.

Gloss’s Width component is often used in combination with grids to split content into responsive columns. You can apply fractions, automatic width or expand units to fill the remaining space and combine these modes.

Usage

Add one of the .gls-width-* classes to an element to determine its size. Typically, you would use a grid from the Grid component and its child elements to create the units.

Class Description
.gls-width-1-1 Fills 100% of the available width.
.gls-width-1-2 The element takes up halves of its parent container.
.gls-width-1-3 to .gls-width-2-3 The element takes up thirds of its parent container.
.gls-width-1-4 to .gls-width-3-4 The element takes up fourths of its parent container.
.gls-width-1-5 to .gls-width-4-5 The element takes up fifths of its parent container.
.gls-width-1-6 to .gls-width-5-6 The element takes up sixths of its parent container.

Note We remove redundancy into each set of unit classes, so that for instance instead of .gls-width-3-6 you should use .gls-width-1-2.

<div gls-grid>
    <div class="gls-width-1-2"></div>
    <div class="gls-width-1-2"></div>
</div>
  • 1-3
    1-3
    1-3
    1-2
    1-2
    1-4
    3-4
  • <div class="gls-text-center" gls-grid>
    <div class="gls-width-1-3">
        <div class="gls-card gls-card-default gls-card-body">1-3</div>
    </div>
    <div class="gls-width-1-3">
        <div class="gls-card gls-card-default gls-card-body">1-3</div>
    </div>
    <div class="gls-width-1-3">
        <div class="gls-card gls-card-default gls-card-body">1-3</div>
    </div>
</div>

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

<div class="gls-text-center" gls-grid>
    <div class="gls-width-1-4">
        <div class="gls-card gls-card-default gls-card-body">1-4</div>
    </div>
    <div class="gls-width-3-4">
        <div class="gls-card gls-card-default gls-card-body">3-4</div>
    </div>
</div>

Auto & expand

The Width component provides additional modifiers to give you more flexibility in the distribution of items.

Class Description
.gls-width-auto The item expands only to the width of its own content.
.gls-width-expand The item expands to fill up the remaining space of the grid container. 
<div gls-grid>
    <div class="gls-width-auto"></div>
    <div class="gls-width-expand"></div>
</div>
  • Auto
    Expand
  • <div class="gls-text-center" gls-grid>
    <div class="gls-width-auto">
        <div class="gls-card gls-card-default gls-card-body">Auto</div>
    </div>
    <div class="gls-width-expand">
        <div class="gls-card gls-card-default gls-card-body">Expand</div>
    </div>
</div>

Equal child widths

To create a grid whose child elements’ widths are evenly split, you don’t have to apply the same class to each list item within the grid. Just add one of the .gls-child-width-* classes to the grid itself.

Class Description
.gls-child-width-1-2 All elements take up half of their parent container.
.gls-child-width-1-3 All elements take up a third of their parent container.
.gls-child-width-1-4 All elements take up a fourth of their parent container.
.gls-child-width-1-5 All elements take up a fifth of their parent container.
.gls-child-width-1-6 All elements take up a sixth of their parent container.
.gls-child-width-auto Divides the grid into equal units depending on the content size.
.gls-child-width-expand Divides the grid into equal units depending on the available space. 
<div class="gls-child-width-1-4" gls-grid>
    <div></div>
    <div></div>
    ...
</div>
  • Item
    Item
    Item
    Item
    Item
  • <div class="gls-child-width-1-4 gls-grid-small 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>

Items that use width classes with fractions will break into a new row, if they no longer fit their container’s width. When using one of the expand classes, however, the space will be evenly distributed among items that always stay in the same row.

<div class="gls-child-width-expand" gls-grid>
    <div></div>
    <div></div>
    ...
</div>
  • Item
    Item
    Item
    Item
    Item
  • <div class="gls-child-width-expand gls-grid-small 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>

Fixed width

In addition to the calculated width classes, you can also add one of the following classes, which apply fixed widths.

Class Description
.gls-width-small Applies a fixed width of 150px.
.gls-width-medium Applies a fixed width of 300px.
.gls-width-large Applies a fixed width of 450px.
.gls-width-xlarge Applies a fixed width of 600px.
.gls-width-2xlarge Applies a fixed width of 750px. 
<div class="gls-width-medium"></div>
  • Small
    Medium
    Large
    X-Large
    2X-Large
  • <div class="gls-width-small gls-margin"><div class="gls-card gls-card-small gls-card-default gls-card-body">Small</div></div>
<div class="gls-width-medium gls-margin"><div class="gls-card gls-card-small gls-card-default gls-card-body">Medium</div></div>
<div class="gls-width-large gls-margin"><div class="gls-card gls-card-small gls-card-default gls-card-body">Large</div></div>
<div class="gls-width-xlarge gls-margin"><div class="gls-card gls-card-small gls-card-default gls-card-body">X-Large</div></div>
<div class="gls-width-2xlarge gls-margin"><div class="gls-card gls-card-small gls-card-default gls-card-body">2X-Large</div></div>

Mixing widths

You can also combine .gls-child-width-* classes with .gls-width-* classes for individual items. That way it is possible, for example, to create a grid with one item that has a specific width and all other items expanding to fill the remaining space.

<div class="gls-child-width-expand" gls-grid>
    <div></div>
    <div class="gls-width-1-3"></div>
    <div></div>
    ...
</div>
  • Expand
    1-3
    Expand
    Expand
  • <div class="gls-child-width-expand gls-grid-small gls-text-center" gls-grid>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Expand</div>
    </div>
    <div class="gls-width-1-3">
        <div class="gls-card gls-card-default gls-card-body">1-3</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Expand</div>
    </div>
    <div>
        <div class="gls-card gls-card-default gls-card-body">Expand</div>
    </div>
</div>

Responsive width

Gloss provides a number of responsive widths classes. Basically they work just like the usual width classes, except that they have suffixes that represent the breakpoint from which they come to effect. These classes can be combined with the Visibility component. This is great to adjust your layout and content for different device sizes.

Class Description
.gls-width-*
.gls-child-width-*		 Affects all device widths, grid columns stay side by side.
.gls-width-*@s
.gls-child-width-*@s		 Affects device widths of 640px and larger. Grid columns will stack on smaller sizes.
.gls-width-*@m
.gls-child-width-*@m		 Affects device widths of 960px and larger. Grid columns will stack on smaller sizes.
.gls-width-*@l
.gls-child-width-*@l		 Affects device widths of 1200px and larger. Grid columns will stack on smaller sizes.
.gls-width-*@xl
.gls-child-width-*@xl		 Affects device widths of 1600px and larger. Grid columns will stack on smaller sizes.
  • 1-2@m
    1-4@m
    1-4@m
    1-5@m
    hidden@l
    1-5@m
    1-3@l
    3-5@m
    2-3@l
    auto@m
    visible@l
    1-3@m
    expand@m
  • <div class="gls-grid-match gls-grid-small gls-text-center" gls-grid>
    <div class="gls-width-1-2@m">
        <div class="gls-card gls-card-default gls-card-body">1-2@m</div>
    </div>
    <div class="gls-width-1-4@m">
        <div class="gls-card gls-card-default gls-card-body">1-4@m</div>
    </div>
    <div class="gls-width-1-4@m">
        <div class="gls-card gls-card-default gls-card-body">1-4@m</div>
    </div>
    <div class="gls-width-1-5@m gls-hidden@l">
        <div class="gls-card gls-card-secondary gls-card-body">1-5@m<br>hidden@l</div>
    </div>
    <div class="gls-width-1-5@m gls-width-1-3@l">
        <div class="gls-card gls-card-default gls-card-body">1-5@m<br>1-3@l</div>
    </div>
    <div class="gls-width-3-5@m gls-width-2-3@l">
        <div class="gls-card gls-card-default gls-card-body">3-5@m<br>2-3@l</div>
    </div>
</div>

<div class="gls-grid-match gls-grid-small gls-text-center" gls-grid>
    <div class="gls-width-auto@m gls-visible@l">
        <div class="gls-card gls-card-primary gls-card-body">auto@m<br>visible@l</div>
    </div>
    <div class="gls-width-1-3@m">
        <div class="gls-card gls-card-default gls-card-body">1-3@m</div>
    </div>
    <div class="gls-width-expand@m">
        <div class="gls-card gls-card-default gls-card-body">expand@m</div>
    </div>
</div>