Grid layout

Since v1.0.0

View source

The grid system of Glsass is heavily by the Bootstrap one and other frameworks. By default, the layout is a 12 columns flexbox grid.

12 columns (100%)

9 columns (75%)

6 columns (50%)

3 columns (25%)

<!-- Grid example -->
<div class="o-layout">
  <div class="o-row">
    <div class="o-col u-6">6 column</div>
    <div class="o-col u-3">3 column</div>
    <div class="o-col u-2">2 column</div>
    <div class="o-col u-1">1 column</div>
  </div>
</div>

Breakpoints

The grid system work mostly with the breakpoints system for responsive design purpose.

Breakpoint	Suffix	Starting at
Extra small	xs	0
Small	sm	576px
Tablet	tb	768px
Medium	md	992px
Medium-large	ml	1200px
Large	lg	1400px
Extra large	xl	1920px

All the sizes and names are configurable from the $g-grid-breakpoints variable, for example:

@use "@glsass/settings" with (
  $g-grid-breakpoints: (
    xs: 0
    mobile: 320px,
    tablet: 740px,
    desk: 980px,
    wide: 1300px,
  ),
);

danger

Be careful when you modify the default breakpoints!
Each key from the map passed will be used together with the container sizes in the $g-grid-container-max-widths variables. It's also used by the utilities generator, so the suffix for responsive design will follow the key used in the map.

Layout container

The first part of the grid system, is the layout object .o-layout. It works as the main container to keep the layout in a defined max width.

Three containers models are available:

• .o-layout sets a max-width at each breakpoints
• .o-layout@{breakpoint} is width: 100% until the specified breakpoint
• .o-layout--fluid is width: 100% at all breakpoints

	XS	SM	TB	MD	ML	LG	XL
.o-layout	100%	540px	720px	960px	1140px	1280px	1440px
.o-layout@sm	100%	540px	720px	960px	1140px	1280px	1440px
.o-layout@tb	100%	100%	720px	960px	1140px	1280px	1440px
.o-layout@md	100%	100%	100%	960px	1140px	1280px	1440px
.o-layout@ml	100%	100%	100%	100%	1140px	1280px	1440px
.o-layout@lg	100%	100%	100%	100%	100%	1280px	1440px
.o-layout@xl	100%	100%	100%	100%	100%	100%	1440px
.o-layout--fluid	100%	100%	100%	100%	100%	100%	100%

As described before, these settings are configurable through the $g-grid-container-max-widths variable:

@use "@glsass/settings" with (
  $g-grid-breakpoints: (
    xs: 0
    mobile: 320px,
    tablet: 740px,
    desk: 980px,
    wide: 1300px,
  ),
  $g-grid-container-max-widths: (
    // xs is not required
    // if mobile is not set, it expects to be a 100% width container from this breakpoint
    tablet: 720px,
    desk: 960px,
    wide: 1140px,
  )
);

// This will generate this classes:
// .o-layout
// .o-layout@tablet
// .o-layout@desk
// .o-layout@wide
// .o-layout--fluid

Columns

You can used the columns system inside any block of your code, you just need to add the .o-row as root and then add between 1 and 12 .o-col blocks.

a simple col

a simple col

a simple col

<div class="o-row">
  <div class="o-col">a simple col</div>
  <div class="o-col">a simple col</div>
  <div class="o-col">a simple col</div>
</div>

The column size can be adjusted with an utility class .u-{number}, the number must be between 1 and 12.
The responsive adaptation is handled with class suffixes.

Will be full size in mobile, and a third of a column on desktop

Will be full size in mobile, and a third of a column on desktop

Will be full size in mobile, and a third of a column on desktop

<div class="o-row">
  <div class="o-col u-12 u-4@md">
    Will be full size in mobile, and a third of a column on desktop
  </div>
  <div class="o-col u-12 u-4@md">
    Will be full size in mobile, and a third of a column on desktop
  </div>
  <div class="o-col u-12 u-4@md">
    Will be full size in mobile, and a third of a column on desktop
  </div>
</div>

Auto width

Others utilities class are available to manage the grid system. The .u-auto class allow to have a column with a auto width.

o-col u-auto

o-col

o-col u-3

o-col u-auto

o-col

<div class="o-row">
  <div class="o-col u-auto">o-col u-auto</div>
  <div class="o-col">o-col</div>
</div>

<div class="o-row">
  <div class="o-col u-3">o-col u-3</div>
  <div class="o-col u-auto">o-col u-auto</div>
  <div class="o-col">o-col</div>
</div>

Offset

The grid system is managed with flexbox, the margin utilities classes can be used to add offset.

o-col u-4 u-mx-auto

o-col u-4 u-ml-auto

o-col u-4 u-mr-auto

o-col u-4 (empty u-2 before)

<div class="o-row">
  <div class="o-col u-4 u-mx-auto">o-col u-4 u-mx-auto</div>
</div>
<div class="o-row">
  <div class="o-col u-4 u-ml-auto">o-col u-4 u-ml-auto</div>
</div>
<div class="o-row">
  <div class="o-col u-4 u-mr-auto">o-col u-4 u-mr-auto</div>
</div>
<div class="o-row">
  <div class="o-col u-2"></div>
  <div class="o-col u-4 u-mr-auto">o-col u-4 (empty u-2 before)</div>
</div>

Alignment

The flex utilities classes can also be usefull to align horizontally and vertically elements.

a simple col

a simple col

a simple col

a simple col

a simple col

a simple col

a simple col

a simple col

a simple col

<div class="o-row u-ai-fs">
  <div class="o-col">a simple col</div>
  <div class="o-col">a simple col</div>
  <div class="o-col">a simple col</div>
</div>

<div class="o-row u-ai-c">
  <div class="o-col">a simple col</div>
  <div class="o-col">a simple col</div>
  <div class="o-col">a simple col</div>
</div>

<div class="o-row u-ai-fe">
  <div class="o-col">a simple col</div>
  <div class="o-col">a simple col</div>
  <div class="o-col">a simple col</div>
</div>

The alignment can also be applied to a column direclty

a simple col

a simple col

a simple col

<div class="o-row">
  <div class="o-col u-as-fs">a simple col</div>
  <div class="o-col u-as-c">a simple col</div>
  <div class="o-col u-as-fe">a simple col</div>
</div>