feat: some bentos grid

index.html

@@ -713,6 +713,48 @@ <h4>Scroll Gallery</h4>
 
     </section>
 
+    <section>
+      <h3>Bentos</h3>
+
+      <p>A new trend at the time LOL</p>
+
+      <h4>Normal Bento(6)</h4>
+
+      <section class="small-bento">
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+        <div>4</div>
+      </section>
+
+      <h4>Normal Bento(6)</h4>
+
+      <section class="bento">
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+        <div>4</div>
+        <div>5</div>
+        <div>6</div>
+      </section>
+
+      <h4>Big Bento(10)</h4>
+
+      <section class="big-bento">
+        <div>1</div>
+        <div>2</div>
+        <div>3</div>
+        <div>4</div>
+        <div>5</div>
+        <div>6</div>
+        <div>7</div>
+        <div>8</div>
+        <div>9</div>
+        <div>10</div>
+      </section>
+
+    </section>
+
   </main>
   <a class="scroll-to-top" href=".hero">TOP</a>
 

src/sass/utils/_display.scss

@@ -96,6 +96,102 @@
     }
 }
 
+// Bento Grid -------------------------------------------------
+
+:is(.big-bento, .small-bento, .bento) {
+
+    display: grid;
+    gap: var(--xs);
+    grid-auto-rows: 1fr;
+
+    & > * {
+        margin: 0;
+        align-self: stretch;
+        //aspect-ratio: 1;
+        background-color: black;
+    }
+
+}
+
+.small-bento {
+
+    aspect-ratio: 16 / 9;
+    grid-template-columns: repeat(3, 1fr);
+
+    & :nth-child(1) {
+
+        grid-row: span 3;
+    }
+
+    & :is(:nth-child(2), :nth-child(3)) {
+
+        grid-row: span 2;
+        grid-column: span 2;
+    }
+
+    & :nth-child(4) {
+
+        grid-column: span -1;
+    }
+}
+
+.bento {
+
+    aspect-ratio: 16 / 9;
+
+    grid-template-columns: repeat(4, 1fr);
+
+    & :nth-child(1) {
+
+        grid-row: span 2;
+        grid-column: span 2;
+    }
+
+    & :is(:nth-child(2), :nth-child(3)) {
+
+        grid-row: span 2;
+    }
+
+    & :is(:nth-child(5)) {
+
+        grid-column: span 2;
+    }
+}
+
+// A Bento with 10 items
+
+.big-bento {
+
+    aspect-ratio: 16 / 9;
+
+    grid-template-columns: repeat(7, 1fr);
+
+    & :is(:nth-child(1), :nth-child(3)) {
+
+        grid-column: span 2;
+    }
+
+    & :nth-child(2) {
+
+        grid-column: span 3;
+    }
+
+    & :is(:nth-child(4), :nth-child(5), :nth-child(7), :nth-child(8)) {
+        grid-row: span 2;
+    }
+
+    & :nth-child(6) {
+
+        grid-row: span 3;
+        grid-column: span 3;
+    }
+
+    & :is(:nth-child(9), :nth-child(10)) {
+
+        grid-column: span 2;
+    }
+}
+
 // Wrapper
 
 :where(.wrapper) {