2 columns, header and footer
This example uses line-based positioning, to position the header and footer, stretching them across the grid.
revision:
This example uses line-based positioning, to position the header and footer, stretching them across the grid.
code:
<div class="wrapper">
<header class="header">My header</header>
<aside class="sidebar">Sidebar</aside>
<article class="content">
<h1>2 columns, header and footer</h1>
<p>This example uses line-based positioning, to position the header and footer, stretching them across the grid.</p>
</article>
<footer class="footer">My footer</footer>
</div>
<style>
.wrapper { margin: 40px; font-family: 'Open Sans', 'sans-serif'; background-color: skyblue; color: #444; }
.wrapper article h1, .wrapper article p { margin: 0 0 1em 0;}
.sidebar { float: left; width: 49.1489%; }
.content {float: right; width: 79.7872%;}
.wrapper { max-width: 1800px; margin: 0 auto; display: grid; grid-template-columns: 1fr 3fr; grid-gap: 10px; }
.wrapper > * {background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%; /* needed for the floated layout*/ margin-bottom: 10px;}
.header, .footer { grid-column: 1 / -1; /* needed for the floated layout */ clear: both; }
</style>
This example uses line-based positioning, to position the header and footer, stretching them across the grid.
code:
<div class="wrapper1">
<header class="header1">My header</header>
<aside class="sidebar1">Sidebar</aside>
<article class="content1">
<h1>2 columns, header and footer</h1>
<p>This example uses line-based positioning, to position the header and footer, stretching them across the grid.</p>
</article>
<footer class="footer1">My footer</footer>
</div>
<style>
.wrapper1 { margin: 40px; font-family: 'Open Sans', 'sans-serif'; background-color: skyblue; color: #444; }
.wrapper1 content1 h1, .wrapper1 content1 p { margin: 0 0 1em 0;}
@media screen and (min-width: 500px) {
.sidebar1 {float: left; width: 19.1489%;}
.content1 {float: right; width: 79.7872%; }
.wrapper1 { margin: 0 auto;grid-template-columns: 1fr 3fr;}
.header1, .footer1 {grid-column: 1 / -1; /* needed for the floated layout */ clear: both;}
}
.wrapper1 > * {background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%; /* needed for the floated layout*/ margin-bottom: 10px;}
/* We need to set the widths used on floated items back to auto, and remove the bottom margin as when we have grid we have gaps. */
/* @supports (display: grid) {
.wrapper1 > * { width: auto; margin: 0; }
} */
</style>
This example uses line-based positioning, to position the header and footer, stretching them across the grid.
By making the content span a number of rows, we can then space the blocks out next to that content. Each in their own row.
code:
<div class="wrapper2">
<header class="header2">My header</header>
<article class="content2">
<h1>Using negative space</h1>
<p>This example uses line-based positioning, to position the header and footer, stretching them across the grid.</p>
<p>By making the content span a number of rows, we can then space the blocks out next to that content. Each in their own row.</p>
</article>
<div class="block-a">Block A</div>
<div class="block-b">Block B</div>
<div class="block-c">Block C</div>
<footer class="footer2">My footer</footer>
</div>
<style>
.wrapper2 {margin: 40px; font-family: 'Open Sans', 'sans-serif'; background-color: skyblue; color: #444;}
.wrapper2 h1, wrapper2 p {margin: 0 0 1em 0;}
.wrapper2 { max-width: 1800px; margin: 0 20px; display: grid; grid-gap: 10px;}
@media screen and (min-width: 600px) {
.block-a, .block-b, .block-c {float: left; width: 39.1489%;}
.content { float: right; width: 79.7872%;}
.wrapper2 {margin: 0 auto; grid-template-columns: 1fr 3fr; grid-auto-rows: minmax(150px, auto);}
.header2, .footer2 {grid-column: 1 / -1; /* needed for the floated layout */ clear: both;}
.block-a {grid-column: 1; grid-row: 2;}
.block-b {grid-column: 1; grid-row: 4;}
.block-c {grid-column: 1;grid-row: 6;}
.content2 {grid-column: 2; grid-row: 2 / 7;}
}
.wrapper2 > * {background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%; /* needed for the floated layout*/ margin-bottom: 10px; }
/* We need to set the widths used on floated items back to auto, and remove the bottom margin as when we have grid we have gaps. */
@supports (display: grid) {
.wrapper2 > * { width: auto; margin: 0; }
}
</style>
code:
<div class="wrapper3">
<header class="header3">My header</header>
<div class="panel">Panel A</div>
<div class="panel">Panel B</div>
<div class="panel">Panel C</div>
<div class="panel">Panel D</div>
<div class="panel">Panel E</div>
<div class="panel">Panel F</div>
<div class="panel">Panel G</div>
<div class="panel">Panel H</div>
<div class="panel">Panel I</div>
<div class="panel">Panel J</div>
<footer class="footer3">My footer</footer>
</div>
<style>
.wrapper3{margin: 40px; font-family: 'Open Sans', 'sans-serif'; background-color: skyblue; color: #444; }
.wrapper3 {max-width: 1800px; margin: 0 20px; display: grid; grid-gap: 10px;}
.wrapper3 {display: flex; flex-wrap: wrap; }
.wrapper3 { display: grid; margin: 0 auto; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: minmax(200px, auto);}
.panel {/* needed for the flex layout*/ margin-left: 5px; margin-right: 5px; flex: 1 1 200px; }
.header3, .footer3 { margin-left: 5px; margin-right: 5px; flex: 0 1 100%; grid-column: 1 / -1; }
.wrapper3 > * { background-color: #444; color: #fff; border-radius: 5px; padding: 20px; font-size: 150%; margin-bottom: 10px;}
/* We need to set the margin used on flex items to 0 as we have gaps in grid. */
@supports (display: grid) {
.wrapper3 > * { margin: 0; }
}
</style>