Grid Goodness

SassMeister-input-HTML.html

<br/>
<div class="wrapper" data-rh-layout="card-gallery">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<br/>
<div class="wrapper2" data-rh-layout="box-gallery">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>  
</div>
<h2>yay grid!</h2>

SassMeister-input.scss

// ----
// libsass (v3.5.4)
// ----

@import "breakpoint";

$breakpoint-zero: 0;
$breakpoint-xs-min: 480px;
$breakpoint-sm-min: 768px;
$breakpoint-md-min: 992px;
$breakpoint-lg-min: 1200px;

$box-padding: 30px;
$text-readability-min: 200px; // avoid drinking straws
$ideal-card: ($text-readability-min + ($box-padding * 2));


/*
title: grid-layout
category: Extends - layout
--
Starter pack for a grid; just add grid-template-columns!
*/
%grid-layout {
    display: flex; // Set up flexbox fallback for browsers that don't support grid.
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;

    > * {
        margin-bottom: $box-padding;
        @include breakpoint($breakpoint-xs-min) {
            flex: 0 0 42%;
        }
        @include breakpoint($breakpoint-md-min) {
            flex: 0 0 28%;
        }
    }
    // Grid-compliant browsers use this code.
    @supports (display: grid) {
        display: grid;
        grid-gap: 15px;
        > * {
            margin-bottom: 0;
        }
    }
}
/* Handy dandy card galleries
*/

[data-rh-layout="card-gallery"] {  // auto FIT
    @extend %grid-layout;
    @supports (display: grid) {
        grid-template-columns: repeat(auto-fit, minmax(#{$ideal-card}, 1fr));
    }
}

[data-rh-layout="box-gallery"] {  // auto FILL
    @extend %grid-layout;
    @supports (display: grid) {
        grid-template-columns: repeat(auto-fill, minmax(#{$ideal-card}, 1fr));
    }
}








////////
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.box:nth-child(even) {
  background-color: #ccc;
  color: #000;
}

SassMeister-output.css

/*
title: grid-layout
category: Extends - layout
--
Starter pack for a grid; just add grid-template-columns!
*/
[data-rh-layout="card-gallery"], [data-rh-layout="box-gallery"] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}

[data-rh-layout="card-gallery"] > *, [data-rh-layout="box-gallery"] > * {
  margin-bottom: 30px;
}

@media (min-width: 480px) {
  [data-rh-layout="card-gallery"] > *, [data-rh-layout="box-gallery"] > * {
    flex: 0 0 42%;
  }
}

@media (min-width: 992px) {
  [data-rh-layout="card-gallery"] > *, [data-rh-layout="box-gallery"] > * {
    flex: 0 0 28%;
  }
}

@supports (display: grid) {
  [data-rh-layout="card-gallery"], [data-rh-layout="box-gallery"] {
    display: grid;
    grid-gap: 15px;
  }
  [data-rh-layout="card-gallery"] > *, [data-rh-layout="box-gallery"] > * {
    margin-bottom: 0;
  }
}

/* Handy dandy card galleries
*/
@supports (display: grid) {
  [data-rh-layout="card-gallery"] {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

@supports (display: grid) {
  [data-rh-layout="box-gallery"] {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.box:nth-child(even) {
  background-color: #ccc;
  color: #000;
}

SassMeister-rendered.html

<br/>
<div class="wrapper" data-rh-layout="card-gallery">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<br/>
<div class="wrapper2" data-rh-layout="box-gallery">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>  
</div>
<h2>yay grid!</h2>