Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>
              
            
!

CSS

              
                // 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);
}
              
            
!

JS

              
                
              
            
!
999px

Console