Hacker News Reader

Comment by reaperducer | Hacker News Reader

grid is the most attractive and powerful option

I like grid, but I think too many people believe it's the cure-all for everything.

For me, grid is not an option. The eight web sites I currently maintain all have to support IE11, so no grid.

Plus, grid doesn't handle certain design elements as well as Flexbox, or even inline-block do. There are certain design guidelines specified by certain government agencies and the consultants I work with that are simply not possible in grid.

I use grid in a few of my personal projects and it's useful for those. But grid is just another tool, like Flexbox.

As for Bulma, I watched the video and it doesn't appear to be anything special to me. It doesn't seem to solve any problems that a dozen other CSS frameworks do.

Also, if you're going to put out a 2:43 pitch video, at least make your fake web site look interesting, not like the other 542,234,280 other identical-looking Bootstrap web sites out there.

View on HN

> The eight web sites I currently maintain all have to support IE11, so no grid.

IE11 supports an older version of the CSS Grid specification; autoprefixer makes supporting it not trivial, because it lacks some useful features of the final spec, but perfectly achievable. And it’s not really any buggier than IE11’s flexbox support.

But I agree that Grid is not a panacea. Almost every “CSS Grid lets us do this!” remark that I’ve seen was already possible with Flex, and most of the remaining cases were not desirable anyway.

There are definitely cases where Grid is great and can do things that would have been somewhere between a nightmare and impossible to do with other layout techniques. The main example I find in real life regular web design is responsive design where you wish to display things in a two-dimensional layout, but interleave items when reducing it to one column on smaller screens. An example of that is the hero area I did for https://www.topicbox.com/, where the video moves, on small displays, into the middle of the content from the other column. You can’t really do that with other layout techniques.

Out of curiosity, could you give an example of a design guideline from a government / consultant that's not possible in grid?

Since I'm not on my work computer, I can't cite any of the documents. But a lot of it has to do with button and box alignment, especially when there is an unknowable number of elements, each of unknown length. As mentioned in my previous comment, grid isn't possible because I have to support a sizable number of IE11 and WinXP visitors.

One example of where things fall down in Flexbox is when you have a number of boxes/buttons in what is, to the user, a grid. If you use justify-content: space-around to match the designer's specifications, you end up with orphans centered in the last row.

To meet ease of reading guidelines, those orphans should be left-aligned. I think it looks like low-grade dog food, but there's a lot of eye-tracking research that shows people ignore items centered in the last row because they think it's decoration, or an ad. If it's left-aligned, that signals that it's part of the rest of the grid.

It's in these cases that inline-box is still the best way to go.

Speaking of ads, one thing I've learned in the last two years from all these research studies is that pretty much anything put in a right column is ignored. People have become inured to ads there that they nearly always assume that content is an ad, even if it's navigation. So one of the big guidelines is that navigation is always either 1, front-and-center; 2, top-line; or 3, left column, even in right-to-left languages.

I’m on mobile so I can’t verify this, but I think you might be able to accomplish what you want by using auto margins on the last child of the flex container? Auto margins have some really cool by-design interactions with flexbox. More info: https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826...

What’s stopping anyone to use flexbox and grid together? It’s perfectly fine, you can even throw a couple of floats into the mix.

Reply on news.ycombinator.com