So i wrote a blog post on how to write simple grids back in 2016 and with the new support that we have in the common browsers i have come up with a much simpler example

Lets define our grid helpers

// Basic gutter
$gt: 20px;

// Define grid columns
@function columns($cols, $spans: 1) {
  @if $cols == 1 {
    @return 100%;
  } @else {
    @return calc(((100% / #{$cols}) * #{$spans}) - #{$gt});
  }
}

// Reusable grid wrapper
%grid-wrap {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% + #{$gt});
  margin-left: -$gt;
}

So now we want to make a 3 column grid, here is our example markup

<div class="component-class">
  <div class="component-subitem"></div>
  <div class="component-subitem"></div>
  <div class="component-subitem"></div>
  <div class="component-subitem"></div>
  <div class="component-subitem span-2"></div>
  <div class="component-subitem span-3"></div>
</div>

Then lets define this simple styling to manipulate our grid

// Bind it to a component that should countain a grid
.component-class {
  @extend %grid-wrap;
}

// New lets style all the sub elements
// Here we're doing a 3 column grid
.component-subitem {
  background: red;
  height: 120px;
  width: columns(3);
  margin-left: $gt;
  margin-bottom: $gt;
  
  // On portrait tablet or lower we convert it to a single column grid
  @media only screen and (max-width: 768px) {
    width: columns(1);
  }
  
  // Then we handle our span of content which make the grid super
  // customizable
  &.span-2 {
    width: columns(3, 2);
  
    // On portrait tablet or lower we convert it to a single column grid
    @media only screen and (max-width: 768px) {
      width: columns(1);
    }
  }
  
  &.span-3 {
    width: columns(3, 3);
  }
}

Grids should be very simple but either they pollute our HTML with tons of classes which makes it hard to maintain the HTML or otherwise we generate a lot of styling that we dont need.

With this example we only generate the code we need, and its super simple to set up, last but not least its also widely supported, whats not to like?

via GIPHY