Last active
July 25, 2016 15:55
-
-
Save patw0929/0ad375870cd0093f86c8f6d319d71f0b to your computer and use it in GitHub Desktop.
Pure CSS Responsive Gallery (divs with 1:1 aspect ratio) http://jsbin.com/senujig/edit?html,css,output
This file contains 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
| .item { | |
| position: relative; | |
| display: inline-block; | |
| width: 48%; | |
| margin: 0.5%; | |
| background-color: gold; | |
| outline: 1px solid red; | |
| } | |
| .item:before { | |
| content: ''; | |
| display: block; | |
| padding-top: 100%; | |
| } | |
| @media (min-width: 480px) { | |
| .item { | |
| width: 31.25%; | |
| } | |
| } | |
| @media (min-width: 720px) { | |
| .item { | |
| width: 23.25%; | |
| } | |
| } |
This file contains 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| </head> | |
| <body> | |
| <div class="wrapper"> | |
| <div class="item"> | |
| </div> | |
| <div class="item"> | |
| </div> | |
| <div class="item"> | |
| </div> | |
| <div class="item"> | |
| </div> | |
| <div class="item"> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment