<div class="container">
<div class="header">
<p class="logo"><a href="#"><i class="fa fa-file-code-o" aria-hidden="true"></i></a></p>
<nav>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<button>Login</button>
</div>
<div class="hero"></div>
<aside class="sidebar">
<h3>Recent Posts</h3>
<ul>
<li><a href="#">Post One</a></li>
<li><a href="#">Post Two</a></li>
<li><a href="#">Post Three</a></li>
<li><a href="#">Post Four</a></li>
<li><a href="#">Post Five</a></li>
</ul>
</aside>
<div class="main">
<!-- <img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/06/combined-layout-header.jpg"> -->
<h2>Flexbox and CSS Grid Layout</h2>
<p>It's okay to combine CSS Grid Layout and Flexbox.</p>
<p>Is the content in a straight line or column (cards, navigation items, or other content blocks)? For occasions that require elements to line up in one direction, meaning it is more “one-dimensional”, typically Flexbox is the better option. Also, Flexbox is good at dynamically scaling elements. Maybe you’ve tried this in a row of boxes, by adding display:flex; on a parent element and flex properties on the child elements, there’s a nice line formed and this is an efficient way to make sure they are all the same height. </p>
<p>**If things do not look right, make sure your browser is in "Experimental Mode".
</p>
</div>
<div class="extra">
<div class="content-block-info">
<h3>View Grid Help</h3>
<p>See tips and tricks for CSS Grid Layouts...</p>
<button>Read</button>
</div>
<div class="content-block-info">
<h3>View Flexbox Help</h3>
<p>See tips and tricks for Flexbox layouts...</p>
<button>Read</button>
</div>
<div class="content-block-info">
<h3>View Combined Help</h3>
<p>See tips and tricks for combined layouts...</p>
<button>Read</button>
</div>
</div><!-- /extra -->
<div class="related-images">
<div class="icon"><img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/06/grid-image-06.jpg"></div>
<div class="icon"><img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/06/grid-image-05.jpg"></div>
<div class="icon"><img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/06/grid-image-04.jpg"></div>
<div class="icon"><img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/06/grid-image-03.jpg"></div>
<div class="icon"><img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/06/grid-image-02.jpg"></div>
<div class="icon"><img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/06/grid-image-01.jpg"></div>
</div>
<div class="related-posts">
<h4>Related Posts</h4>
<ul>
<li><a href="#">Post One</a></li>
<li><a href="#">Post Two</a></li>
<li><a href="#">Post Three</a></li>
</ul>
</div>
<footer>
<h3>CSS Grid and Flexbox Layout Example</h3>
<p>Hope you enjoyed learning about combined layouts!</p></footer>
</div>
@import url('//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
color: inherit;
text-decoration: none;
}
body {
background-color: #eee;
color: #434344;
font-family: "Montserrat", sans-serif;
font-weight: 400;
}
p {
font-size: 1.5rem;
}
.container {
max-width: 1250px;
margin: 0 auto;
padding: 0 60px;
display: grid;
grid-template-columns: 0.4fr 0.3fr 0.3fr;
grid-column-gap: 10px;
grid-row-gap: 15px;
background-color: #fff;
}
.grid {
}
.header {
grid-column: 1 / 4;
grid-row: 1 / 2;
color: #9f9c9c;
text-transform: uppercase;
border-bottom: 2px solid #b0e0ea;
padding: 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.header nav {
}
.header nav ul {
display: flex;
/* align-items: baseline; */
list-style-type: none;
}
.header nav li {
margin-right: 15px;
}
.header button {
border: none;
padding: 8px 25px;
color: #fff;
font-weight: 600;
cursor: pointer;
border-radius: 1.25rem;
background-color: #51bb7b;
}
.logo {
font-size: 2rem;
margin-right: 1.5rem;
color: #50c6db;
}
.hero {
grid-column: 1 / 2;
grid-row-start: 2 / 3;
background-color: #d5c9e2;
min-height: 300px;
background-image: url("http://abbeyjfitzgerald.com/wp-content/uploads/2017/06/combined-layout-hero-1.jpg");
}
.hero-unit img {
width: 100%;
height: auto;
}
.sidebar {
grid-column: 1 / 2;
grid-row: 3 / 5;
padding: 20px;
border-top: 3px solid #693f7e;
background-color: #f9f9f9;
}
.sidebar h3 {
margin-top: .75rem;
}
.sidebar ul {
list-style-type: none;
margin-top: 1rem;
font-size: .75rem;
}
.sidebar ul > li {
padding: .25rem 0;
}
.sidebar img {
max-width: 100%;
}
.main {
grid-column: 2 / 4;
grid-row: 2 / 4;
/* min-height: 500px; */
}
.main h2 {
font-size: 32px;
margin-bottom: 1rem;
color: #50c6db;
}
.main p {
font-size: 1rem;
margin-bottom: .75rem;
}
.main img {
width: 100%;
}
.extra {
grid-column: 2 / 4;
grid-row: 4 / 5;
padding: 1rem;
display: flex;
flex-wrap: wrap;
border: 1px solid #ececec;
justify-content: space-between;
}
.extra h3 {
font-weight: 500;
margin-bottom: .5rem;
flex: 1 0 auto;
}
.extra p {
font-size: .75rem;
margin-bottom: .75rem;
}
.extra button {
background-color: white;
border: 2px solid #50c6db;
color: #50c6db;
padding: .5rem;
}
.content-block-info {
flex: 0 1 calc(33% - .5rem);
}
.related-images {
grid-column: 1 / 3;
grid-row: 5 / 6;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-gap: 1rem;
}
.related-images .icon {
background-color: white;
flex: 1 1 150px;
}
.related-images .icon img {
max-width: 100%;
}
.related-posts {
grid-column: 3 / 4;
grid-row: 5 / 6;
padding: 0 2rem;
}
.related-posts h4 {
margin-bottom: .5rem;
padding-bottom: .5rem;
font-size: 1.5rem;
border-bottom: 1px solid #ececec;
}
.related-posts ul {
margin-left: 1.5rem;
}
footer {
grid-column: 1 / 4;
grid-row: 6 / 7;
color: #fff;
text-align: center;
padding: 20px 0;
background-color: #9f9c9c;
}
footer p {
color: #434344;
font-size: 12px;
padding: 10px;
}
Also see: Tab Triggers