Flexbox Equal Height Columns

HTML
<main role="main"> <ul class="flexgrid columns-news"> <li> <a href="https://dribbble.com/jlantunez/projects/338916-Protus"> <span class="grid-number">1</span> <figure> <img src="https://source.unsplash.com/tCICLJ5ktBE/800x600" alt="Photo of objects"> <figcaption> <p> Category or Date </p> <h2> Best Inventions of the 21st Century </h2> </figcaption> </figure> </a> </li> <li> <span class="grid-number">2</span> <span class="ribbon icon"><a href="/fav" title="Favorite - svg icon, no emoji">✩</a></span> <a href="https://dribbble.com/jlantunez/projects/338916-Protus"> <figure> <img src="https://source.unsplash.com/mZS7cne5iY0/800x600" alt="Photo of Brooklyn Park"> <figcaption> <p>Category or Date</p> <h2>How to Find Nature in the City</h2> </figcaption> </figure> </a> </li> <li> <span class="ribbon"><a href="/rate" title="Rate">7.2</a></span> <a href="https://dribbble.com/jlantunez/projects/338916-Protus"> <figure> <img src="https://source.unsplash.com/nRAhNSGCpB4/800x600" alt="Photo of a couple"> <figcaption> <p> Category or Date </p> <h2> 10 Things Happy People Do Differently </h2> </figcaption> </figure> </a> </li> <li> <span class="ribbon"> <a title="Category" href="/category">Category</a> </span> <a href="https://dribbble.com/jlantunez/projects/338916-Protus"> <figure> <img src="https://source.unsplash.com/tUh95ZFdZN4/800x600" alt="Photos of Food"> <figcaption> <p> Date </p> <h2> Classic Spanish Food and Recipes </h2> </figcaption> </figure> </a> </li> <li> <a href="https://dribbble.com/jlantunez/projects/338916-Protus"> <span class="grid-number">5</span> <figure> <img src="https://source.unsplash.com/Aa8_X_YgrO4/800x600" alt="Photo of Flat Iron Building"> <figcaption> <p> Category or Date </p> <h2> 12 world famous buildings to inspire you </h2> </figcaption> </figure> </a> </li> <li> <a href="https://dribbble.com/jlantunez/projects/338916-Protus"> <figure> <img src="https://source.unsplash.com/cMCqPMqeyNI/800x600" alt="Photo of Avenida Constitución (Seville)"> <figcaption> <p> Category or Date </p> <h2> Most Popular Street Photos on Instagram Right Now </h2> </figcaption> </figure> </a> </li> <li> <a href="https://dribbble.com/jlantunez/projects/338916-Protus"> <figure> <img src="https://source.unsplash.com/6UJ-a8983DI/800x600" alt="Photo of a smiling couple"> <figcaption> <p> Category or Date </p> <h2> Healthy Eating: Easy Tips for Planning a Healthy Diet </h2> </figcaption> </figure> </a> </li> <li> <span class="ribbon"> <a href="/rate" title="Rate">6.8</a> </span> <a href="https://dribbble.com/jlantunez/projects/338916-Protus"> <figure> <img src="https://source.unsplash.com/oU0LEbUxnQU/800x600" alt="Photo of glasses"> <figcaption> <p> Category or Date </p> <h2> The Most Iconic Designs of Everyday Objects </h2> </figcaption> </figure> </a> </li> </ul> <p> Flexbox equal height columns. <br> Photos: <a href="https://source.unsplash.com/">Unsplash</a>. </a> </p> </main>
CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic); html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html, body { font-family: "Open Sans","Roboto",helvetica, arial, sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-size: 62.5%; } body { background: #f4f5f6; color: #333; } a { text-decoration: none; color:#67c; } p, li, time { font-size: 1.6rem; line-height: 3.6rem; margin: 0 0 2.4rem; } h2 { font-size: 2.4rem; line-height: 3.6rem; font-weight: 400; margin: 2.4rem 0; } img { border: 0; height: auto; max-width: 100%; } img:hover { filter: alpha(opacity=9000); opacity: 0.90; filter: alpha(opacity=90); } figure { margin: 0; line-height: 0; } article, figure, footer, header, main { display: block; } /*--- Clearings ---*/ header:before, header:after, main:before, main:after { content: ""; display: table; } header:after, main:after { clear: both; } main { position: relative; width: 1200px; max-width: 90%; margin: 0 auto; } /*=== MAGIC (Auto adjust + Equal Height) === */ .flexgrid { margin: 0 auto; padding: 0; display: -webkit-flex; display: flex; flex-wrap: wrap; } .flexgrid li { position: relative; list-style: none; display: -webkit-flex; display: flex; margin: 0; flex: auto; width: 100%; /* <-- more control */ } .flexgrid li>a { position: relative; padding: 2.4rem; width: 100%; /*making paragraphs and linked block*/ -webkit-flex-direction: column; flex-direction: column; } @media (min-width:768px){ .flexgrid li {width: 33.333%; } } .flexgrid li h2,.flexgrid li h3{margin: 0;} /*=== News/Recommended === */ .flexgrid.columns-news li { margin-bottom: 4.8rem; } .flexgrid.columns-news li a { padding: 0; } .flexgrid.columns-news li figcaption { position: relative; z-index: 9999; } .flexgrid.columns-news li p{ margin: -3.6rem 0 0; padding: 0 1.2rem; font-size: .7em; text-transform: uppercase; } .flexgrid.columns-news li h2{ padding: 1.2rem; font-size: 1.6rem; line-height: 2.4rem; font-weight: 400; } .columns-news li:hover { transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -o-transform: translateY(-2px); -ms-transform: translateY(-2px); transform: translateY(-2px); } @media (min-width:568px){ .flexgrid.columns-news { margin: 0 -2%; } .flexgrid.columns-news li { margin-right:2%;margin-left: 2%; width: 46%; } } @media (min-width:1024px){ .flexgrid.columns-news li { width: 21%; } } /* --- Favorite/Save (heart, star...) --- */ .ribbon.icon{font-size:2.4rem; } /* --- Number: most popular --- */ .grid-number { position: absolute; top: 1.2rem; left: 1.2rem; line-height: 1; font-weight: 600; z-index: 9999; padding: .6rem 1.2rem; border-radius: 50%; } /* Ribbon --- */ .ribbon { position: absolute; top: 0; right: -1.3rem; padding: .6rem 1.2rem; font-size: 1.4rem; line-height: 2.4rem; text-align: center; z-index: 9999; letter-spacing: 1px; } .ribbon:before { position: absolute; right: .3rem; bottom: -1rem; border: solid transparent; content: " "; height: 0; width: 0; pointer-events: none; border-width: 10px; -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); } /*=== Colors === */ .flexgrid.columns-news li { background: #fff; border: 1px solid #eee; border-bottom: 1px solid #eee; } .flexgrid.columns-news li a { color: inherit; } .columns-news li:hover { box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05); } .flexgrid.columns-news li p { color: #fff; text-shadow: 0 1px 0 #000; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.4))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%); /* W3C */ } .grid-number { background: rgba(0, 0, 0, 0.4); color: #fff; border: none; } .ribbon { background: #67c; } .ribbon, .ribbon a { color: #fff; } .ribbon:before { border-color: rgba(136, 183, 213, 0); border-top-color: #ccc; ; }
JAVASCRIPT
Expand for more options Login