Discussion on: The Key Element to Responsive Websites

[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