Populating Grid Columns

Let's take another look at our grid design in order to style the teaser area for the most recent article:

We see that it spans 8 columns, starting in the third column - or, in other words, it's shifted two columns to the right. That's where Neat's grid-column and grid-push mixins come into play:

/************ Teaser Top */
article.teaser--top {
  @include grid-column(8, $neat-grid--page);
  @include grid-push(2, $neat-grid--page);

grid-column() takes the number of columns that the item should cover. Translated to simple CSS, this will look as follows:

article.teaser--top {
  width: calc(66.66667% - 73.33333px);
  float: left;
  margin-left: 44px;

Grid column configuration - GitHub

From the number of columns, Neat calculates a flexible percentage value for the width, also taking any gutter widths into account.

grid-push() takes the number of columns you want to skip. In our example, this adds the following margin to the left (overwriting the standard margin value defined by grid-column):

margin-left: calc(16.66667% - 51.33333px + 88px);

Please note that, for both mixin calls, we had to provide the grid as a second argument. This is because we want to use our own, custom grid instead of Neat's default one.

Neat Syntax

The syntax for all of Neat's mixins is wonderfully consistent:

  • Every mixin's name starts with the "grid-" prefix.
  • Every mixin can take exactly two arguments. The first one is closely related to the mixin's actual functionality. And the second one can be used to reference a custom grid definition.

Get our popular Git Cheat Sheet for free!

About Us

As the makers of Tower, the best Git client for Mac and Windows, we help over 100,000 users in companies like Apple, Google, Amazon, Twitter, and Ebay get the most out of Git.

Just like with Tower, our mission with this platform is to help people become better professionals.

That's why we provide our guides, videos, and cheat sheets (about version control with Git and lots of other topics) for free.