17 ms·

Once you wrap your head around how grid works (especially with fr) it's a godsend. I'm glad css is maturing in a way that actually meets the layout needs of a d

• duxup 7y ago
  I keep dipping my toes in grid but not long enough to commit and I run back to flexbox. I feel like flexbox was such a savior already that I'm still comfortable there.
  • galaxyLogic 7y ago
    Yes flex is cool because you don't need a new type of element just add the property "display: flex" to anything. I think Grid is a bit more complicated, more to learn. CSS is getting better but at the same time it's getting more complex in total.
    • duxup 7y ago
      It makes sense. Flex was finally FOR (I think it was for) layout, from the start. It's simple, works for a lot of use cases. Grid is for layout, but serious layout. It's good to have both.... well anything really considering the history.
    • bobthepanda 7y ago
      Grid doesn’t really use a new type of element either. I’m just happy to be able to layout things 2D in a way that isn’t totally bonkers and do weird contrived calculations to make everything fit in the viewport. My only wish remaining is a unit that is like fr for grid layout but can be the same value for both row and grid (so an equivalent to vmin for viewport)
    • nicoburns 7y ago
      I actually think grid is simpler. The flex properties are confusing and make common cases complicated. Grid fits my mental model of what I am trying to achieve pretty much 1:1.
  • castis 7y ago
    Oh man if you like flexbox, I'd definitely take the time to really get in there on grid. Learning to mix the two together has been amazing.
    • tenaciousDaniel 7y ago
      Yep. I was able to pull off a UI pattern that never would have been possible in legacy css. It's pretty rad.
      • chrismorgan 7y ago
        I’ll bite. In my experience, almost every case where CSS Grid has been touted as enabling something new was actually already possible with flexbox alone. Care to share your UI pattern that I gather uses Grid and Flexbox, and I’ll see if I can reasonably reproduce it without Grid?
        • rossy 7y ago
          I don't know what he's done, but I think an obvious use case is this grid list: https://codepen.io/anon/pen/xNNXBR https://codepen.io/anon/pen/xNNXBR Basically, a list of items arranged in a grid where the number of columns is dynamic depending on the width, items are wrapped dynamically from left to right, each column consumes the maximum amount of space, there's a fixed gap between columns, and the last row is aligned left, not stretched. I had to build one recently, and it was a perfect fit for grid.
          • codedokode 7y ago
            Cannot this be done with just floats or inline-blocks and percentage width? Unlike grid, it would work in a larger number of browsers. Also, I think that tutorials for things like flexbox or grid should include fallbacks for older browsers. Because generally frontend devs simply copy the code from tutorial so if you don't include the fallback, they won't implement it.
            • 7y ago
  • tlrobinson 7y ago
    I can recommend "The New CSS Layout" for getting up to speed on CSS Grid (among other modern and legacy layout techniques): https://abookapart.com/products/the-new-css-layout https://abookapart.com/products/the-new-css-layout It does mention subgrid too.
    • mmanfrin 7y ago
      Looks like the author of that is also the author of this post.
      • thirdsun 7y ago
        You will find her name quite often when you research CSS grids - she's something of a layout and grid expert. If you'd like to read more, check out some of her fantastic posts at Smashing Magazine, where she's chief editor: https://www.smashingmagazine.com/author/rachel-andrew/ https://www.smashingmagazine.com/author/rachel-andrew/
  • netwanderer3 7y ago
    Though both are used for laying out your content, but Grid and Flexbox serve different purposes though. We can probably still use Flexbox for majority of the cases, but Grid was designed to help with some specific CSS layout problems that only it could resolve.
  • Vanderson 7y ago
    I would suggest finding a single use for grid that flexbox doesn't really do well, and use only a couple properties. Then you will really understand the benefit of grid without having to invest a lot of time. An example I dealt with recently: I needed a header with logo / external link / social icons/ content / phone link. All to layout perfectly, and be mobile friendly. With grid, I used this: (this is rough code to demonstrate the simplicity, I made a codepen demonstrating it properly. [0]) header { display: grid; grid-template-areas: "logo content link social" "logo content phone phone"; } For each of the logo, content, etc... areas you use this to attach it to the specific location in the grid. .logo { grid-area: logo; } .content { grid-area: content; } etc... You end up with exactly what you would expect: +------+---------+-------+--------+ | | | link | social | + logo + content +-------+--------+ | | | phone | +------+---------+-------+--------+ For mobile, I wanted this: +---------------+ | Logo | +---------------+ | Content | +------+--------+ | Link | Social | +------+--------+ | Phone | +---------------+ Here's the only CSS needed for mobile. (or reverse this if you are doing mobile first layout) @media (mobile) { header { grid-template-areas: "logo logo" "content content" "link social" "phone phone"; } } Here's the html: <header> <div class="logo" ></div> <div class="content"></div> <div class="link" ></div> <div class="social" ></div> <div class="phone" ></div> </header> The power to move content around with such simple and clean code like this is amazing. With flexbox you can use the "order" property to move stuff around a little, but not control the exact layout so cleanly and simply. There are tweaks for adjusting the widths of columns and heights of rows, but this is generally all that is needed to get the layout with grid. There is also grid-gap [1], something not possible in flexbox yet. (though Firefox supports grid-gap with flexbox) [1] https://codepen.io/Vanderson/pen/yWWVVZ https://codepen.io/Vanderson/pen/yWWVVZ [1] https://developer.mozilla.org/en-US/docs/Web/CSS/gap https://developer.mozilla.org/en-US/docs/Web/CSS/gap
    • pbhjpbhj 7y ago
      https://caniuse.com/#feat=css-grid https://caniuse.com/#feat=css-grid (92% of users)
  • shawnz 7y ago
    Flexbox can't fully replace grid, or vice versa. In particular, this very feature, subgrids, can't be reproduced with flexbox.
  • nivenhuh 7y ago
    flexbox works beautifully with grid
  • rambojazz 7y ago
    They solve different problems however. They are complementary, not substitutes.
  • robdachshund 7y ago
    Mixing the two is very useful. I typically make headers and footers with flex, build home page grids with grid, and then use flex to space out content in the cells. No more floats, no more percent widths, no more weird nth child tweaks for positioning. Add rems to the mix and responsive design has never been simpler. For grids you can just change from say a 3 column grid to a single column on mobile for most cases. And the best part, no bootstrap.
• codedokode 7y ago
  Sadly the article with examples doesn't provide a fallback for older browsers and as frontnend devs usually just copy the code from tutorials without much thinking, it means that we are going to see a lot of new sites breaking in just 2 or 3 years old browsers. The usual sad state of web development is going to become even sadder. Articles about flexbox have the same problem by the way.
  • robdachshund 7y ago
    I've stopped caring about people on ie or some super outdated browser version. None of my projects have an audience that includes 90 years olds using ie6 on windows xp. I assume my users are on some chrome derivative that is fairly up to date. I'm not going to use this until it's well supported, but I'll have no qualms going so. I certainly am not worried about anything I've used flex or grid for... they've been out for quite awhile now. I'm not sure why we are all trained to think that anything we build has to be compatible with old browsers that essentially no one is using. For most projects, I don't see a point unless you have some really specific requirements.
    • dspillett 7y ago
      > anything we build has to be compatible with old browsers that essentially no one is using I think similarly, with the caveat that anything that might be useful to me at work (current or future day jobs) needs to consider IE11 because there are a lot of people out there stuck using that (we work with banks a lot, while it is increasingly common for recent-ish Chrome to be available too it is not close enough to ubiquity for comfort). This includes anything that I might want to log into myself from a client's site, where I might not be able to use my own device, not just that I might expect/want them to use. > I assume my users are on some chrome derivative that is fairly up to date Be careful just testing in Chrom{e|ium}. We are in danger of heading into what is effectively another period of browser mono-culture, especially now MS have thrown in the towel. I'd at least support "recent Chrome/Chrome-ish and recent Firefox". While chants of "the next IE6" are a bit hyperbolic, if a mono-culture, or something close to one, forms it will create future issues no matter how good are the intentions of the controller of the "winner". I'd like to support Safari too but unless Apple provides a way of running that locally without having to buy their hardware or buy their OS then fight to get it running in a VM that isn't going to happen outside of commercial projects where someone else is paying for the resources to allow it to happen.