Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="Grid">
  <div class="GridCell Example">
    Selvage umami Wes Anderson Carles authentic try-hard. Neutra DIY put a bird on it fanny pack chillwave narwhal, Austin synth wolf normcore Tumblr single-origin coffee.
  </div>
  <div class="GridCell Example">
    Selvage umami Wes Anderson Carles authentic try-hard. Neutra DIY put a bird on it fanny pack chillwave narwhal, Austin synth wolf normcore Tumblr single-origin coffee. Banjo ugh brunch health goth, cold-pressed tilde selfies direct trade dreamcatcher food truck Portland pork belly whatever distillery. Hella chia wolf Blue Bottle, Bushwick farm-to-table Marfa ugh put a bird on it listicle aesthetic Odd Future. Neutra banh mi sriracha migas selvage wolf, church-key meditation tofu art party flannel. Photo booth chia typewriter Wes Anderson. Godard shabby chic Intelligentsia, single-origin coffee forage craft beer cold-pressed jean shorts fashion axe biodiesel direct trade fixie stumptown.
  </div>
  <div class="GridCell Example">
    Hella chia wolf Blue Bottle, Bushwick farm-to-table Marfa ugh put a bird on it listicle aesthetic Odd Future. Neutra banh mi sriracha migas selvage wolf, church-key meditation tofu art party flannel. Photo booth chia typewriter Wes Anderson. Godard shabby chic Intelligentsia, single-origin coffee forage craft beer cold-pressed jean shorts fashion axe biodiesel direct trade fixie stumptown.
  </div>
</div>

<div class="Grid">
  <div class="GridCell--half Example">
    Selvage umami Wes Anderson Carles authentic try-hard. Neutra DIY put a bird on it fanny pack chillwave narwhal, Austin synth wolf normcore Tumblr single-origin coffee.
  </div>
  <div class="GridCell--half Example">
    Hella chia wolf Blue Bottle, Bushwick farm-to-table Marfa ugh put a bird on it listicle aesthetic Odd Future. Neutra banh mi sriracha migas selvage wolf, church-key meditation tofu art party flannel. Photo booth chia typewriter Wes Anderson. Godard shabby chic Intelligentsia, single-origin coffee forage craft beer cold-pressed jean shorts fashion axe biodiesel direct trade fixie stumptown.
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

* {
  box-sizing: border-box;
}

// this would come from the global config
$space: (
  xxs: 0.375rem, /* 6px */
  xs: 0.75rem, /* 12px */
  sm: 1.125rem, /* 18px */
  md: 1.5rem, /* 24px */
  lg: 1.875rem, /* 30px */
  xl: 2.25rem, /* 36px */
  xxl: 2.625rem, /* 42px */
  jumbo: 3rem /* 48px */
);

// this would come from the global config
$grid-max-width: 79.375rem;

$grid-sizes: (
  equal: 1,
  half: 0 0 50%,
  third: 0 0 33.3333%,
  quarter: 0 0 25%,
  full: 0 0 100%
);

$grid-alignment: (
  top: flex-start,
  bottom: flex-end,
  center: center,
  auto: auto
);
@mixin grid () {
  display: flex;
  max-width: $grid-max-width;
  flex-wrap: wrap;
}

@mixin grid-cell ($size: equal, $align: auto) {
  display: flex;
  flex: map-get($grid-sizes, $size);
  align-self: map-get($grid-alignment, $align);
}

// Maybe there is a Grid react component?
.Grid {
  @include grid;
}

.GridCell {
  @include grid-cell();
}

.GridCell--half {
  @include grid-cell(half);
}

// Padding could be applied separately 
// I'm thinking it's not a grid thing and the 
// you get the consistency by having the spacing
// vars in the global config?
.Example {
  background-color: lightgray;
  padding: map-get($space, sm);
}

SassMeister-output.css

* {
  box-sizing: border-box;
}

.Grid {
  display: flex;
  max-width: 79.375rem;
  flex-wrap: wrap;
}

.GridCell {
  display: flex;
  flex: 1;
  align-self: auto;
}

.GridCell--half {
  display: flex;
  flex: 0 0 50%;
  align-self: auto;
}

.Example {
  background-color: lightgray;
  padding: 1.125rem;
}

SassMeister-rendered.html

<div class="Grid">
  <div class="GridCell Example">
    Selvage umami Wes Anderson Carles authentic try-hard. Neutra DIY put a bird on it fanny pack chillwave narwhal, Austin synth wolf normcore Tumblr single-origin coffee.
  </div>
  <div class="GridCell Example">
    Selvage umami Wes Anderson Carles authentic try-hard. Neutra DIY put a bird on it fanny pack chillwave narwhal, Austin synth wolf normcore Tumblr single-origin coffee. Banjo ugh brunch health goth, cold-pressed tilde selfies direct trade dreamcatcher food truck Portland pork belly whatever distillery. Hella chia wolf Blue Bottle, Bushwick farm-to-table Marfa ugh put a bird on it listicle aesthetic Odd Future. Neutra banh mi sriracha migas selvage wolf, church-key meditation tofu art party flannel. Photo booth chia typewriter Wes Anderson. Godard shabby chic Intelligentsia, single-origin coffee forage craft beer cold-pressed jean shorts fashion axe biodiesel direct trade fixie stumptown.
  </div>
  <div class="GridCell Example">
    Hella chia wolf Blue Bottle, Bushwick farm-to-table Marfa ugh put a bird on it listicle aesthetic Odd Future. Neutra banh mi sriracha migas selvage wolf, church-key meditation tofu art party flannel. Photo booth chia typewriter Wes Anderson. Godard shabby chic Intelligentsia, single-origin coffee forage craft beer cold-pressed jean shorts fashion axe biodiesel direct trade fixie stumptown.
  </div>
</div>

<div class="Grid">
  <div class="GridCell--half Example">
    Selvage umami Wes Anderson Carles authentic try-hard. Neutra DIY put a bird on it fanny pack chillwave narwhal, Austin synth wolf normcore Tumblr single-origin coffee.
  </div>
  <div class="GridCell--half Example">
    Hella chia wolf Blue Bottle, Bushwick farm-to-table Marfa ugh put a bird on it listicle aesthetic Odd Future. Neutra banh mi sriracha migas selvage wolf, church-key meditation tofu art party flannel. Photo booth chia typewriter Wes Anderson. Godard shabby chic Intelligentsia, single-origin coffee forage craft beer cold-pressed jean shorts fashion axe biodiesel direct trade fixie stumptown.
  </div>
</div>