Hey everyone! π This has been the talk of the hour since grid and flexbox came into the world with their perky aspects of making your content flow responsively around the viewport. π±
However, it can be frightening too π¨ for those who are starting out on these advanced CSS technologies like grid and flexbox, who may be able to design good-looking layouts π€© but not make them responsive-without the need for media queries.
π€·ββοΈ Stuck? Media queries are your savior.
It turns out that writing media queries were like the de facto standard of making responsive design until the era of floats and clearfixes. However, after the launch of grid and flexbox, this hasn't been so. People have come up with ways of not writing lots of media queries and still getting their page awestruck responsive look. π€
So, shall I stop writing media queries anymore? π As a matter of fact, no, because media queries will always be there for you if you're stuck somewhere. They are always at your service, but the question is are they really worth writing in that place? If you find no other way to make it, here's your @media query. πββοΈ
π Where to Start?
Well, that's an open question. I won't walk you through building the next Twitter or Facebook in this blog post, rather give you a simple analogy of the things you'll need in order to make things responsive. Mind the words, simple. Yes, you've got this. πͺ
I want you to have a basic knowledge of flex and/or grid for this, or even the idea of what they are or how they work. You can always come back here after having an idea.
πΈ Let's Get on Grid.
How to set up the grid structure?
We know after writing display: grid, we need to define the rows and/or columns for the layout. As we are making a responsive layout here, which is dynamic as to fit various viewports this can't be something static like in pixels or rems. We need some grid magic here. π«
P.S.: 1fr means one fraction of the total available space.
Believe it or not! π± This above line of code is all it takes to set you up for a basic responsive layout such as the one down below. Let me tell you, you also don't need to define any rows as the grid figures it out automatically. π€ Apart from this, you might wanna add a custom grid-gap to give some beautiful whitespace among them.
ProTip: You can change viewport of codepen, by clicking one of 0.5x, 1x and 2x.
The Original Grid Layout
Of course, there are some additional styling here required to achieve this, but I think grid was the trickiest part. We've just given some styling to all items here to give it a box look! π₯³
π Why auto-fit every time?
Huh, it's not much every time, but there is also one property called **auto-fill** which you can use according to your requirements.
Difference between auto-fill and auto-fit
The auto-fill makes more columns of its size when the viewport is increased in width, rather than fitting to the viewport whereas the auto-fit does the opposite. It stretches its items to obtain the full viewport width. So you can now use, any one of them as per your requirements.
Further reading on this down below.
β‘ Let's get to Flex
Flexbox is the one-dimensional containers which can prove quite amazing for layouts that only need flow in one direction. So it definitely fits into our use case.
PS: Although the key here isn't making the whole webpage responsive without using even one media query even if it does make a single section of the page responsive it's worth it.
β¨ The Amazing flex-wrap Property
This is the line, that makes everything as it should be. So, flex-wrap is a property described on flex containers that decide whether the flex items are forced to stay in a single line or can be flown to multiple lines, i.e. responsive style. π
Properties of flex-wrap
So, in our case we are going to use flex-wrap: wrap to wrap the items in the flex container to give a shiny little responsive feel to our section. We also use a tiny justify-content: space-around to give a more symmetrical look. π
π Can I make responsive layouts now?
Yep. You have learned the concepts behind making awesome layouts. You can start from my codepens above, just fiddle around with the code and then replace the colored blocks with your contents and go slowly. You'll get there. Remember, you always have the @media queries at your disposal, so if you really need them, feel free to use.
π Further Reading
- Fill or Fit? Whatβs the difference?, by CSS Tricks
- Flex Wrap, by CSS Tricks
- I strongly recommend watching the channel, Layout Lands by Jen Simmons.
- Realizing Common Layouts using CSS Grid Layout, by MDN Docs
If you liked this post, you might love what I share as well on Twitter. Let's catch up! β€
Top comments (11)
Thank you for this, really needed this
I 'm making use of all this right now and it's a wonder π If anyone has trouble understanding auto-fit and auto-fill, they explain it very well on this site. Auto-fit auto-fill explanation
This is a nice flex refresher, but there's not a lot of practical examples here. I recently pushed a design live where I use both flex and grid and media queries are still needed in order to allow for different layouts based on screen size. I know you say here that media queries are still here, but I just wanted to point out that I don't see anyone really eliminating them either unless you're doing really basic layout stuff.
I see your point, and you're absolutely right. When designing we might feel like its not a tough nut but while the actual coding there might be a point where it can be frightening, to do everything without media queries. However, even if we're making a small section responsive without media queries (which was never possible in the past), I think that's worth it.
Yes! Thank you for your post as well, it is a great resource!
I used to dislike working with CSS but I learned flex, still learning, but now it makes more sense.
Haha true though! It goes the same for me as well and after wrapping my head around grid, I finally felt like css is my jam. π
"wrapping my head"
Pun intended?
Umm...nah, I just meant it was challenging for me to understand grid, as there are so many properties with it which didn't make any sense at first.
I really liked your explanation of grid template column. I find grid usually very hard to consume
A brilliant read, thanks for this refresher Tulsi.