Prepare repository for merge

2023-05-01 22:51:44 +03:00
parent 334b4dd6f8
commit e49fc829dd
100 changed files with 0 additions and 593 deletions
--- a/css/snippets/image-mosaic.md
+++ b/css/snippets/image-mosaic.md
@ -0,0 +1,107 @@
+---
+title: Responsive image mosaic
+type: snippet
+tags: [layout]
+author: chalarangelo
+cover: beach-riders
+dateModified: 2020-12-30T15:37:37+02:00
+---
+
+Creates a responsive image mosaic.
+
+- Use `display: grid` to create an appropriate responsive grid 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;
+  padding: 0;
+  margin: 0;
+}
+
+@media screen and (min-width: 600px) {
+  .card-tall {
+    grid-row: span 2 / auto;
+  }
+
+  .card-wide {
+    grid-column: span 2 / auto;
+  }
+}
+```