Create image mosaic

snippets/image-mosaic.md

@@ -0,0 +1,65 @@
+---
+title: Responsive image mosaic.
+tags: layout,intermediate
+---
+
+Creates a responsive image mosaic.
+
+- Use `display: grid` to create an appropriate responsive layout.
+- Use `grid-row: span 2 / auto` and `grid-column: span 2 / auto` to create items that span two rows or two columns respectively.
+- Wrap the previous styles into a media query to avoid applying on small screen sizes.
+
+```html
+<div class="image-mosaic">
+  <div class="card card-tall card-wide" style="background-image:url('https://picsum.photos/id/564/1200/800')"></div>
+  <div class="card card-tall" style="background-image:url('https://picsum.photos/id/566/800/530')"></div>
+  <div class="card" style="background-image:url('https://picsum.photos/id/575/800/530')"></div>
+  <div class="card" style="background-image:url('https://picsum.photos/id/626/800/530')"></div>
+  <div class="card" style="background-image:url('https://picsum.photos/id/667/800/530')"></div>
+  <div class="card" style="background-image:url('https://picsum.photos/id/678/800/530')"></div>
+  <div class="card card-wide" style="background-image:url('https://picsum.photos/id/695/800/530')"></div>
+  <div class="card" style="background-image:url('https://picsum.photos/id/683/800/530')"></div>
+  <div class="card" style="background-image:url('https://picsum.photos/id/693/800/530')"></div>
+  <div class="card" style="background-image:url('https://picsum.photos/id/715/800/530')"></div>
+  <div class="card" style="background-image:url('https://picsum.photos/id/610/800/530')"></div>
+  <div class="card" style="background-image:url('https://picsum.photos/id/599/800/530')"></div>
+</div>
+```
+
+```css
+.image-mosaic {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  grid-auto-rows: 240px;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: #353535;
+  font-size: 3rem;
+  color: #fff;
+  box-shadow: rgba(3, 8, 20, 0.1) 0px 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0px 0.075rem 0.175rem;
+  height: 100%;
+  width: 100%;
+  border-radius: 4px;
+  transition: all 500ms;
+  overflow: hidden;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+ }
+
+@media screen and (min-width: 600px) {
+  .card-tall {
+    grid-row: span 2 / auto;
+  }
+
+  .card-wide {
+    grid-column: span 2 / auto;
+  }
+}
+```