DEV Community

Cover image for The Key Element to Responsive Websites

The Key Element to Responsive Websites

mayankav on June 20, 2021

What is the first thing you think of when someone says responsive websites? What comes rushing to your mind when you think of the most important pi...
Collapse
 
cmuralisree profile image
Chittoji Murali Sree Krishna

Grid layouts are the best way to make most of the website's responsive,

But you also do it with media queries in css

Collapse
 
mayankav profile image
mayankav • Edited

@cmuralisree Thanks for taking out time to read. Its good to hear about Grid when discussing responsive websites but just to mention, responsive websites aren't as simple as "big stuff on bigger screen and smaller elements on smaller screens". You will need media queries when you want to hide/show some component based on the screen size for example. This is only one example. Remember grid can not rule out the application of media queries.

You can participate in this discussion if you feel like. For ease I will quote my favorite answer from the forum.

Cheers :)

Collapse
 
cmuralisree profile image
Chittoji Murali Sree Krishna • Edited

Making responsive pages are big task, and it's true grid cannot replace the media queries, but grid can lower the usage of media queries in certain pages,

For ex: e-commerce items, news cards, for those you can make,


grid layouts

.container {
display: grid;
/* each and every element which are inside this container will automatically resize to 250px, and places each elements based on screen size */
grid-template-colums: repeat(auto-fit, minimax(250px, 1fr));
/* You can make gaps in between them using grid-gap */
grid-gap: 10px;
}
Enter fullscreen mode Exit fullscreen mode

Note: these can only be used on few pages or sections, but we can't use them everywhere

flexbox

.container {
display: flex;
flex-wrap: wrap;
/* Flex-wrap also have nowrap, wrap & wrap-reverse */
/* Nowrap will make the elements width reduced on screen size */
/* Wrap will take the elements width and make elements fit to screeen based that width */
/* Wrap-reverse will behave same as wrap but the elements will place in reverse direction, means bottom to top */
}
Enter fullscreen mode Exit fullscreen mode

There are still lot to learn about grid or flex,

but we cannot swap media queries by using grid or flex box, these are only limited to few styles, but rest we have to use media queries


thank you for inviting me to the discussion, I will definitely look into it

Collapse
 
trailblazer1902 profile image
Adegboyega Blessing Olamide

I am coming conversant with the flexbox. Would try the grid too

Collapse
 
cmuralisree profile image
Chittoji Murali Sree Krishna

Yeah flexbox Is good, it's older than grid, but also the most searched stuff in caniuse.com,

Bur grid is newest entry to the web and it has a lot to offer than flexbox, but also bit complicated than flexbox,

flexbox needs to be combined with queries to make it responsive,
But grid mostly doesn't need queries because of inbuilt layouts and other attributes.

These were upto my knowledge, I might be wrong

Thread Thread
 
trailblazer1902 profile image
Adegboyega Blessing Olamide

I would love you to share how to write grid without queries please.

Thread Thread
 
cmuralisree profile image
Chittoji Murali Sree Krishna • Edited

As I said Previously grid cannot entierly used without media queries, but in few cases we can stop using queries,

Ex: grid-template-columns: using this we can make a page like {youtube, ecommerce, or few blogs} responsive without using queries, this will make the elements inside it to be take the given ammount and renders it on the screen based on screen size,

link : codepen.io/murali-sree-krishna/pen...

you can alter the number of divs or components displayed on the screen by increasing the size in "grid-template-columns: repeat(auto-fit, minmax(size, 1fr));"

These were upto my knowledge, I might be wrong

Thread Thread
 
trailblazer1902 profile image
Adegboyega Blessing Olamide

Very helpful buddy... Thanks

Collapse
 
ashkanmohammadi profile image
Amohammadi2

When it comes to responsive pages, the first thing I remember is css grid.
I've always struggled using media queries for various reasons.

Collapse
 
mayankav profile image
mayankav

@ashkanmohammadi Thanks for taking out time to read. Its good to hear about Grid when discussing responsive websites but just to mention, responsive websites aren't as simple as "big stuff on bigger screen and smaller elements on smaller screens". You will need media queries when you want to hide/show some component based on the screen size for example. This is only one example. Remember grid can not rule out the application of media queries. Cheers :)

Collapse
 
ben profile image
Ben Halpern

Nice post, thanks!

Collapse
 
mayankav profile image
mayankav

:)

Collapse
 
mickeydluffy profile image
Red Emperor

I enjoyed this very much.

Collapse
 
mayankav profile image
mayankav

@mickeydluffy I am glad you liked it :)

Collapse
 
rakeshkb profile image
Rakesh KB

Nice post. I enjoyed reading this. Thanks!

Collapse
 
mayankav profile image
mayankav

@rakeshkb glad you did, thank you :)