Use minmax and auto-fill to make everything fit properly

Travizzle · Apr 3, 2024 · d2f2a20 · d2f2a20
1 parent 7d37822
commit d2f2a20
Showing 1 changed file with 26 additions and 2 deletions.
diff --git a/grid.html b/grid.html
@@ -5,17 +5,41 @@
         <style>
             .grid {
                 display: grid;
-                grid-template-columns: repeat(3, 1fr);
-                grid-auto-rows: 15em;
+                grid-auto-rows: minmax(10em, 1fr);
+                grid-auto-flow: dense;
                 grid-gap: 1em;
+                grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
             }
             .grid > div {
                 border: 1px solid #000;
             }
+            .grid-feature {
+                grid-column: span 2;
+            }
         </style>
     </head>
     <body>
         <div class="grid">
+            <div>
+                <h2>Big news today</h2>
+                Quick sync win-win-win or workflow ecosystem.
+            </div>
+            <div class="grid-feature">
+                <h2>We are really excited to announce that we will soon have an exciting announcement!</h2>
+                We're ahead of the curve on that one we just need to put these last issues to bed where do we stand on the latest client ask.
+            </div>
+            <div>
+                <h2>Currying favor performance review bench mark</h2>
+                No need to talk to users, just base it on the spare calculator lift and shift.
+            </div>
+            <div>
+                <h2>Level the playing field</h2>
+                Take five, punch the tree, and come back in here with a clear head. We need to follow protocol obviously, rock Star/Ninja encourage &amp; support business growth yet curate.
+            </div>
+            <div>
+                <h2>Usability closing these latest prospects </h2>
+                Customer centric where do we stand on the latest client ask back of the net 4-blocker fast track make it look like digital, like putting socks on an octopus.
+            </div>
             <div>
                 1
             </div>