tile layout with images aligned centre with flex and css grid

by ian_smithz

HTML

<ul>
  <li><img src="http://www.screwfixlive.com/wp-content/uploads/Duck-tape-250x250.png" class="attachment-medium size-medium wp-post-image" alt="Duck tape"></li>
  <li><img src="http://www.screwfixlive.com/wp-content/uploads/Frog-tape.png" class="attachment-medium size-medium wp-post-image" alt="Frog tape"></li>
  <li><img src="http://www.screwfixlive.com/wp-content/uploads/3534-250x62.jpg" class="attachment-medium size-medium wp-post-image"></li>
  <li><img src="http://www.screwfixlive.com/wp-content/uploads/Duck-tape-250x250.png" class="attachment-medium size-medium wp-post-image" alt="Duck tape"></li>
  <li><img src="http://www.screwfixlive.com/wp-content/uploads/Frog-tape.png" class="attachment-medium size-medium wp-post-image" alt="Frog tape"></li>
  <li><img src="http://www.screwfixlive.com/wp-content/uploads/3534-250x62.jpg" class="attachment-medium size-medium wp-post-image"></li>
  <li><img src="http://www.screwfixlive.com/wp-content/uploads/Duck-tape-250x250.png" class="attachment-medium size-medium wp-post-image" alt="Duck tape"></li>
  <li><img src="http://www.screwfixlive.com/wp-content/uploads/Frog-tape.png" class="attachment-medium size-medium wp-post-image" alt="Frog tape"></li>
  <li><img src="http://www.screwfixlive.com/wp-content/uploads/3534-250x62.jpg" class="attachment-medium size-medium wp-post-image"></li>
  <li><img src="http://www.screwfixlive.com/wp-content/uploads/Duck-tape-250x250.png" class="attachment-medium size-medium wp-post-image" alt="Duck tape"></li>
  <li><img src="http://www.screwfixlive.com/wp-content/uploads/Frog-tape.png" class="attachment-medium size-medium wp-post-image" alt="Frog tape"></li>
  <li><img src="http://www.screwfixlive.com/wp-content/uploads/3534-250x62.jpg" class="attachment-medium size-medium wp-post-image"></li>
</ul>

CSS

ul {
  width: 90%;
  background-color: #f0f0f0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
}

ul li {
  margin: 0 1rem 1rem 0;
  padding: 0.3125rem;
  border: 1px solid #d1d1d1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

ul li img {
  max-width: 100%;
}