BassCSS Grid Layout
BassCSS provides a great base from which to build a set of utility-first styles. Unfortunately, it was built before CSS Grid became widely supported and so ships with a grid system that is float-based. While that works, CSS Grid is more powerful and flexible, all without requiring negative margins to compensate for the gutters.
This module is built to complement BassCSS by mimicking its naming conventions and using the same CSS variables. As a result, it should slot smoothly in place next to BassCSS. As it is also fully self-contained, it can be used independently of BassCSS.
The styles contained within are composable, immutable utilities that are designed to each do one thing, do it well, and to be extended by user-defined styles in each project's stylesheets. As such, do not feel limited to the styles that are provided.
Defining a Grid
To start out with, define your grid container by adding the grid
class to it.
The immediate children of this element will be arranged into a grid.
Unfortunately, your grid won't be very grid-like until you define some columns.
Setting Columns
CSS Grid provides several powerful ways to define a grid to be exactly what your project needs. The possibilities are too varied to be encoded into a utility module like this, but the basic notion of a regular columnar grid translates well into utility styles and should cover most needs.
To set the number of columns within a grid container, add one of the grid-col-X
classes to your grid container, where X
is the desired number of columns.
There are classes for 2, 3, 4, 6, 8, 9, 12, and 16 column layouts.
Of course, you're always free to define your own classes to set columns as well.
Responsive Columns
Column sizes are also responsive with the sm-
, md-
, and lg-
prefixes, which
come into effect at the same break points as for BassCSS. This includes an
additional prefix of xl-
for extra large screens at two size increments (12em)
above lg-
.
Spanning Columns
It's common to need some grid items to span multiple columns. For this, add
one of the grid-col-span-X
classes to the element that needs to span multiple
columns. As with the column definitions, these classes are responsive with the
same set of prefixes.
Getting into the Gutter
Without further classes, your grid will contain no space between grid items.
We'll want to let the items have some space, so there are utilities to add some
space between your rows and your columns. col-gap-X
will set spaces between
columns, while row-gap-X
will set spaces between rows. gap-X
will set both
at once. X
follows the same sizes as BassCSS spaces, so gap-2
will add as
much space between grid items as mb2
would add beneath an element.
Grid Item Alignment
By default, grid items are stretched to fill their respective slots in the grid. There are several classes available to fine-tune this. Some can be set on the grid container to affect all items, while others go onto individual grid items for more targeted adjustments.
On the Grid Container
For vertical alignment, use align-items-center
, align-items-end
, and
align-items-start
to align items to the center, bottom, or top of their grid
areas. align-items-stretch
is also available to return to the default of
stretching them.
Horizontal alignment uses the justify-items-center
, justify-items-end
,
justify-items-start
, and justify-items-stretch
classes.
Both vertical and horizontal can be set at the same time by items-center
,
items-end
, items-start
, and items-stretch
.
On Individual Grid Items
The classes for individual adjustments mirror those that go directly on the grid container.
align-self-center
, align-self-end
, align-self-start
,
and align-self-stretch
set the vertical alignment of individual items.
justify-self-center
, justify-self-end
, justify-self-start
,
and justify-self-stretch
set the horizontal alignment of individual items.
self-center
, self-end
, self-start
, and self-stretch
will set both at once.
Automatic Placement of New Grid Items
Grid items that don't have specific places on a grid defined will be automatically
placed horizontally after the last grid item. This behavior can be changed by
setting one of the grid-auto-flow-X
classes onto the grid container.
grid-auto-flow-column
will cause new items to be placed vertically until the grid
runs out of rows before moving on to the next column. grid-auto-flow-column-dense
does the same, but will go back and fill in holes in the grid layout as it is able.
grid-auto-flow-row
explicitly sets what is otherwise the default behavior of
filling in a row before moving to the next while, while grid-auto-flow-row-dense
will attempt to fill in earlier holes in the grid.