Skip to content

Instantly share code, notes, and snippets.

@jakelunniss

jakelunniss/CSS Grid Html Example

Last active December 8, 2017 21:56
Show Gist options
  • Save jakelunniss/2f80ff2bfd2740dcc8d4366332fdd994 to your computer and use it in GitHub Desktop.
Save jakelunniss/2f80ff2bfd2740dcc8d4366332fdd994 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CSS Grid Html Example
<div class="container">
<div><img src="https://images.unsplash.com/photo-1510253782297-404c4da27214?auto=format&fit=crop&w=2551&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" /></div>
<div><img src="https://images.unsplash.com/photo-1510253782297-404c4da27214?auto=format&fit=crop&w=2551&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" /></div>
<div><img src="https://images.unsplash.com/photo-1510253782297-404c4da27214?auto=format&fit=crop&w=2551&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" /></div>
<div><img src="https://images.unsplash.com/photo-1510253782297-404c4da27214?auto=format&fit=crop&w=2551&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" /></div>
<div><img src="https://images.unsplash.com/photo-1510253782297-404c4da27214?auto=format&fit=crop&w=2551&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" /></div>
<div><img src="https://images.unsplash.com/photo-1510253782297-404c4da27214?auto=format&fit=crop&w=2551&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" /></div>
</div>
Raw
CSS Grid Responsive CSS Example
.container {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(auto-fit, minmax(100px, 2fr));
grid-template-rows: repeat(6, minmax(80px, 10%));
}
.container > div > img {
width: 100%;
height: 100%;
object-fit: cover;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment