css-grid-example

css-grid-example.markdown

css-grid-example

A Pen by luis barqueira on CodePen.

License.

index.html

<div class="gallery">
  <img src="http://placeimg.com/640/480/animals">
  <img src="http://placeimg.com/640/480/arch">
  <img src="http://placeimg.com/640/480/nature">
  <img src="http://placeimg.com/640/480/people">
  <img src="http://placeimg.com/640/480/tech"> 
</div>  

style.css

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.gallery{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(300px, 1fr));
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.gallery img{
  width: 100%;
}