Simple, Clean, Responsive, Semantic Grid (Gallery) Layout (using CSS Grids and Flexbox Fallback)

index.html

<main>
	<section id="gallery-section">
  <ul>
			<li><img src="http://placehold.it/320x240" alt=""></li>
			<li><img src="http://placehold.it/320x240" alt=""></li>
			<li><img src="http://placehold.it/320x240" alt=""></li>
			<li><img src="http://placehold.it/320x240" alt=""></li>
			<li><img src="http://placehold.it/320x240" alt=""></li>
			<li><img src="http://placehold.it/320x240" alt=""></li>
		</ul>
</section>
</main>

simple-clean-responsive-semantic-grid-gallery-layout-using-css-grids-and-flexbox-fallback.markdown

Simple, Clean, Responsive, Semantic Grid (Gallery) Layout (using CSS Grids and Flexbox Fallback)

A Pen by Matthew Daniel Brown on CodePen.

License.

style.scss

* {
  box-sizing: border-box;
}

body {
  
	background: ghostwhite;
}

main {
	padding: 5vw;
}

.container {
  // background-color: #ddd;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 1em;
}

img {
  width: 100%;
  align-self: center;
}









section#gallery-section {
	ul {
		@extend .container;
		li {
			img {
				border-radius: 8px;
				box-shadow: 0 8px 32px -8px rgba(gray, 0.5);
			}
		}
	}
}