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

Quick-add: + add another resource

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.

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="site">
    <a class="skip-link screen-reader-text" href="#content">Skip to content</a>

    <header class="masthead">
        <h2 class="site-title">Standard two-column layout</h2>
    </header><!-- .masthead -->

    <main id="content" class="main-content">
        <h2>Main content area</h2>
        <p>The main content area is where the magic happens. Right now, the main content is on the left and the sidebar is on the right. If you go into the markup for this document and add <code>dir="rtl"</code> to the <code>html</code> element, the two elements will swap spaces because CSS Grid honors text direction.</p>
    </main>

    <aside class="sidebar">
        <h3>The Sidebar</h3>
        <p>The sidebar typically contains things like:</p>
        <ul>
            <li>Links</li>
            <li>Menus</li>
            <li>Ads</li>
        </ul>
    </aside>

    <aside class="twin">
        This should take up half the space
    </aside>
    <aside class="twin">
        This should take up the other half of the space
    </aside>

    <footer class="colophon grid">
        <aside>Content, layout, design: <a href="https://twitter.com/mor10" target="_blank" rel="nofollow">Morten Rand-Hendriksen</a>.</aside>
    </footer>

</div>
            
          
!
            
              /* NOTE:
 * Grid layout stuff starts at line 138. 
 * The stuff before is just boring old CSS to make content look not crappy.
 */

/*--------------------------------------------------------------
CSS Reset
--------------------------------------------------------------*/
html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
}

body {
	margin: 0;
}

img {
	display: block;
	border: 0;
	width: 100%;
	height: auto;
}


/*--------------------------------------------------------------
Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */
}


/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
	color: #404040;
	font-family: 'Helvetica', Arial, sans-serif;
	font-size: 18px;
	line-height: 1.5;
}

h1,
h2,
h3 {
	margin: 0;
	padding: 1em 0;
}

p {
	margin: 0;
	padding: 1em 0;
}

/*--------------------------------------------------------------
General styles
--------------------------------------------------------------*/
.site {
	background: #ededed;
	min-height: 100vh;
}

.masthead,
.main-content,
.sidebar,
.twin,
.footer {
	padding: 1em 2em;
}

.main-content {
	background: white;
}
.masthead {
	background: #2185C5;
	color: white;
}

.sidebar {
	background: #FF7F66;
}

.twin {
	background: #2185C5;
}

.twin:last-of-type {
	background: #7ECEFD;
}

.colophon {
	padding: 2em;
	background: #3E454C;
	color: white;
}

.colophon a {
	color: white;
}

.colophon a:hover,
.colophon a:focus {
	border-bottom: 1px solid white;
}

/*--------------------------------------------------------------
If no grid support, limit width to 50em and center align
--------------------------------------------------------------*/
@supports not (display: grid) {
	.site {
		max-width: 50em;
		margin: 0 auto;
	}
}

/*--------------------------------------------------------------
CSS Grid layout for wider screens, when browser supports grid:
--------------------------------------------------------------*/

@media screen and (min-width: 600px) {
	@supports (display: grid) {

		.site {
			display: grid;
			grid-template-columns: 1fr repeat(6, minmax(auto, 10em)) 1fr;
			grid-template-rows: minmax(1em, auto) 1fr auto minmax(1em, auto);
		}

		.masthead,
		.colophon {
			grid-column: span 8;
		}

		.main-content {
			grid-column: 2/6;
		}

		.sidebar {
			grid-column: 6/8;
		}

		.twin {
			grid-column: 2/5;
			grid-row: 3/4;
		}

		.twin:last-of-type {
			grid-column: 5/8;
		}

	}
}

            
          
!
999px
Loading ..................

Console