Basic styles and structure

In its most basic form, chaestli needs a row and a column element to take action.
Containers are not necessary in any way.

This is the simplest markup needed to create a grid


<div class="grid">
  <div class="grid__container">
    <div class="grid__row">
      <div class="grid__col">
        Column 1
      </div>
    </div>
  </div>
</div>

You can then use the grid helpers to style your HTML as it follows

@use 'chaestli';

.grid {
  .grid__container {
    @include chaestli.container;
  }

  .grid__row {
    @include chaestli.grid;
  }
}

?

Fixed container size

When you need a fixed layout, you can implement this by using a container with a constrain.
A container is also necessary when defining the space between the edges and the beginning of the grid.

Using the width property you can customize the size of your container

.grid {
  .grid__container {
    @include chaestli.container((width: 800px));
  }
}

?

Column size

The column amount and size in chaestli depends the num-cols property you define with chaestli.grid mixin. Cols can be given a size by using the chaestli.column that is only an syntax sugar alias for the grid-column rule.

.grid {
  .grid__row {
    @include chaestli.grid((num-cols: 12));
  }

  .grid__col {
    @include chaestli.column(span 3, span 12); // 3 of 12 columns
  }
}

Basic spacing

The gutter between columns can be defined by using the gutter property of the chaestli.grid mixin:

.grid {
  .grid__row {
    @include chaestli.grid((num-cols: 12, gutter: 16px));
  }
}

Push and pull

Thanks to a smart use of the chaestli.column mixin you can position your columns in the grid without the use of dirty margin hacks

.grid {
  .grid__col--push {
    @include chaestli.column(4, span 3); // start from the 4th column and span the column for other 3
  }

  .grid__col--pull {
    @include chaestli.column(7, span 3); // start from the 7th column and span the column for other 3
  }
}

Four side spacing

The gutter property of the chaestli.grid mixin may contain also 2 values that can be used to define the column-gap and row-gap

.grid {
  .grid__row {
    @include chaestli.grid((num-cols: 12, gutter: (16px, 16px)));
  }
}

Edge spacing

The edge property of the chaestli.container mixin defines the edge spacing.

.grid {
  .grid__container {
    @include chaestli.container((edge: 16px, width: 800px));
  }
}

Advanced examples

The following examples show how you can combine chaestli with @dreipol/scss-mq to make your grid responsive on different screen sizes.

Spacing (gutter and edge) change in response to media queries

Thanks to the mq @dreipol/scss-mq mixin we can customize our grid on several screen resolutions

.grid {
  .grid__container {
    @include chaestli.container((edge: 16px, width: 1200px));

    @include mq('<=sm') {
      @include chaestli.container((edge: 8px, width: 800px));
    }
  }

  .grid__row {
    @include chaestli.row((gutter: 16px, num-cols: 12));

    @include mq('<=sm') {
      @include chaestli.row((gutter: 8px, num-cols: 12));
    }
  }
}

Span changes in response to media queries

The size of your columns can also be managed using the mq mixin

.grid {
  .grid__col {
    @include chaestli.column((span 3 / span 12));

    @include mq('md') {
      @include chaestli.column((span 6 / span 12));
    }

    @include mq('<=sm') {
      @include chaestli.column((span 12 / span 12));
    }
  }
}

Nested grids

It's possible to nest a grid structure within a grid column. These grids can even have their own rules such as different gutters.

Grid demo