A Pen by Rahul Raghavan on CodePen.
Created
May 12, 2018 05:43
-
-
Save rahulraghavankklm/d67c549733eea2bd60ed705033c17f31 to your computer and use it in GitHub Desktop.
CSS Grid - Responsive Gallery Grid Layout
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
| <div class="gallery"> | |
| <div class="gallery__item"><img class="image" src="https://source.unsplash.com/user/erondu/1280x720"/></div> | |
| <div class="gallery__item"><img class="image" src="https://source.unsplash.com/user/erondu/400x300"/></div> | |
| <div class="gallery__item"><img class="image" src="https://source.unsplash.com/user/erondu/400x300"/></div> | |
| <div class="gallery__item"><img class="image" src="https://source.unsplash.com/user/erondu/1280x720"/></div> | |
| <div class="gallery__item"><img class="image" src="https://source.unsplash.com/user/erondu/400x300"/></div> | |
| <div class="gallery__item"><img class="image" src="https://source.unsplash.com/user/erondu/400x300"/></div> | |
| <div class="gallery__item"><img class="image" src="https://source.unsplash.com/user/erondu/800x600"/></div> | |
| <div class="gallery__item"><img class="image" src="https://source.unsplash.com/user/erondu/400x300"/></div> | |
| <div class="gallery__item"><img class="image" src="https://source.unsplash.com/user/erondu/1280x720"/></div> | |
| <div class="gallery__item"><img class="image" src="https://source.unsplash.com/user/erondu/600x300"/></div> | |
| <div class="gallery__item"><img class="image" src="https://source.unsplash.com/user/erondu/900x450"/></div> | |
| <div class="gallery__item"><img class="image" src="https://source.unsplash.com/user/erondu/1280x720"/></div> | |
| <div class="gallery__item"><img class="image" src="https://source.unsplash.com/user/erondu/400x300"/></div> | |
| <div class="gallery__item"><img class="image" src="https://source.unsplash.com/user/erondu/400x300"/></div> | |
| <div class="gallery__item"><img class="image" src="https://source.unsplash.com/user/erondu/800x600"/></div> | |
| <div class="gallery__item"><img class="image" src="https://source.unsplash.com/user/erondu/400x300"/></div> | |
| </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
| .gallery { | |
| display: grid; | |
| grid-gap: 10px; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| grid-auto-rows: 200px 200px; | |
| grid-auto-flow: dense; | |
| &__item { | |
| .image { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| @media (min-width: 480px) { | |
| &:first-child { | |
| grid-area: 1 / 1 / span 2 / span 2; | |
| } | |
| &:nth-child(3n) { | |
| grid-column: span 2; | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment