From debf15d0e72d8c7220ca9ddb69d8eb677209f843 Mon Sep 17 00:00:00 2001
From: tryoxiss <tryoxiss@gmail.com>
Date: Wed, 12 Mar 2025 12:06:35 -0700
Subject: [PATCH 1/4] Add myself as a contributer
Add myself to comply with quicksnip contribution guidelines
---
snippets/css/layouts/grid-layout.md | 1 +
1 file changed, 1 insertion(+)
diff --git a/snippets/css/layouts/grid-layout.md b/snippets/css/layouts/grid-layout.md
index cd4425b5..45fc07e1 100644
--- a/snippets/css/layouts/grid-layout.md
+++ b/snippets/css/layouts/grid-layout.md
@@ -2,6 +2,7 @@
title: Grid layout
description: Equal sized items in a responsive grid
author: xshubhamg
+contributors: tryoxiss
tags: layout,grid
---
From f6413c92e1719cdb24ba6ef20a6fcbaba13fe321 Mon Sep 17 00:00:00 2001
From: tryoxiss <tryoxiss@gmail.com>
Date: Wed, 12 Mar 2025 12:09:27 -0700
Subject: [PATCH 2/4] Change `250px` to `min(250px, 100%)`
For some reason "edit and fork" didn't save my inital edit which did this on my fork, thanks github.
---
snippets/css/layouts/grid-layout.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/snippets/css/layouts/grid-layout.md b/snippets/css/layouts/grid-layout.md
index 45fc07e1..b09375d4 100644
--- a/snippets/css/layouts/grid-layout.md
+++ b/snippets/css/layouts/grid-layout.md
@@ -9,7 +9,7 @@ tags: layout,grid
```css
.grid-container {
display: grid
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
/* Explanation:
- `auto-fit`: Automatically fits as many columns as possible within the container.
- `minmax(250px, 1fr)`: Defines a minimum column size of 250px and a maximum size of 1fr (fraction of available space).
From f18bab2e18b9f93eb3e731b0591413935ff8a9a5 Mon Sep 17 00:00:00 2001
From: tryoxiss <tryoxiss@gmail.com>
Date: Wed, 12 Mar 2025 12:20:06 -0700
Subject: [PATCH 3/4] The original didn't even work because it was missing a
semicolon
---
snippets/css/layouts/grid-layout.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/snippets/css/layouts/grid-layout.md b/snippets/css/layouts/grid-layout.md
index b09375d4..905fb20a 100644
--- a/snippets/css/layouts/grid-layout.md
+++ b/snippets/css/layouts/grid-layout.md
@@ -8,7 +8,7 @@ tags: layout,grid
```css
.grid-container {
- display: grid
+ display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
/* Explanation:
- `auto-fit`: Automatically fits as many columns as possible within the container.
From dea6aaf2fa12c84cdc91f352e9052198d6439091 Mon Sep 17 00:00:00 2001
From: tryoxiss <tryoxiss@gmail.com>
Date: Wed, 12 Mar 2025 12:22:48 -0700
Subject: [PATCH 4/4] Update explanation
---
snippets/css/layouts/grid-layout.md | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/snippets/css/layouts/grid-layout.md b/snippets/css/layouts/grid-layout.md
index 905fb20a..56595e2c 100644
--- a/snippets/css/layouts/grid-layout.md
+++ b/snippets/css/layouts/grid-layout.md
@@ -12,7 +12,8 @@ tags: layout,grid
grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
/* Explanation:
- `auto-fit`: Automatically fits as many columns as possible within the container.
-- `minmax(250px, 1fr)`: Defines a minimum column size of 250px and a maximum size of 1fr (fraction of available space).
+- `minmax(min(250px, 100%), 1fr)`: Defines a minimum column size of 250px and a maximum size of 1fr (fraction of available space). However, that minimum column size is allowed to shrink to fit all avalible space if the space is otherwise less than the minimum.
+ - NOTE: the `min(x, 100%)` trick does not do much for very small sizes like 250px, but it will help massively if you increase the min column size yourself.
*/
}
```