Skip to content

grid-container: allow the grid to shrink to fit all avalible space to prevent sidescroll. #269

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Mar 21, 2025
Merged

grid-container: allow the grid to shrink to fit all avalible space to prevent sidescroll. #269

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
debf15d
Add myself as a contributer
tryoxiss Mar 12, 2025
f6413c9
Change `250px` to `min(250px, 100%)`
tryoxiss Mar 12, 2025
f18bab2
The original didn't even work because it was missing a semicolon
tryoxiss Mar 12, 2025
dea6aaf
Update explanation
tryoxiss Mar 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions snippets/css/layouts/grid-layout.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,18 @@
title: Grid layout
description: Equal sized items in a responsive grid
author: xshubhamg
contributors: tryoxiss
tags: layout,grid
---

```css
.grid-container {
display: grid
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
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.
- `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.
*/
}
```