Photo by TJ Holowaychuk
In this article, I’ll teach you how to use CSS Grid to create a super cool image grid which varies the number of columns w...
For further actions, you may consider blocking this person and/or reporting abuse
Thanks for this article, it is very interesting.
Just one comment: I find it a pity that its title is misleading. As it is now, it sounds as though one could make one's whole website responsive with just one line of CSS. That isn't what this article aims at explaining: it explains how to make a grid responsive with just one line of CSS. This is already really interesting, so no need to oversell.
Even just changing HTML -> Grid makes a huge difference in the title. "How to make your Grid responsive by adding a single line of CSS" would be so much better.
Great article, great examples. What do you use for the animations???
I can probably create a single line responsive to HTML targeting specific element with Yogurt such as:
Using Fluid utility module: set the margin, padding, and font size adaptively adjust with different screen width.
Or using a native responsive variant utility: on the mobile screen an element width is max, the tablet screen is max, the laptop screen is small, the desktop screen is extra small.
Repost from 2017?
I rarely use CSS control for responsive devices. I just add a line of code directly to the page.（can't appear the code below...just meta name="viewport"...code ）
It's easy to implement responsive devices. Such as this effect: pngix.com/viewpng/ohhbJw_responsiv...
This is so encouraging for a beginner like me. I've been very lazy with my Web Development journey but after a long lazy break I'm back again. Finished basic HTML stuff last night and was looking for CSS motivation and your post encouraged me some more. Just wondering what total beginner stuff or tutorial would you recommend? Would appreciate much any suggestions. Thank you for sharing this.
Who knew, beside you and now the rest of the world, that you could have such responsive grids with such a simple piece of CSS! Thanks, Per, that's great!
Awesome!
Thank you for the tutorial. It's help me a lot.
This may work on a browser, but have you consider the current support of Grid CSS among the mail clients? Outlook is still very much in use and has a ton of limitations.
Sounds like a Microsoft problem.
This is a problem that has to be endured by the users, not Microsoft. It may not look as much but there are still large holdouts in certain industries where applying this formula does not work: Health, Banking and Finance, Mining among others.
The author made a primer on CSS Grid, but do be aware that much work has to be done to make this work in legacy browsers and email clients.
Are you Per Borgen from Scrimba?
Yes
Amazing🔥🔥🔥
Wow! AWESOME PER!! AWESOME!!!
Awesome!!!
Great article. Really love how you walk through different ways and improve on the previous on in each next step! :)
This is an awesome article, I can say 'auto-fit' is an amazing feature
Thanks for this article, it is very interesting.
isn't working in ie11. Please help me!!!
Nice one 😎🙏
Very nice!
Nice work!
👏
This is amazing, this very Lock like so beautiful, great Thank you.
Oh my god, thanks so much for this article.
I always used bootstrap) to achieve this functionality, but now I can do it just without it.
Thanks again, Per :)
Great article!
Thanks for sharing this great article!
Man, I wish I Co ld give this 400 unicorns. Love it.
This is incredible
The linked Scrimba course is awesome - great tool for learning!
Nice clean example of Grid bro. Cheers!
next level
This is awesome.
gold
That's pretty awesome.
a newbie question - is there an option to use auto-fit without using repeat? because I I still want to have a different fr ratio to my columns
The first place I see this technic was in YouTube channel of Jen Simmons, Mozilla Designer advocate and CSS Working Group member. His channel I guess is layout land.
And that is one of the best places to learn all the details about it. Rachel Andrew's site is also a great resource.