Foundation 6 CSS framework has another new grid system. This one is named XY Grid. I’m not going to go into too much details of the grid itself, but going to go through a possibility to use it semantic way.

Idea is that you can name your CSS classes anything you want like blog-item, blog-grid, blog-container etc and include foundation classes into your classes in SCSS. This is possible because Foundation CSS is generated with a set of Sass mixins.

If you implement grid this way, your HTML stays cleaner. Here’s a example.

Normally with XY grid you would add grid to your HTML like this.

<div class="grid-container">
  <div class="grid-x grid-margin-x">
     <div class="cell small-12 medium-6 large-4">My blog post</div>
     <div class="cell small-12 medium-6 large-4">My second blog post</div>
     <div class="cell small-12 medium-6 large-4">My third blog post</div>
  </div>
</div>

When you do same semantic way HTML looks like this.

<div class="container">
  <div class="blog-grid">
    <div class="blog-item">My blog post</div>
    <div class="blog-item">My second blog post</div>
    <div class="blog-item">My third blog post</div>
  </div>
</div>

After this you add to your SCSS some foundation mixins.

.container {
  @include xy-grid-container;
}

.blog-grid {
  @include xy-grid;
}

.blog-item {
  @include xy-cell(12);
  @include xy-gutters($gutter-position: left right bottom);

  @include breakpoint(medium) {
    @include xy-cell(6);
  }

  @include breakpoint(large) {
    @include xy-cell(4);
  }
}

That’s pretty much it. This is new alternative way to use grid system, one that keeps your html clean. I think this is a good alternative while waiting CSS grid to get enough browser support. After that these CSS frameworks need to do something even more awesome to stay relevant and I’m sure they will.

Foundation has excellent documentation and full XY Grid reference can be found here.