Skip to main content

Grid

loonar-wp/assets/styles/config/
├── colors/
├── layout/
│   ├── _breakpoints.scss
│   └── _grid.scss
├── typography/
└── z-index/

Grid type​

_grid.scss
$grid-type: 'flex';

Fluid grid​

If you've previously set $fluid-breakpoints, you should set this option to true. Setting this option tells Loonar to use $fluid-breakpoints for scaling the grid and the elements within it.

_grid.scss
// ...previous declarations
$grid-fluid: false;

Grid layouts​

Loonar is capable of changing the grid layout for each breakpoint you previously specified in the $breakpoints variable. This means, that you can manipulate the number of columns, container width, gap or grid margin based on the breakpoint.

The only thing to keep in mind is that Loonar follows mobile-first approach, so whenever you change any property it will affect all higher breakpoints. So if you wish to only change the middle breakpoint, you will have to reset the properties for the next breakpoint.

_grid.scss
// ...previous declarations

$grid-layouts: (
  'xs': (
    'container': 100%,
    'columns': 12,
    'gap': 15px,
    'margin': 15px,
  ),
  'sm': (
    'container': 540px,
    // gap is 15px
  ),
  'md': (
    'container': 720px,
    // gap is 15px
  ),
  'lg': (
    'container': 960px,
    'gap': 30px,
  ),
  'xl': (
    'container': 1140px,
    // gap is 30px
  ),
  'xxl': (
    'container': 1560px,
    // gap is 30px
  ),
);