DEV Community

loading...

How to make your HTML responsive by adding a single line of CSS

Per on June 12, 2019

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...
pic
Editor guide
Collapse
viccw profile image
Vic Seedoubleyew

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.

Collapse
klamping profile image
Kevin Lamping

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.

Collapse
viktorvillalobos profile image
Víctor H. Villalobos B.

Great article, great examples. What do you use for the animations???

Collapse
loouislow profile image
Loouis Low • Edited

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.

<!-- example in HTML -->
<y class="fluid m-min-lg m-max-sm p-min-sm p-max-lg text-min-lg text-min-md">
  ...
</y>
// example in CSS
body {
  @extend .fluid, .m-min-lg, .m-max-sm, .p-min-sm, .p-max-lg .text-min-lg, .text-min-md;
}

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.

<!-- example in HTML -->
<y class="sm:max-w-full md:max-w-full lg:max-w-sm 2k:max-w-xs">
  ...
</y>
// example in CSS
body {
  @extend .sm:\max-w-full, .md:\max-w-full, .lg:\max-w-sm, .\32k:\max-w-x;
}
Collapse
strezag profile image
Gabriel Streza

Repost from 2017?

Collapse
matthe521 profile image
Matt-He • Edited

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...

Collapse
mchungaji profile image
Martin Kiogora

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.

Collapse
craftyminer1971 profile image
CraftyMiner1971

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!

Collapse
tamasviktor profile image
Collapse
omhax profile image
Om Hax

Thank you for the tutorial. It's help me a lot.

Collapse
ganar profile image
Gabriel N

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.

Collapse
csirolli profile image
Christian Sirolli

Sounds like a Microsoft problem.

Collapse
ganar profile image
Gabriel N

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.

Collapse
danielpoobalan profile image
Daniel Poobalan

Are you Per Borgen from Scrimba?

Collapse
perborgen profile image
Collapse
olimpioadolfo profile image
Olimpio

Amazing🔥🔥🔥

Collapse
linetechelectr profile image
Ed Romero

Wow! AWESOME PER!! AWESOME!!!

Collapse
aakashpaliwal profile image
Aakashpaliwal

Awesome!!!

Collapse
mahamshahid18 profile image
Maham Shahid

Great article. Really love how you walk through different ways and improve on the previous on in each next step! :)

Collapse
voletiswaroop profile image
Swaroop

This is an awesome article, I can say 'auto-fit' is an amazing feature

Collapse
sawzarnilinhtay profile image
Zarni

Thanks for this article, it is very interesting.

isn't working in ie11. Please help me!!!

Collapse
atulcodex profile image
Atul Prajapati

Nice one 😎🙏

Collapse
lorenzck profile image
Collapse
yashdesai profile image
Yash Desai

Nice work!

Collapse
xinnks profile image
Collapse
2019farhad profile image
2019farhad

This is amazing, this very Lock like so beautiful, great Thank you.

Collapse
neelam28 profile image
Neelam

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 :)

Collapse
derkhadim profile image
Mouhamadou DER

Great article!

Collapse
silentdev profile image
Ezekiel Lawson

Thanks for sharing this great article!

Collapse
ryanhaber profile image
Ryan Haber

Man, I wish I Co ld give this 400 unicorns. Love it.

Collapse
mayeedwin profile image
Maye Edwin

This is incredible

Collapse
piotrk profile image
2pi.pl

The linked Scrimba course is awesome - great tool for learning!

Collapse
justynclark profile image
Justyn Clark

Nice clean example of Grid bro. Cheers!

Collapse
shohanayaan profile image
Collapse
jmrapp1 profile image
Jon R

This is awesome.

Collapse
bvmcode profile image
Collapse
martinsngene profile image
Martins Ngene

That's pretty awesome.

Collapse
benayat profile image
benayat

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

Collapse
lgdevlop profile image
Leonardo Gomes

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.

Collapse
ganar profile image
Gabriel N

And that is one of the best places to learn all the details about it. Rachel Andrew's site is also a great resource.