Skip to main content

Using Fluid CSS Grid Layout

Prequisites: Read this first!

Most of the parts of this tutorial heavily rely on the CSS Grid Layout. If you haven't already, please read the Using Fixed CSS Grid Layout guide first. Otherwise, you'll get lost.

Prequisites: Configuration

The guide assumes that the grid is fluid CSS grid layout and uses 12 columns for each breakpoint. Learn more about configuring your grid here.

styles/assets/configuration/layout/_breakpoints.scss
$breakpoints: (
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px,
  'xxl': 1640px,
);

$fluid-breakpoints: (
  'xs': (360px, 709px),
  'sm': (1024px, 768px),
  'xl': (1920px, 1080px),
);
styles/assets/configuration/layout/_grid.scss
$grid-type: 'grid';
$grid-fluid: true;
$grid-layouts: (
  'xs': (
    'container': 100%,
    'columns': 12,
    'gap': 15px,
    'margin': 15px,
  ),
);

Fixed vs Fluid​

Fluid CSS Grid inherits its usage from the fixed CSS Grid Layout. There are few differences, in terms of how Loonar process functions and mixins:

  • Use of fluid units instead of static units (vw, vh, vmin and vmax instead of px) across grid() and spread() mixins,
  • spread() mixin will calculate the value based on $fluid-breakpoints and apply the value on assigned breakpoint (from $breakpoints).

Fluid breakpoints​

Fluid breakpoints ($fluid-breakpoints) is a Sass map of design sizes (artboard width and height). Each key is a breakpoint name and the value is a pair of numbers (width of design, height of design). For instance, if we were given a Figma or Zeplin designs with mobile and desktop versions, where the mobile version is 360px by 709px and the desktop version is 1920px by 1080, we could use the following Sass map:

styles/assets/configuration/layout/_breakpoints.scss
$fluid-breakpoints: (
  'xs': (360px, 709px),
  'xl': (1920px, 1080px),
);

The xs and xl are breakpoints names which tell Loonar that the spread() mixin should create a media query at this breakpoint, but rather than use this breakpoint's value, it should use the value inside the pair, e.g. 360px when using vw or 709px when using vh.

Fluid values - the spread mixin​

Imagine we know the minimum and maximum font-size, but we want the value to be spread across the rest of breakpoints. Because our layout if fluid, we want the values to be exactly as on the design sizes, but start using it on certain breakpoint.

styles/assets/configuration/layout/_grid.scss
$grid-fluid: true;
styles/assets/configuration/layout/_breakpoint.scss
// ...

// We defined the breakpoints used in our layout.
$breakpoints: (
  'sm': 576px,
  'md': 768px,
  'lg': 992px,
  'xl': 1200px,
  'xxl': 1640px,
);

// We defined the fluid breakpoints.
// They will be used for `spread` mixin as soon as we use `$grid-fluid: true;`.
$fluid-breakpoints: (
  'xs': (360px, 709px),
  'sm': (1024px, 768px),
  'xl': (1920px, 1080px),
);

Components/ExampleComponent/_style.scss
.m-example-component {
  @include spread(font-size, 30px, 60px);
}

In this example, the spread mixin will work as follow:

  • calculate the value for $sm breakpoint based on $minimum-size (30px) and $maximum-size (60px)
  • convert the static units px to fluid vw units, using 360px, 1024px and 1920px as the breakpoint values
  • create media queries for $sm and $xl breakpoints, including the property and calculated fluid value.

This approach ensures that the values will match exactly the ones used on the design.