
Flexbox and Grids: your layout’s best friends - reneherse
https://aerolab.co/blog/flexbox-grids/
======
boubiyeah
Some quick rants.

CSS is almost as bad as PHP when it comes to naming. Most flex related
properties are prefixed with flex-; but some aren't (align-items, etc) so you
now have tons of non prefixed properties that actually only work within a very
specific context (vertical-align, etc) and there are no compilers to tell you
which combinations don't make sense or whether you have redundant properties.

IE11 has tons of bugs with flexbox; I had to remove a flexbox layout earlier
because of that crappy browser (it ignores explicit/inline width/height set on
flex children).

Otherwise it's a great tool if used sparingly (heavily nested flexbox elements
with lots of special properties start to become a bit hard to follow)

~~~
lwansbrough
I was using VS Code earlier today and used vertical-align in some case where
it didn’t make sense and VS called it out. Such things do exist!

But I agree with your points. Despite its flaws, it is probably the best thing
out there for creating visual layouts from code.

~~~
sillysaurus3
Webstorm is absolutely incredible. Everyone should try it. Seriously, `cd
your-app && brew cask install webstorm && webstorm .`

Best IDE ever. Better than emacs. And I've loved emacs for a couple years, and
Vim for 10 years before that. Webstorm even comes with a Vim plugin.

