A Pen by Guillaume

Thumbnail
This awesome code was written by guillaumebreux, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright guillaumebreux ©
  • HTML
  • CSS
  • JavaScript
    <h1>Css grid that gracefully fallback for 100% browser coverage (IE8)</h1>
<div class="grid">
  <div class="col-m-offset-2 col-m-8">
    <p>Cell with a size of 8/12 and an offset of 2/12 on desktop and full width on mobile</p>
  </div>
</div>
<div class="grid">
  <div class="col-2">
    <p>Cell with a size of 2/12</p>
  </div>
  <div class="col-10">
    <p>Cell of a size of 10/12</p>
  </div>
</div>
<div class="grid grid--align-items-center">
  <div class="col-m-10">
    <p>Cell of a size of 10/12</p>
  </div>
  <div class="col-m-2">
    <p>Cell of a size of 2/12. lorem ipsum</p>
  </div>
</div>
<div class="grid">
  <div class="col-4 col-m-5">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum illo atque facilis magni eius tenetur inventore fuga recusandae sed minus, nam eos placeat explicabo, ipsum repellat architecto nobis libero. Esse.</p>
  </div>
  <div class="col-5">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum illo atque facilis magni eius tenetur inventore fuga recusandae sed minus, nam eos placeat explicabo, ipsum repellat architecto nobis libero. Esse.</p>
  </div>
  <div class="col-3 col-m-2">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum illo atque facilis magni eius tenetur inventore fuga recusandae sed minus, nam eos placeat explicabo, ipsum repellat architecto nobis libero. Esse.</p>
  </div>
  
  <div class="col-4 col-m-5">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum illo atque facilis magni eius tenetur inventore fuga recusandae sed minus, nam eos placeat explicabo, ipsum repellat architecto nobis libero. Esse.</p>
  </div>
  <div class="col-4 col-m-5">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum illo atque facilis magni eius tenetur inventore fuga recusandae sed minus, nam eos placeat explicabo, ipsum repellat architecto nobis libero. Esse.</p>
  </div>
  <div class="col-4 col-m-2">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum illo atque facilis magni eius tenetur inventore fuga recusandae sed minus, nam eos placeat explicabo, ipsum repellat architecto nobis libero. Esse.</p>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/guillaumebreux/a-pen-by-guillaume-OvPZaW */
    $breakpoints: (
  xs: '577px',
  s: '769px',
  m: '993px',
  l: '1201px',
  xl: '1601px'
);

@mixin col($name: '') {
  @for $i from 1 to 13 {
    .col#{$name}-#{$i} { width: (100% / 12 * $i); }
    .col#{$name}-offset-#{$i} {
      margin-left: (100% / 12 * $i);
    }
  }
}

* {
  box-sizing: border-box;
  padding: 0; margin: 0;
}
.grid > * { width: 100%; }
@include col();
@each $bp, $width in $breakpoints {
  @media screen and (min-width: #{$width}) {
    @include col('-#{$bp}');
  }
}

.grid {
  $gutter: 15px;
  display: flex; flex-wrap: wrap;
  margin-left: -$gutter; margin-top: -$gutter; padding-left: 3%; padding-right: 3%; overflow: auto;
  > * {
    float: left;
    padding-left: $gutter; margin-top: $gutter;
    > * { height: 100%; }
  }
  &--align-items-center { align-items: center; }
  @media screen and (min-width: 769px) {
    $gutter: 20px;
    margin-left: -$gutter; margin-top: -$gutter; padding-left: 5%; padding-right: 5%;
    > * { padding-left: $gutter; margin-top: $gutter; }
  }
  + .grid { margin-top: 0; }
}


// only for this pen
body {
  background-color: rebeccapurple;
}
h1 { 
  padding: 40px 0; margin: 0; 
  text-align: center; color: white;
}
p {
  background-color: chartreuse;
  padding: 15px; font-family: helvetica, arial, sans-serif;
}


/*Downloaded from https://www.codeseek.co/guillaumebreux/a-pen-by-guillaume-OvPZaW */
    

Comments