Hi,
If you design your website layout with display: grid;, is that enough to make it responsive?
Basically, I don’t have a feel for when to use media queries so I am looking for a good standardized approach for web development.
Hello, Car.
Using CSS grid is more of a preference, than an advantage/disadvantage, in terms of responsiveness. Personally, I find using grid more controlled, and I always get what I want, but I am just used to it.
On the other hand, flex I find to be only more useful, when it comes to organising an unknown number of elements on a page. So, I often end up using both.
The responsiveness comes from correct use of values such as % or em. These go hand-in-hand with media-queries to determine the layout you want.
I suppose, if you do not care about specifics, flex is the way to go - ensuring no element escapes your page. But, if you want a specific layout at any time, I would recommend using grid.
Hope this helps.
3 Likes
Hello!
I would say that it depends.
Websites, unless they’re quite simple, are composed of various components: buttons, images, containers and text.
When you use a grid you define only how containers behave, but you’re not telling how the rest of the elements behave. For instance, on a 4K monitor you’ll need a bigger font and, probably, a different structure for the website; whereas on a mobile device (720p) you cannot have the same text size.
The same goes to images: higher resolutions will (probably) fit the full sized image, whereas on mobile it will be too small or distorted (there are techniques that may help, but you’ll have to test).
I hope it helps 
,
Regards!
1 Like
Would you then say using %/em values wherever possible is best practice for responsiveness?
I forgot menus! How does your menu look on mobile? How does it behave? Does it hide behind a button that expands or maybe it’s always a button?
Those are decisions you have to take into account whenever you design your site.
Draw your site using The Gimp/Inkscape or Photoshop/Illustrator to give you an idea of how it will look.
1 Like
For responsiveness, definitely. There are debates about em vs rem, but I can never be bothered to go into that.
1 Like
Yes, I found that sketching out the layout makes it easier to plan my code. I guess I still have a lot of practice to get a feel for when to use what. Will do some reading on grid vs. flex. By the way, is grid the more recent technique or is it flex?
Grids are the newest.
I recommend you read this Free Code Camp’s article on the differences between grid and flex.
We’ll be here if you have further questions .
1 Like
Grid is the newer of the two. That said, it’s not entirely Grid vs. Flexbox. They two handle layout very differently, and one isn’t meant to be a replacement for the other (not really, anyways). Flexbox handles horizontal layouts like a champ, as it’s strictly one-dimensional. Where Grid handles overall structure better, as it’s both horizontal and vertical.
Both have their place in modern web design. And they even work well together.
1 Like
yes it is enough for responsive website
1 Like
Yes, I think using grid for the large-scale layout is best and then using flex for one-dimensional items in the grid is a good approach. Will try it out today with the Technical Specification Challenge!
rem should be the best practice for unit of measurement because it has more of a relative entity than em.
1 Like
No.
You can’t just swap media queries out for CSS Grid. That is not how it works. You should learn how to use media queries no matter what layout techniques you use. You will need them.
Both grid and flexbox have ways of lowering the number of media queries needed. Like using flex wrap or grid functions like repeat(auto-fit/fill, minmax()). This will however not eliminate the use of media queries.
Take the time to learn them, because you have to.
1 Like
Thanks everyone for replies. I have opened another topic in “project feedback” for my JS technical documentation challenge. I utilized grid and used 1 media query. Would appreciate your thoughts on how responsive the website is and how I could improve my methodology!