IntelliJ is really rocking it. Webstorm for webdev, Cursive for clojure
([https://cursive-ide.com/](https://cursive-ide.com/)), PyCharm for python
([https://www.jetbrains.com/pycharm/](https://www.jetbrains.com/pycharm/))...
every one of those IDEs feels amazing out of the box.

It sounds dumb, but just try it. You'll get hooked on Webstorm and never want
to go back. Example: press shift twice. It pops up a "Search Everywhere" box,
and you can type filenames, symbol names, actions (Rename, etc)... it's
basically helm M-x, but way better.

You won't ever feel like "CSS names are bad!" because you won't ever need to
remember anything. Want to center something? Just type "align" and usually
webstorm pops up autocomplete with the right thing. And that's true in every
context: [https://i.imgur.com/jCAAesF.png](https://i.imgur.com/jCAAesF.png)

All of these IDEs are specializations of IntelliJ IDEA
([https://www.jetbrains.com/idea/download/#section=mac](https://www.jetbrains.com/idea/download/#section=mac)).
They specialize it for web and call it WebStorm, for Python and call it
PyCharm, etc. But all the plugins and settings work in all the IDEs, so really
the underlying awesomeness is IDEA.

At this point I trust IDEA enough to know that if I open any codebase, I can
start navigating it right away. Doesn't matter if it's C++, ocaml, or VueJS.
Typing shift-shift will always let me jump to definitions.

Yeah it costs money, but $13/mo is super reasonble. Dropbox was similarly
impactful on my life, and that was $10/mo.

~~~
yscik
It also has 6000+ unresolved issues reported, a lot of them open for 3-4 years
with little hope of getting fixed. They keep rolling out half-baked support
for the trendiest new JS frameworks, while basic parts of the IDE are falling
apart every day. (For example, when opening the mentioned "Search Everywhere"
dialog, sometimes it just doesn't receive focus. Good luck with that
productivity.)

Meanwhile, after launch, the IDE grabs focus about six times while loading.
Symbol navigation sometimes picks up random unrelated functions from ignored
folders instead of the one sitting right beside the file, because it has the
same name. Want autocomplete for that vertical-align's value? It just throws
up every possible value for any CSS property.

Pretty bad when code editors running in a browser engine are getting more
usable than your paid product.

~~~
sillysaurus3
Yeah, the unresolved bug reports are pretty annoying. I ran into similar
problems trying to get Live Edit working with AngularJS.

 _Symbol navigation sometimes picks up random unrelated functions from ignored
folders instead of the one sitting right beside the file, because it has the
same name._

Even after excluding a directory? If you have autogenerated build folders
(e.g. dist/, out/, etc) you have to mark them as Excluded:
[https://i.imgur.com/E2uXJzu.png](https://i.imgur.com/E2uXJzu.png)

Odd. I haven't noticed that, but I'll watch out for it.

~~~
yscik
This usually happens from node_modules, marked as a library folder, so it's
indexed and might even be relevant, but it shouldn't really be a better match
than the one in the source. And it's not even consistent.

Hope they'll get their shit together, it used to be a pretty great IDE before
these annoyances started piling up.

~~~
sillysaurus3
Ah yeah, I've always excluded node_modules. That's true though, it should
probably be indexed.

------
c-smile
"flexbox horrors":

"flex-basis" \- defines mysterious "main width" (WTF is wrong with just
width?)

"flex-grow" and "flex-shrink" \- grow and shrink relative to what?

How to define flexible margins? Like I want left margin to be twice larger
than right one and all this to be flexible:

    
    
        |---m:2*-------|--1*---|--m:1*-| 
    

?

Effectively flexbox breaks CSS box model that postulates only width/height to
define box dimensions.

Why I cannot say just this:

    
    
        { width: 1fr;
          margin-left: 2fr;
          margin-right: 1fr; } 
    

?

Where 'fr' are __flex units __introduced in CSS
Grid[https://developer.mozilla.org/en-
US/docs/Web/CSS/flex_value](https://developer.mozilla.org/en-
US/docs/Web/CSS/flex_value)

Why two specifications define the same entity (flex weight) by two different
mechanisms - by property and by unit?

CSS looks like Christmas tree where each passer-by (Google and Microsoft here)
adds its own shiny stuff ...

Is this what we name as modularity of CSS?

~~~
sillysaurus3
Just use Bulma. You can drop it into any project.
[https://bulma.io/documentation/columns/sizes/](https://bulma.io/documentation/columns/sizes/)

Your example can be accomplished like this:

    
    
      <div class="columns">
        <div class="column is-half">m:2*</div>
        <div class="column">1*</div>
        <div class="column">m:*1</div>
      </div>
    

There's a good reason to limit yourself to 12 columns: the layout is
consistent across all common screen sizes, whether it's tiny mobile screens or
huge desktop screens. If you have sizes like 1.374fr, you lose a lot of that
automatic layout functionality.

~~~
c-smile
Bulma, as any other grid systems based on % units, is quite limited in real
life.

Check this: [https://sciter.com/images/wt-
langs.png](https://sciter.com/images/wt-langs.png) You see the same HTML
markup there but in different languages. Text in most of European languages is
longer.

This is HTML/CSS Sciter UI that uses _flex units_ and _flow property_ :
[https://sciter.com/docs/flex-flow/flex-
layout.htm](https://sciter.com/docs/flex-flow/flex-layout.htm)

~~~
sillysaurus3
Hmm, why is it limited? I'm interested in hearing your experiences.

~~~
c-smile
Check screenshots above. There is a block having 4-columns layout. Each column
there a) is flexible and b) uses min-content constraint. So widths of columns
are unknown upfront - determined by actual content in grid cells.

That last part (use of actual content) is what you cannot reproduce using %
units in principle.

------
fauigerzigerk
_> If you wish to fully support all browsers (yay!) then I’d highly recommend
using feature queries to provide an alternative layout for browsers that don’t
support Grids or have an older syntax._

How does that not translate into "Just do all your work twice!"?

~~~
RobertoGonzalez
Since CSS grids are mostly used for the global page layout, the ideal use case
is using it to design complex pages that would be very annoying to make with
other techniques, and on older browsers fall back to a much simpler design
with flexbox or floats.

Since those fallbacks only require a handful of lines of CSS, it only takes a
few minutes to get the compatibility to almost-perfect, and you can get a
better design in front of most of your users very quickly. To me at least it's
a solid mix of design freedom and development speed.

~~~
fauigerzigerk
If you have a good reason for complex pages your solution is only viable once
the share of old browsers has dropped below, say, 5% to 10%, depending on your
niche.

What's actually going to happen is that most people will layer JavaScript
frameworks on top of HTML and then we're going to complain about the huge
performance and memory overhead of JavaScript heavy websites.

------
JepZ
I agree that flexbox and grids complement each other, but I doubt that grids
are ready for product. I mean it is nice that all major browsers have a decent
support in the newest versions, but production ready includes for me that
older browsers (without support or major bugs) are not common anymore (~ <5%).

As far as I can see it it is currently scored at ~75%:
[https://caniuse.com/#search=grid](https://caniuse.com/#search=grid)

~~~
onion2k
You don't have to make pages that look identical in every browser. Make
something that _works_ for everyone and then use newer browser features to
make it as good an experience as possible depending what features are
available. CSS even has the "@supports" feature for doing it -
[https://developer.mozilla.org/en-
US/docs/Web/CSS/%40supports](https://developer.mozilla.org/en-
US/docs/Web/CSS/%40supports)

~~~
c-smile
If to speak about layout methods @supports will not help you but will force
you to do the job twice.

If you can do your layout without flex boxes why do you need to create second
version with them at all?

~~~
onion2k
_will force you to do the job twice_

That's one way of looking at it. I prefer to see it as writing features that
only certain users will benefit from. In the case of layout, I tend to give
users with older browsers a much more basic, linear flow (just making the
semantic HTML work really), and then add in more complex layout using what
tech is available. That's not really doing the same work twice in my opinion.

------
amatecha
These "Grid by Example" videos by Rachel Andrew are an excellent intro to CSS
Grid:

[https://www.youtube.com/watch?v=Dz9BzY21Zks&list=PLQkVA6z3dF...](https://www.youtube.com/watch?v=Dz9BzY21Zks&list=PLQkVA6z3dFvbnBJetfYDAF3-cG_ubgdZR)

Highly recommended for anyone who's not familiar and wants a quick
introduction -- each video is just a few minutes long. :)

------
purple-dragon
I was able to finally start using grid in production for a new project a
couple of weeks ago. It made page layout a breeze and my html and scss are so
much tidier and easier to read. Flexbox still has its place as the article
points out, but abusing it to do 2-dimensional layout didn't feel any better
than doing the same with older techniques.

~~~
irrational
My understanding is Grid is designed for whole page layout, while Flexbox is
designed for sub-page or component layout.

~~~
purple-dragon
Yes, but before grid was available people did some funky things to build
responsive grids (like using a flexbox column containing flexbox rows or using
a lot of repetitive media queries).

------
IgorPartola
Is it now possible to do a responsive CSS-only layout a la Masonry/Pinterest,
with the correct order of elements using this?:

    
    
        [1]  [2]  [3]
        [4]  [5]  [6]

~~~
gsnedders
No, you can't, because the position of each item depends on all the previous
items.

Flexbox only deals with a single row at a time, whereas masonry doesn't really
have a notion of a row (given the 4th item in each column can be at very
different places, depending on the sizes of the items above). Grid requires
you to bind things to an actual grid, so you still can't do masonry (for
similar reasons). The closest you can do is using multicol, but that's then
top-to-bottom then left-to-right instead of left-to-right then top-to-bottom.

Note that this is mostly thinking about unequal height items (which is the
common case of masonry); equal height you can do with floats yet alone more
recent layout modes.

~~~
IgorPartola
Thanks for the rundown. That’s unfortunate. This might be another case where
browsers will eventually implement yet another layout method (how many are we
up to now with floats, tables, columns, flex box, grid?) as soon as these
layouts are replaced by something new.

~~~
gsnedders
Masonry is something somewhat fundamentally unique given it relies on how
things flow across both dimensions in a specific way; there's been some vague
talk about extending Grid to support it (but nobody's actively working on
things like that for now, even subgrids have gone a bit quiet), but probably
more practically we'll stick to doing complex layout modes with a limited
scope in JS (and hopefully soonish with Houdini and avoid much of the costs
associated with current ways of doing layout in JS), given solving things like
Masonry in a general way is hard (and relatively unclear that the gain is much
for the amount of work involved).

As for number of layout modes, it depends on how you count. Roughly: block,
inline, table, positioned, flexbox, and grid. Multicol doesn't actually
introduce a new layout mode, it just functions in a similar way to
fragmentation when doing layout for printed media, just fragmenting across
columns instead of across pages.

------
crush-n-spread
Most everything with CSS Grid is broken on Edge 15, which is what most Edge
users are running. Thus Grid is not something you should be putting in
production.

[https://caniuse.com/#feat=css-grid](https://caniuse.com/#feat=css-grid)

~~~
michaelmrose
The same site says virtually nobody, aprox 2-3% is using edge.

You either have to go all the way back to supporting IE11 and ignore
everything not supported by 2013 microsoft to capture another shrinking single
digit percentage of possible users until they progressively die of old age or
ignore Microsoft stuff.

Alternatively start providing a slightly degraded interface with fewer
features and a banner. Our website works best with a modern browser with links
to up to date edge, firefox, and chrome at top of page. Preferably with a
notice regarding dropping support for internet exploder sometime next year.

~~~
superkuh
It also doesn't work in the Firefox fork I use. But that's probably an even
smaller market share.

I noticed this when Mozilla recently resigned their add-ons site and starting
using CSS Grid support sniffing to determine weather to show the real site or
the gimped mobile site. As it is all browsers without CSS Grid are forced to
use the mobile site.

It's super annoying.

~~~
michaelmrose
The new nightly is a huge improvement, maybe you should try it.

------
wolco
I had the chance to see Rachel Andrew speak at laracon. Great presentation and
got me excited about flexbox and grid. I'm still wondering is the browser
support wide enough to implement this in production for the average site?

~~~
irrational
It all depends on if you have to support IE or not:

[https://caniuse.com/#search=grid](https://caniuse.com/#search=grid)

[https://caniuse.com/#search=flexbox](https://caniuse.com/#search=flexbox)

~~~
wolco
Has everyone decided to drop ie? For tech related sites that might make sense
but I think not supporting ie means turning off support to the users who are
older in some cases but more likely to buy.

Where are people drawing the line? Bootstrap 3 still supports legacy browsers
but version 4 and other popular frameworks like bulma use flexbox.

~~~
Silhouette
_Has everyone decided to drop ie?_

Maybe some consumer sites aimed at smartphone-wielding younger audiences can
now get away with dropping IE completely. _Maybe_ some sites aimed at very
small businesses too.

If you're aiming at older individuals or at medium to large organisations, not
a chance.

------
andrewfromx
this is great info, [https://gridbyexample.com](https://gridbyexample.com) is
also good resource

------
chobo2
The article does not really say what to use if something does not support
grids? should your fallback be flex box? Also IE 11 does not support the
@support.

~~~
HaoZeke
My personal favorite is lazy loading a traditional grid system with Javascript
if there's no css grid support...

------
protodaniel
If you enjoyed this article you may find this one interesting too:
[https://tech.nine.com.au/2017/10/25/14/16/unlocking-the-
powe...](https://tech.nine.com.au/2017/10/25/14/16/unlocking-the-power-of-css-
grid)

It's centered on grids but it has 15th Century analogies. ;)

------
kumarvvr
Recently used CSS Grids for layout control and Bootstrap v4 for element
styling. Grids are insanely easy to use and do a really good job of separating
content and presentation.

And I used flex boxes within grids to fine tune layout and it's really awesome
and simple. Verbose, but simpler than using frameworks like BS, Semantic or
Materialize for layouts.

------
amatecha
Be careful using CSS Grid - IE11 supports only an old version[0] of the spec,
and thus is missing many major CSS Grid features like repeat(), grid-gap and
span.

[0] [https://www.w3.org/TR/2011/WD-css3-grid-
layout-20110407/](https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/)

------
fro0116
Is anyone aware of any attempts/plans to bring CSS-grid style layout to React
Native? Either officially or through some library/plugin.

I'd love to try out Grid on the Web side of my app, but it's hard to justify
if it'd mean I have to maintain a separate Flexbox-based layout for the React
Native side anyways.

------
chrisweekly
Fantastic piece. Clarity, breadth, depth, working examples... this is what
“howto”-style, practical posts should look like.

~~~
CamperBob2
I agree, it's a nice piece of work. It makes a better flexbox tutorial than
most flexbox tutorials.

------
dehef
When using conditionnal arrival of dom object (I mean like using ngIf in
Angular or simply using switching display none/block on some block) flexbox
layout seem very difficult to anticipate. For that kind of things I still
prefer using inline-block, that is more predictable.

A tip: Strangely Safari tend to need flex-basis value everywhere

~~~
gsnedders
> A tip: Strangely Safari tend to need flex-basis value everywhere

Most of the Safari issues should have been fixed in Safari 11, FYI. (The
implementation of flexbox was largely copied over from Blink.)

------
yardshop
Sure, grid and flexbox are cool, but when is the CSS Cute Cartoon Faces spec
coming out!?!?

------
lucaspottersky
i've just fell in love with Grid's pragmatic approach!

even if it doesn't cover specific edge cases, its simplicity pays off.

------
sAbakumoff
this thing does not open in safari.

------
smash33
Every page doesnt have to look the same in each browser.

------
jbob2000
> If you wish to fully support all browsers (yay!) then I’d highly recommend
> using feature queries to provide an alternative layout for browsers that
> don’t support Grids or have an older syntax.

So basically, write two versions of your layout: the old way, and the new way.
Flexbox and grids aren't ready for production yet.

~~~
Waterluvian
Well, it depends on context. More and more, web tools are being used in a way
where you can control what browser they're running in. Not just Electron, but
also when making UIs for things like industrial tools, where you control not
just the browser, but the hardware it runs on.

~~~
alxmdev
_> Not just Electron, but also when making UIs for things like industrial
tools, where you control not just the browser, but the hardware it runs on._

Wow, is that becoming common these days, using web browser engines to run UIs
on specialized devices? Sounds a little off in the context of industrial
tools, where I'm thinking embedded systems and relatively low-performance
SOCs.

~~~
Waterluvian
Sorry. I realise that I combined words that will sound frightening to some. I
mean non safety critical systems in an industrial environment. For example,
mobile robot health and KPI monitoring.

