What is Flexbox better at than CSS Grid?įlexbox is really good in scenarios when the layout should be flexible in the case the available space either shrinks or grows and it should adapt to its content. And I very much look forward to this technique but in the case of the two column layout we’re talking about, they’re not the best solution either. In the future, we might have Container Queries which are basically Media Queries but tied to the container width instead of the viewport width. But it’s really bad when you’re using components as separate building blocks which can be reused in various places and which have to adapt dynamically to its contents.Ī two column layout component might need to wrap to a single column layout at a certain screen size in one place of your application but in another area of you application the same two column component is located inside a narrow sidebar and it has to switch to a single column layout much earlier. This is good enough for changing the overall layout of a page from using a single column on a small screen device to using more and more columns as the available space is growing (which is exactly when you should absolutely use CSS Grid and Media Queries).
One of the biggest problems of Media Queries is that they’re tied to the viewport size. But with CSS Grid, oftentimes you have to use Media Queries if you want to change the layout of your page in the case the content does not fit anymore on smaller screen sizes – it’s oftentimes not very flexible in that regard. Let’s say you have a header, a sidebar on the left, the content area, a sidebar on the right and a footer, that’s what CSS Grid is good at. Although there may be some overlapping in functionality, they both do different things very well.ĬSS Grid is best suited for the overall layout of your page. CSS Grid is not meant to be a replacement for Flexbox. Tables are fine for displaying tabular data and floats are fine for text floating around an image or some other content inside a box, but that’s it.įlexbox on the other hand isn’t going anywhere. First of all, luckily, Table- and Float layouts are a thing of the past. The thinking of many frontend developers goes as following: Table layouts < Float layouts < Flexbox layouts < CSS Grid Layouts. Next, you might think, now that we have CSS Grid, this must be easy to solve, right? Why CSS Grid isn’t a panacea to all problems Your first instinct might be to use Media Queries, and you’re right, you kind of can solve this problem pretty quickly using Media Queries, but it’ll be a fragile solution. But responsive design, as we all know, has changed everything (thanks Ethan Marcotte).Ĭonsidering all kinds and sizes of devices, which might be rendering our layout, this becomes a much harder problem to solve.
Sure, it’s straightforward to do, even with ancient methods like using Tables or Floats, and, as we can see in the tweet I’ve linked above, it’s even easier to do with modern technologies, assuming your website is always the same width (ahh. Some people might wonder: what’s so special about this, isn’t this quite easy to do with CSS Grid, Flexbox, Floats or even good old Tables? Yes and no, but in the days of responsive design: mostly no. Why is this even a problem to think about? This reminded me of my journey of creating a two-column layout featuring the image left / text right, text right/image left pattern, I’ve gone through very recently. Quick example of an alternating two column layout made with CSS Grid: /IwQFyiyh6l- Benjamin De Cock 4.
#Two columns responsive layout how to
Last week a Tweet by Benjamin De Cock about how to achieve a two-column layout with CSS Grid popped up in my timeline.
0 kommentar(er)
