![]() ![]() ![]() I’m not the world’s biggest fan of the 1D vs 2D differentiation of grid vs flexbox, only because I find most of my day-to-day usage of grid is 1D and it’s great for that. Chris Coyier points this out in his contribution to his own Twitter thread: To conclude, if you don’t want rows to line up, definitely go with Flexbox.īut does it follow that Grid is only good at building 2D layouts? Not necessarily. That said, doing so would only give you the appearance of a Flexbox kind of layout, but certainly not its intrinsic behavior. What it means is that you’ll have to write some extra code to get Flexbox to behave like a grid and you’ll have to span each of the Grid items individually to achieve the kind of flexi-looking layout that you see above. However, it doesn’t mean that you can’t build a grid using Flexbox or that you can’t get your Grid items to be of different lengths. Not only in the second dimension (which is easiest to talk about), but also in the first dimension.Īs you shrink your browser window, check out the difference between the Flexbox-based and the Grid-based layouts below:ġd-v-2d-flexbox-grid by SitePoint ( CodePen.Īs the container shrinks, the grid items remain perfectly aligned, while the Flexbox items flex their dimensions and alignment with respect to each other on the basis of the available space. Content will line up from one to the other, as you ask it to. ![]() On the other hand, if you want items to just stack up so that each line is independent of the others in terms of length and alignment, then Flexbox is your best friend, simply because that’s what it does by default.Īs Jen Simmons makes clear in the same Twitter thread: If your design needs items in the grid to line up in columns and rows, not only is Grid perfect for the job, it’s the only tool that does so by default. This is important to the extent that it points to a fundamental rule of thumb that comes into play when deciding which one to use when. Page-level layouts, as well as inner components, might need a grid-like structure. Two-dimensional versus one-dimensional layoutĪs Rachel Andrew makes clear in the above referenced Twitter thread:įlexbox is for one dimensional layout. This specificity that Grid possesses is a powerful factor in deciding when to use Flexbox or Grid. And this is the magic of Grid: it lays out web element both horizontally and vertically, by default, be it page-level elements or component-level elements. For example, in the demo below, the form is a grid container and its elements have been laid out using CSS Grid properties.įorm-with-css-grid by SitePoint ( CodePen.ĭespite the fact that the Email and the Password labels are of different lengths, the form fields line up perfectly, both horizontally and vertically. It turns out that Grid is also great when creating components to be placed inside the macro, page-level sections. However, the question remains: was it born just for this? Grid, on the other hand, was simply born for this. But creating a grid with flexbox has never felt really “flexy” and has never come without a few headaches. You can do page layouts with Flexbox - and indeed, that’s what most of us did before Grid entered the scene. In fact, I wouldn’t have any doubts as to which technology I’d use when coding up a whole page layout. “Grid for page layout and Flexbox for components” is perhaps the most intuitive answer one could give to this question. Grid for page layout and Flexbox for components ![]() Here’s a Twitter thread Chris Coyier launched a couple of years ago basically asking this same question:įor y'all that have an understand of both CSS grid and flexbox, what's your favorite way of explaining the difference?įor y’all that have an understand of both CSS grid and flexbox, what’s your favorite way of explaining the difference?Īs you can expect, a number of interesting answers did crop up, most of which I’ve sorted out under the headings below. Having had a taste of what both Grid and Flexbox are capable of, it’s time to go back to the original question. Grid or Flexbox: Which One Should I Go For? CSS-Tricks’s “ A Complete Guide to Grid”.SitePoint’s “ Introducing the CSS Grid Layout” and “ Creating Layouts with CSS Grid” tutorials.Once all the sections are in place within the grid, here’s what it looks like:įor more details and handy cheat sheets, check out the links below: Having binged on floats and third-party layout libraries for years, web designers and developers welcomed this new CSS module with enthusiasm, although it took a little while to get used to its alien syntax and acquire full command of its inner workings.Ī flex container can be defined in a CSS document like so. CSS Flexible Box Layout, or Flexbox for short, started to appear in browsers around 2012. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |