Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <p>The SASS functions on this page are changing the size of these elements based on how many are in the container. Change <strong>$rows</strong> at the top of the CSS section to see how they change. Currently only support up to seven columns of content because I can't figure out how to write an @for loop with @else ifs in it. View the full <a href="https://blog.2wav.com/directed-responsive-flex-layouts/">explanation on our blog</a>!</p>
<div class="small demo container">
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
	</div>
<div class="small demo container ">

  <article>
			    <p>Lorem ipsum.</p>
		  </article>
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
	</div>
<div class="small demo container ">
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
	</div>
<div class="small demo container ">
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
	</div>
<div class="small demo container ">
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
	</div>
<div class="small demo container ">
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
	</div>
<div class="small demo container ">
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
	</div>
<div class="small demo container ">
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
	</div>
<div class="small demo container ">
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
	</div>
<div class="small demo container ">
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
		  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>		  
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
  <article>
			    <p>Lorem ipsum.</p>
		  </article>
	</div>
            
          
!
            
              // Uses the amazing Quantity Queries SASS mixin from https://github.com/danielguillan/quantity-queries (linked in the settings)

// Change me to see the results!
$rows: 3;

article {
  background-color: blue;
  color: white;
  outline: solid rgba(0, 0, 0, .5) 1px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  p {
    margin: 0;
    text-align: center;
      }
  @for $i from 1 to 20 {
    &:nth-child(#{$i}) {
      background-color: transparentize(blue, 1 - (1 / $i));
    }
  }
}

.demo {
  width: 700px;
  height: 400px;
  display: flex;
	flex-wrap: wrap;
	overflow: auto;
	margin: 0;
	padding: 0;
  &.small {
    width: 200px;
    height: 200px;
    margin: .1rem;
    float: left;
    &:after {
      content: "";
      clear: both;
      display: block;
    }
  }
}

// Here Be Mixins
// At the very bottom, we have the rule that's splitting these cells
// Return percentage of 1/n
@function _oneOver($i) {
  @return percentage(1 / $i);
}

// Make unequal row numbers fill in a reasonable manner
// Feed it the number of rows to split, the number of articles you have, and the row multiplier (i.e. number of columns)
@mixin rowFill($row_split, $article_count, $multiplier) {
  // The size that we need the smaller elements to be
  $percentage: _oneOver($multiplier);
  // We need this later and Ruby SASS grumps at us if we don't have it
  $base_basis: 100%;
  // The number of items we have in excess of the row count (i.e. of one per row) 
  $dif: ($article_count - $row_split);
  // The remainder of article count / row count
  $mod: ($article_count % $row_split);
  // This next section fixes the issue of having articles that are a multiple of the row count
  // We get the mod here to find out if we have a multiple of the row count
  // (If dif is smaller than row split, we still get !0)
  @if $dif % $row_split==0 {
    // If so, we need all of the articles to be small
    $base_basis: _oneOver($multiplier);
    //content: "dif = split; basis #{$base_basis}, mod #{$mod}, dif #{$dif}, split #{$row_split}";
  }
  @else {
    // If not, then we want the articles to have a base size larger
    $base_basis: _oneOver($multiplier - 1);
    //content: "dif != split; basis #{$base_basis}, mod #{$mod}, dif #{$dif}, split #{$row_split}";
  }
  flex-basis: $base_basis;
  // Now we find out if we should be resizing a selective number of cells, i.e. if there's a remainder
  @if $mod > 0 {
    // If so, iterate over every two children for each integer of the remainder times the number of columns we expect
    @for $i from 1 through $mod * $multiplier {
      &:nth-child(#{$i}) {
        //content: "mod #{$mod}, i #{$i}, dif #{$dif}, split #{$row_split}";
        flex-basis: $percentage;
      }
    }
  }
}

@mixin rowSplit($row_split, $max_children, $element:"& > *") {
  @for $article_count from 1 through $max-children {
    #{$element} {
      // Now we start using quantity queries, creating a class for each number of children
      @include exactly($article_count) {
        // Now we check on how the number of articles compares to the number of rows
        // If we have fewer or equal to the number of rows
        @if $article_count <=($row_split * 1) {
          // We get the percentage of the row ratio
          $percentage: _oneOver(1);
          // And assign it as the flex-basis
          flex-basis: $percentage;
        }
        // If we have between one and two times the number of rows
        @else if $article_count <=($row_split * 2) {
          @include rowFill($row_split, $article_count, 2);
        }
        // Etc.
        @else if $article_count <=($row_split * 3) {
          @include rowFill($row_split, $article_count, 3);
        }
        @else if $article_count <=($row_split * 4) {
          @include rowFill($row_split, $article_count, 4);
        }
        @else if $article_count <=($row_split * 5) {
          @include rowFill($row_split, $article_count, 5);
        }
        @else if $article_count <=($row_split * 6) {
          @include rowFill($row_split, $article_count, 6);
        }
        // If you need more than 7 loops, add below here.
        @else if $article_count <=($row_split * 7) {
          @include rowFill($row_split, $article_count, 7);
        }
      }
    }
  }
}

.demo {
  @include rowSplit($rows, 12);
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console