Responsive grid with CSS Grids

Responsive grid with CSS Grids

by otunik

HTML

<div class="container">

	<div class="flex-container">

		<div class="flex-item">
			<img class="gallery-image" src="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?w=100&h=100&fit=crop">
		</div>

		<div class="flex-item">
			<img class="gallery-image" src="https://images.unsplash.com/photo-1515260268569-9271009adfdb?w=100&h=100&fit=crop">
		</div>

	<div class="flex-item">
	    <img class="gallery-image" src="https://images.unsplash.com/photo-1506045412240-22980140a405?w=100&h=100&fit=crop">
	  </div>
	  
	  <div class="flex-item">
	    <img class="gallery-image" src="https://images.unsplash.com/photo-1514041181368-bca62cceffcd?w=100&h=100&fit=crop">
	  </div>
	  
	  <div class="flex-item">
	    <img class="gallery-image" src="https://images.unsplash.com/photo-1445810694374-0a94739e4a03?w=100&h=100&fit=crop">
	  </div>
	  
	  <div class="flex-item">
	    <img class="gallery-image" src="https://images.unsplash.com/photo-1486334803289-1623f249dd1e?w=100&h=100&fit=crop">
	  </div>

	</div>

</div>
<div class="info">Resize this panel to see grids respond</div>

CSS

.flex-container {
	display: flex;
  /* flex-direction: row-reverse; */
  flex-direction: row;
  /* flex-wrap: wrap-reverse; */
	flex-wrap: wrap;
  /* flex-flow: row nowrap; */
	margin: -1rem -1rem;
  justify-content: center;
}

.flex-item {
  flex: 1 0 100px;
  margin: 1rem;
  box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.gallery-image {
	display: block;
	width: 100%;
	height: 100%;
}