cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="lt-ie10">
  <div class="col--container col--wrapper">
     <div class="col--12">
       <h1>Rowless grid system</h1>
     </div>
    <div class="col--4">
      <h2>one third</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias itaque, qui molestiae minus, nostrum sapiente fugit incidunt ea optio facere officia cupiditate dignissimos doloremque explicabo vitae. Quisquam repudiandae, aut! Labore?</p>
    </div>
    <div class="col--4">
      <h2>one third</h2>
      <p>Reiciendis a doloremque error, id quo atque. Pariatur illum voluptatum, neque odio, nobis dicta non sit, eaque necessitatibus dignissimos voluptates facilis tempora qui aliquam autem tenetur tempore doloribus. Obcaecati, nulla.</p>
    </div>
    <div class="col--4">
      <h2>one third</h2>
      <p>Earum facilis ut, voluptate voluptatibus minima quis, assumenda dolorem perspiciatis molestiae explicabo nisi, vel repellat voluptatem, praesentium itaque odio excepturi dolorum delectus omnis velit iste quasi natus dolore corporis! Voluptatibus.</p>
    </div>
    <div class="col--3">
      <h3>one quarter</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet inventore odio eius, tempora, maiores distinctio similique. Expedita dolor molestias at culpa optio, hic assumenda vel qui accusantium unde. Dicta, sit.</p>
    </div>
    <div class="col--9">
      <h3>three quarters</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequuntur eos sint aliquam, cumque laboriosam sed molestias blanditiis obcaecati nemo excepturi eveniet, explicabo quasi eaque temporibus totam, animi expedita minus?</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat hic modi, excepturi aliquid in. Natus iure iste voluptate ipsum nemo voluptatum obcaecati tempore enim nam, provident, necessitatibus quod perspiciatis. Autem!</p>
    </div>

    <div class="col--2"><h4>small</h4><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, totam ipsa veritatis soluta, blanditiis veniam sed doloremque minima dolor ratione incidunt laboriosam, atque repudiandae sequi exercitationem similique distinctio voluptate dolorum.</small></div>

    <div class="col--fill">
      <h4>Fill the gap</h4>
      <p>Use this carefully. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non perspiciatis, aspernatur sapiente iste cum rem amet deleniti, culpa dolore, eum quas libero tempora asperiores sed expedita mollitia porro quaerat laborum.</p>
      <p>Suscipit obcaecati aliquam labore explicabo eum necessitatibus nemo adipisci fugit architecto ducimus natus perferendis consectetur quasi ad recusandae similique dicta maiores doloribus, soluta vero laudantium dolorum. Voluptate delectus dolores nihil!</p>
      <p>Expedita sint rerum est, aspernatur eligendi. Distinctio recusandae sunt doloremque illum voluptatem exercitationem tenetur quasi nisi! Quidem omnis, tenetur, soluta iste ratione similique incidunt earum nisi quos. Hic, reiciendis inventore.</p>
    </div>    

    <div class="col--2"><h4>small</h4><small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, totam ipsa veritatis soluta, blanditiis veniam sed doloremque minima dolor ratione incidunt laboriosam, atque repudiandae sequi exercitationem similique distinctio voluptate dolorum.</small></div>
    


  </div>
</div>


<div class="col--container col--wrapper">
    <div class="col--3">
      <h5>headline</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique totam ullam nostrum, cupiditate a, itaque minima rem earum molestiae soluta adipisci enim blanditiis illo perferendis sint, delectus tempore voluptates assumenda!</p>
      </h5>
    </div>
    <div class="col--3">
      <h5>headline</h5>
        <p>Ea voluptates quidem odio voluptatum temporibus quibusdam blanditiis dolorem illo veniam doloremque amet perferendis culpa, similique eos. Illo, obcaecati. Odit libero quaerat animi dolores, at praesentium, quasi adipisci. Temporibus, esse?</p>
      </h5>
    </div>
    <div class="col--3">
      <h5>headline</h5>
        <p>Voluptates doloremque eligendi laudantium ducimus sint rerum inventore, iusto aspernatur temporibus culpa quae error ea, eum qui! Cupiditate rerum quae distinctio eveniet dolore asperiores cum officia, rem quos, explicabo? Molestiae!</p>
      </h5>
    </div>
    <div class="col--3">
      <h5>headline</h5>
        <p>Vero eum voluptatibus ipsum incidunt, provident doloribus labore quam tenetur nobis? Obcaecati eos, quia error odio aut ea dicta molestiae totam sed dignissimos. Ipsum officiis in voluptates consequuntur, consequatur quae!</p>
      </h5>
    </div>
    <div class="col--3 col__off3">
      <h5>offset</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias in repellendus, fuga ipsum? Nam expedita officiis veniam obcaecati voluptatibus in reiciendis quos at voluptate unde nobis, suscipit eveniet commodi eaque.</p>
    </div>  
    <div class="col--3 col__off3">
      <h5>offset</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias in repellendus, fuga ipsum? Nam expedita officiis veniam obcaecati voluptatibus in reiciendis quos at voluptate unde nobis, suscipit eveniet commodi eaque.</p>
    </div>  
   <div class="col--3 col__off9">
      <h5>offset</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias in repellendus, fuga ipsum? Nam expedita officiis veniam obcaecati voluptatibus in reiciendis quos at voluptate unde nobis, suscipit eveniet commodi eaque.</p>
    </div>  
</div>
            
          
!
            
              * {
  box-sizing: border-box;
}

html {
  font-size: 14px;
  line-height: 1.4;
}

$gutter: 20px;

.col {
  &--wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  &--container {
    max-width: 1140px;
    margin: auto;
    padding: 0 10px;
    @media (min-width: 960px) {
      padding: 0 40px;
    }
  }
  &--fill {
    flex: 1;
    @extend %col--base;
  }
  // following is just for convenience:
  //&--half { @extend .col--6 }
  //&--third { @extend .col--4 }
  //&--quarter, &--forth { @extend .col--3 }
  //&--twothird, &--twothirds, &--two-third, &--two-thirds { @extend .col--8 }
  //&--threequarter, &--threequarters, &--three-quarter, &--three-quarters { @extend .col--9 }
  //&--full { @extend .col--12 }
}


%col--base {
  margin: 0 $gutter $gutter;
  /* outline: 1px solid red; */
}
@for $i from 1 through 12 {
  .col--#{$i} {
    @extend %col--base;
  }
}


@media (min-width: 768px) {
  @for $i from 1 through 12 {
    .col--#{$i} {
      flex: 0 0 calc(#{100% * $i / 12} - #{$gutter * 2});
    }
  }

  // me know math not gud
  @for $i from 1 through 12 {
    .col__off#{$i} {
      margin-left: calc(#{100% * $i / 12} + #{$gutter});
    }
  }
}

            
          
!
            
              // todo:
// - write fallback when flexbox isn't available (.lt-ie10); use inline-block?
// - x-sm, sm, md, lg variants; use sass lists?
// - push, pull, offset classes?
            
          
!
999px
Loading ..................

Console