Easy One-line Responsive Layouts with CSS Grid, Auto-fit and MinMax 🔥

preview_player
Показать описание
Here is a one-line CSS code to help you achieve responsive layouts. This one-line includes css grid, auto-fit and the minmax function.

_____

_____

🌟 About Me:
Dillion Megida, creator of DEEECODE, is a Software Engineer, Developer Advocate and a Content Creator passionate about simplifying topics around Tech via articles and videos.

_____

⚡️ Connect with me:
Рекомендации по теме
Комментарии
Автор

Aight, this is massive yeah. Beautiful.
The only thing, how can I align to center so the ones that break come to the center

Franklivania
Автор

There is also an upgraded version for very very small screens repeat( autofit, minmax( min(100%, 200px), 1fr))

taofeeqomotolani
Автор

Bro makes PR to CSS source code.

Great job in explaining this, man 🔥

lordsarcastic
Автор

However, I think we will have a problem with this code when there are only one or two items - they will expand to fill the entire area.

// use this if the items do not fill a row - Less than 2 or 3 items
grid-template-columns: repeat(auto-fit, 300);

// Use if there are enough to fill one row
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

A programmatic check needs to be done as to which one should be applied

shanKirs
Автор

why in the H a hoodie when you are indoors, you've lost me

erling