ACSS 101:14: Auto Grid Layouts
HTML-код
- Опубликовано: 10 сен 2024
- Auto Grid allows users to create automatically responsive grid, control the aggressiveness of the stacking behavior, and even determine when grids stack down to a specific pixel value.
In this video you'll learn how Auto Grids work, pros and cons, and common issues to look out for.
Interested in using Automatic.css on your sites and accessing the private ACSS support and strategy community? Get a license here: automaticcss.com
Interested in using Frames on your sites and accessing the private Frames support and strategy community? Get a license here: getframes.io
Want more helpful dev tutorials and agency-related trainings? Check out Kevin's channel: / @gearyco
![I Replaced ALL my ADOBE APPS with these [free or cheaper] Alternatives!](/img/1.gif)
Didn't realize the hat wasn't straight. It works, though, because Auto Grid is a pretty gangster feature.
The important thing is that the head is straight 😊
@@IssaKhlief lol
Was about to say my OCD is triggered in this vid, but doesnt matter, value is still insane here, you could even rock it without a cap at all.
I just finished the book The Power of Broke, by Daymond John, he mentioned that one of the keys to being successful is always giving something back. You're always giving back, back to the community, sharing your knowledge and creating good content. For that, THANK YOU KEVIN!
yes sir!
I'm getting caught up on all of the latest Kevin videos. I originally thought the grid-# feature in ACSS was so much easier than writing out the css. Auto grid is over the top. My life is now easier because ACSS takes care of this automatically & programmatically but also more challenging because now I've got another tool to wield in my development work. Kudos!
Another excellent video, Kevin. Thank you.
I actually have work get done before Office hours, so can't pay close attention at the moment. But it's a fresh video so I want to help the algo push it out more. Have it playing in the background and then I'll watch after Office Hours
wow, thanks
I should have watched this video before having installed ACSS 3.05 !
It's an interesting feature. I've avoided using the grid utility classes preferring to just use some variation of repeat(auto-fit, minmax(300px, 1fr)). Not sure I'll make the switch but nice to see it's built in now
Why? Our grid classes and variables are superior and quicker.
@@AutomaticCSSI find more is "hidden" this way. The aggressiveness isn't a number that means anything to me. Meanwhile, seeing 300px tells me it's min size immediately. Just feels like more to learn on how to use this system and doesn't translate outside of ACSS. If I hadn't learned css grid properly already I would definitely enjoy this feature as it's simpler to learn. But the simplicity obscures some elements that I already understand.
Good video! 👍🏻
Thanks
Will acss in future releases introduce the feature for auto grids to stack to specific columns. From 6 to 4 to 2? Is it programmatically possible?
Not possible for css to know the number of items in an auto fit grid or how many rows there are either
Hey, that's a cool superpower! But what if I'm using custom breakpoints? Like, let's say I'm using 1024px instead of the default 992px. Will ACSS still catch that when using auto grid?
Breakpoints are irrelevant with Auto Grid. They're based on the size of items in the grid, not breakpoint values.
how would i use the variables in oxygen? thanks for the video! and sorry to be the only oxygen user asking stuff hehe
Oxygen grid system is broken :/
SO RAD.