DEV Community

Cover image for Making Responsive Layouts without using Media Queries

Making Responsive Layouts without using Media Queries

Tulsi Prasad on April 16, 2020

Hey everyone! ๐Ÿ‘‹ This has been the talk of the hour since grid and flexbox came into the world with their perky aspects of making your content flow ...
Collapse
 
ufonumo profile image
ufonumo

Thank you for this, really needed this

Collapse
 
vplentinax profile image
Valentiina VP • Edited

I 'm making use of all this right now and it's a wonder ๐Ÿ˜Š If anyone has trouble understanding auto-fit and auto-fill, they explain it very well on this site. Auto-fit auto-fill explanation

Collapse
 
leonblade profile image
James Stine

This is a nice flex refresher, but there's not a lot of practical examples here. I recently pushed a design live where I use both flex and grid and media queries are still needed in order to allow for different layouts based on screen size. I know you say here that media queries are still here, but I just wanted to point out that I don't see anyone really eliminating them either unless you're doing really basic layout stuff.

Collapse
 
thebuildguy profile image
Tulsi Prasad

I see your point, and you're absolutely right. When designing we might feel like its not a tough nut but while the actual coding there might be a point where it can be frightening, to do everything without media queries. However, even if we're making a small section responsive without media queries (which was never possible in the past), I think that's worth it.

Collapse
 
leonblade profile image
James Stine

Yes! Thank you for your post as well, it is a great resource!

Collapse
 
jrc86 profile image
Jonas

I used to dislike working with CSS but I learned flex, still learning, but now it makes more sense.

Collapse
 
thebuildguy profile image
Tulsi Prasad • Edited

Haha true though! It goes the same for me as well and after wrapping my head around grid, I finally felt like css is my jam. ๐Ÿ˜Œ

Collapse
 
dar5hak profile image
Darshak Parikh

"wrapping my head"
Pun intended?

Thread Thread
 
thebuildguy profile image
Tulsi Prasad

Umm...nah, I just meant it was challenging for me to understand grid, as there are so many properties with it which didn't make any sense at first.

Collapse
 
monfernape profile image
Usman Khalil

I really liked your explanation of grid template column. I find grid usually very hard to consume

Collapse
 
mrkumar44 profile image
Manoj Kumar

A brilliant read, thanks for this refresher Tulsi.