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

              
                <h1 class="page-title">Float, Flexbox and CSS Grid Layout by using CSS Feature Queries</h1>
<main class="grid">
	<article>
		<img class="preview-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/150150/oprah.jpg">
		<h1 class="entry-title">Grid works in Safari Technical Preview, WebKit Nightly and Firefox Nightly out of the box.</h1>
		<p class="entry-preview">
			<!-- CSS Grid Layout browser support text -->
				[[[https://codepen.io/stacy/pen/f1639a51a21481925379ac4580c6fe2e]]]
		</p>
	</article>
	<article>
		<img class="preview-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/150150/oprah.jpg">
		<h1 class="entry-title">I am a post title, you won't believe what happens next!</h1>
		<p class="entry-preview">This is a short entry preview text to entice you to click on my post and read &hellip; <a href="#">Read more</a></p>
	</article>
	<article>
		<img class="preview-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/150150/oprah.jpg">
		<h1 class="entry-title">I am a post title, you won't believe what happens next!</h1>
		<p class="entry-preview">This is a short entry preview text to entice you to click on my post and read &hellip; <a href="#">Read more</a></p>
	</article>
	<article>
		<img class="preview-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/150150/oprah.jpg">
		<h1 class="entry-title">I am a post title, you won't believe what happens next!</h1>
		<p class="entry-preview">This is a short entry preview text to entice you to click on my post and read &hellip; <a href="#">Read more</a></p>
	</article>
	<article>
		<img class="preview-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/150150/oprah.jpg">
		<h1 class="entry-title">I am a post title, you won't believe what happens next!</h1>
		<p class="entry-preview">This is a short entry preview text to entice you to click on my post and read &hellip; <a href="#">Read more</a></p>
	</article>
	<article>
		<img class="preview-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/150150/oprah.jpg">
		<h1 class="entry-title">I am a post title, you won't believe what happens next!</h1>
		<p class="entry-preview">This is a short entry preview text to entice you to click on my post and read &hellip; <a href="#">Read more</a></p>
	</article>
	<article>
		<img class="preview-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/150150/oprah.jpg">
		<h1 class="entry-title">I am a post title, you won't believe what happens next!</h1>
		<p class="entry-preview">This is a short entry preview text to entice you to click on my post and read &hellip; <a href="#">Read more</a></p>
	</article>
	<article>
		<img class="preview-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/150150/oprah.jpg">
		<h1 class="entry-title">I am a post title, you won't believe what happens next!</h1>
		<p class="entry-preview">This is a short entry preview text to entice you to click on my post and read &hellip; <a href="#">Read more</a></p>
	</article>
	<article>
		<img class="preview-image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/150150/oprah.jpg">
		<h1 class="entry-title">I am a post title, you won't believe what happens next!</h1>
		<p class="entry-preview">This is a short entry preview text to entice you to click on my post and read &hellip; <a href="#">Read more</a></p>
	</article>
</main>

[[[https://codepen.io/stacy/pen/NbvaNY]]]
              
            
!

CSS

              
                // Media Queries: https://codepen.io/stacy/pen/mOrrQg

// Grid Demo Important CSS Stuff
.grid {
	padding: 0 2rem; 
	
	// If your browser supports flexbox, do this
	@supports ( display: flex ) {
		display: flex;
		flex-wrap: wrap;
		padding: 1rem;
		
		@include bp( small ) {
			justify-content: space-between;
		}
	}
	
	// If your browser supports grid, do this. Doesn't have to be in this feature query, but will be easier to delete the other stuff one day when your project doesn't require fallbacks.
	@supports ( display: grid ) {
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: auto;
		
		// Make only 2 columns using the new fraction unit and include a gap (gutter)
		@include bp( small ) {
			grid-template-columns: 1fr 1fr;
			grid-gap: 1fr;
		}	

		// When above our large breakpoint, make sure we have 3 columns
		@include bp( large ) {
			grid-template-columns: 1fr 2fr 1fr;
		}	
	}	
}

article {
	background: #fff;
	margin: 1rem 0;
	padding: 1rem;
	
	// Let's start with a float fallback
	// Not needed for the most part unless
	// you still support IE9 and lower
	@include bp( small ) {
		float: left;
		margin: 1rem;	
		max-width: 41%;
			
		&:nth-child(2n+1) {
			clear: left;
		}

		@supports ( display: grid ) {
			max-width: none;
		}
	}
		
	@include bp( large ) {
		max-width: 20%;

		@supports ( display: grid ) {
			max-width: none;
		}
		
		&:nth-child(2n+1) {
			clear: none;
		}

		&:nth-child(3n+2) {
			max-width: 45%;
			
			@supports ( display: grid ) {
				max-width: none;
			}
		}

		&:nth-child(3n+1) {
			clear: left;
		}
	}

	// If your browser supports flexbox, do this
	@supports ( display: flex ) {
		flex-basis: 100%;
		
		// Display 2 columns at this medium breakpoint
		@include bp( small ) {
			flex: 0 1 40%;
		}
		
		// Display 3 columns at this large breakpoint
		@include bp( large ) {
			flex: 0 1 calc(100% * 0.25 - 1rem);
		
			&:nth-child(3n+2) {
				flex: 1 0 calc(100% * 0.25 - 1rem);
			}
		}
	}
}


// For fun styles

@import 'https://fonts.googleapis.com/css?family=Dosis:400,700|Slabo+27px';

body {
	background: #e3e3e3;
	font-family: 'Dosis', serif;
}

.page-title {
	color: #556270;
	font-family: 'Slabo 27px', serif;
	font-size: 1.5rem;
	margin-bottom: 0;
	padding: .5rem 0 0;
	text-align: center;
}

p {
	line-height: 1.4;
}

.intro {
	font-size: 1rem;
	text-align: center;
}

.entry-title {
	color: #4b4b4b;
	font-family: 'Slabo 27px', serif;
	font-size: 1.75rem;
	
	article:nth-of-type(3n+2) & {
		@include bp( large ) {
			font-size: 2.5rem;
		}
	}
}

a {
	color: #C44D58;
	font-family: 'Dosis', serif;
	font-weight: 700;
}

img {
	height: auto;
	width: 100%;

	-webkit-filter: saturate(0);
  	filter: saturate(0);
}

              
            
!

JS

              
                
              
            
!
999px

Console