A list of images that by default is two-columns. As screen real estate becomes available, more columns are added.
A Pen by Brad Frost on CodePen.
Created
January 19, 2015 07:26
-
-
Save pbrocks/b649a560359abca7246e to your computer and use it in GitHub Desktop.
Image Grid
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!--Pattern HTML--> | |
| <div id="pattern" class="pattern"> | |
| <ul class="g"> | |
| <li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li> | |
| <li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li> | |
| <li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li> | |
| <li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li> | |
| <li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li> | |
| <li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li> | |
| <li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li> | |
| <li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li> | |
| <li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li> | |
| <li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li> | |
| <li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li> | |
| <li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li> | |
| <li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li> | |
| <li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li> | |
| <li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li> | |
| <li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li> | |
| <li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li> | |
| <li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li> | |
| <li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li> | |
| <li><a href="#"><img src="http://bradfrost.github.com/this-is-responsive/patterns/images/fpo_square.png" alt="Product Name" /></a></li> | |
| </ul> | |
| </div> | |
| <!--End Pattern HTML--> | |
| <div class="container"> | |
| <section class="pattern-description"> | |
| <h1>Image Grid</h1> | |
| <p>A list of images that by default is two-columns. As screen real estate becomes available, more columns are added.</p> | |
| <h2>Considerations</h2> | |
| <ul> | |
| <li>Assume small screen by default. Add columns as necessary.</li> | |
| </ul> | |
| </section> | |
| <footer role="contentinfo"> | |
| <div> | |
| <nav id="menu"> | |
| <a href="http://bradfrost.github.com/this-is-responsive/patterns.html">←More Responsive Patterns</a> | |
| </nav> | |
| </div> | |
| </footer> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .g { | |
| padding: 0.25em; | |
| overflow: hidden; | |
| } | |
| .g li { | |
| float: left; | |
| width: 50%; | |
| padding: 0.25em; | |
| } | |
| .g img { | |
| display: block; | |
| } | |
| .g li:nth-child(odd) { | |
| clear: left; | |
| } | |
| @media screen and (min-width: 40em) { | |
| .g li { | |
| width: 33.3333333333333333%; | |
| } | |
| .g li:nth-child(3n+1) { | |
| clear: left; | |
| } | |
| .g li:nth-child(odd) { | |
| clear: none; | |
| } | |
| } | |
| @media screen and (min-width: 55em) { | |
| .g li { | |
| width: 25%; | |
| } | |
| .g li:nth-child(4n+1) { | |
| clear: left; | |
| } | |
| .g li:nth-child(3n+1) { | |
| clear: none; | |
| } | |
| } | |
| @media screen and (min-width: 72em) { | |
| .g li { | |
| width: 20%; | |
| } | |
| .g li:nth-child(5n+1) { | |
| clear: left; | |
| } | |
| .g li:nth-child(4n+1) { | |
| clear: none; | |
| } | |
| } | |
| @media screen and (min-width: 90em) { | |
| .g li { | |
| width: 16.666666666%; | |
| } | |
| .g li:nth-child(6n+1) { | |
| clear: left; | |
| } | |
| .g li:nth-child(5n+1) { | |
| clear: none; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment