DEV Community

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

Read full post

Chittoji Murali Sree Krishna • Jun 21 '21

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

But you also do it with media queries in css

mayankav • Jun 22 '21 • 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 :)

Chittoji Murali Sree Krishna • Jun 23 '21 • 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;
}

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 */
}

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

Adegboyega Blessing Olamide • Jun 22 '21

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

Chittoji Murali Sree Krishna • Jun 22 '21

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

Adegboyega Blessing Olamide • Aug 30 '21

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

Chittoji Murali Sree Krishna • Aug 31 '21 • 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

Adegboyega Blessing Olamide • Sep 1 '21

Very helpful buddy... Thanks

Amohammadi2 • Jun 21 '21

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

mayankav • Jun 22 '21

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