Is this an acceptable way to make grid "responsive"?

HTML-CSS
#1

I’ve CSS-tricks in front of me but find it a lot to take in.

Anyway here’s my grid as you can see I want the desktop version to collapse down to a column view at 1000px. The same way you might use flex-box to change direction from row to column or wrap.

Would this be an acceptable way, any input advice is greatly appreciated. I feel there must be a much simpler way than what I’ve done in media queries with ’ grid-template-areas:’ and writing out everyone’s position.

Bonus question: At what size would you scale down the ‘desktop’ view? I usually do all mine at 1000px for no other reason as that’s when you start to reach small devices. So everything <1000px usually gets the ‘mobile column layout’. I still need to research this more.

Cheers!

desktop-design
desktop-design1440×900 123 KB
mobile-design
mobile-design375×1966 119 KB

#2

I would encourage you to stop thinking in pixels and embrace the em (or rem if you prefer). When you stop being constrained by px then it allows the content to determine the break points, not some arbitrary px widths that you try to squeeze your content into. Also, using em allows your design to take into account both the view port width and the text size. This is very important for proper accessibility.

I’ve put together a demo of the challenge to demonstrate this concept: http://flowersandkittens.epizy.com/grid/grid.html.

Make your browser as skinny as it will go and then gradually widen it until you have three columns to see how it transitions from a narrow to wide display. Now while at the wide view manually increase the text size to see it transition back to a narrow display. There is not one px unit in the CSS. It’s all ems and rems (and a few percentages for the grid columns). Even the CSS break points are in em.

It is actually quite liberating to do your layouts this way. I never once worried about how things are going to look in this particular mobile device or that particular wide screen desktop browser. You can pretty much forget about all of them. The only thing I concerned myself with is how much room I wanted each of these boxes to have in order to display their content, and I set my break points accordingly to make sure that they always had at least my minimum width requirement. This is what I meant when I said let “the content determine the break points.”

The other thing I highly recommend you always do is use a narrow-first approach. Narrow your browser as skinny as it will go and style your page at that skinny width. This will be your base CSS. Then you can gradually widen and add break points as necessary. It is almost always easier to start narrow and then work your way wider than vice versa.

1 Like
#3

This is very helpful, thanks for your time.

I usually use REMs but still don’t truly understand them so will go back to the drawing board and reset. I’m gonna do some more research into them. I hear REM are a little easier to use due to not having to worry about them growing exponentially.

One thing I am confused about is using narrow firest approach when using flex-box/GRID. You choose a narrow start point and build from there but how are you doing flex/grid? I can see your page breaks at around 400px and transforms into the grid layout.

Am I essentially using media queries for everything above my mobile first approach i.e @media (min-width: 20rem) } my main desktop/grid content will go here {

My challenge states create a mobile design at 375px and desktop at 1440px.

Thanks once again.

#4

Using the narrow first approach I am not initially using any type of layout (i.e. I don’t set the display property at all). <article> elements are block level by default so they will automatically stack on top of each other in one column. That’s another advantage of using a narrow first approach, your CSS will usually be much simpler because you can take advantage of all the default behavior.

Ya, I was afraid of this :slight_smile: If your challenge has goals that are stated in px then I guess you have to use px. But in the “real world” this is not a good idea.

1 Like
#5

Thanks for explaining this, makes a lot of sense. I also noted your use of ‘article’ & ‘section’ something which confused me before before after seeing your HTML and watching a few vids it’s a lot clearer and as you say, a bonus that they are block elements.