Grid test flight

grid-test-flight.markdown

Grid test flight

A Pen by Sebastian Rothbucher on CodePen.

License.

index.html

<div class="grd" id="grd">
  <div class="article">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="signup">
    <div>
      <strong>Sign up for sth nice</strong>
    </div>
    <div>
      <label><small>Your mail <br /></small><input type="email" placeholder="[email protected]" style="width: 100%; " /></label>
    </div>
  </div>
</div>
<div>
  <label>Use grid <input type="checkbox" id="usegrid" checked="checked" /></label> <label>Simulate small <input type="checkbox" id="simsmall" /></label>
</div>
<div class="withgrid">Yay, we have grid</div>
<div class="withoutgrid">Nope, no grid</div>

script.js

window.onload = () => {
  $("#usegrid").on("change", (e) => e.target.checked ? $("#grd").addClass("grd") : $("#grd").removeClass("grd"));
  $("#simsmall").on("change", (e) =>  e.target.checked ? $("body").addClass("smallgrd") : $("body").removeClass("smallgrd"));
};

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

.grd {
  display: grid;
  margin: 25px; 
  grid-gap: 25px;
  grid-template-columns: auto 200px;
}
.grd .article {
  grid-column: 1;
  grid-row: 1;
}
.grd .signup {
  grid-column: 2;
  grid-row: 1;
}
@mixin smallgrd {
  .grd {
    margin: 0; 
    grid-gap: 10px;
    grid-template-columns: auto;
  }
  .grd .article {
    grid-column: 1;
    grid-row: 2;
  }
  .grd .signup {
    grid-column: 1;
    grid-row: 1; /* switch! */
  }
}
@media screen and (max-width: 700px) {
  @include smallgrd;
}
body.smallgrd {
  max-width: 700px;
  @include smallgrd;
}
.signup > div:first-child {
  margin-bottom: 10px; 
}
.withgrid {
  display: none; 
}
@supports(display: grid) {
  .withgrid {
    display: initial; 
  }
  .withoutgrid {
    display: none;
  }
}