Discussion on: The Key Element to Responsive Websites

[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

[Adegboyega Blessing Olamide]

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

[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

[Adegboyega Blessing Olamide]

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

[Chittoji Murali Sree Krishna]

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]

Very helpful buddy... Thanks

[mayankav]

@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]

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