GOPHERSPACE.DE - P H O X Y
gophering on hngopher.com
HN Gopher Feed (2017-11-06) - page 1 of 10
 
___________________________________________________________________
Flexbox and Grids: your layout's best friends
240 points by reneherse
https://aerolab.co/blog/flexbox-grids/
___________________________________________________________________
 
wolco - 4 hours ago
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 - 4 hours ago
  It all depends on if you have to support IE or not:https://canius
  e.com/#search=gridhttps://caniuse.com/#search=flexbox
 
    notahacker - 3 hours ago
    With only 70% browser support, you're going to have to have a
    pretty strong reason to believe your audience is different (or
    not to care) to justify using Grids
 
      dictum - 1 hours ago
      Grids are most useful in wider viewports (tablets and
      laptop/desktop browsers).Except for IE11, basically all
      browsers that don't support Grid are outdated mobile browsers
      (pre-iOS 10.3 versions of Mobile Safari, Android Browser in
      older Android, and browsers that are based on Android Browser
      and have high usage in developing countries, like UC Browser)
 
    wolco - 4 hours ago
    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.
 
      irrational - 2 hours ago
      Every website is different. I work for a Fortune 150 company,
      but the site I work on is so narrow in focus that we have the
      luxury of deciding that the amount of people using IE/Edge
      (very very few based on our server stats) is not worth the
      development/QA efforts to support them.This is especially
      nice since none of us have a Windows machine at work or at
      home ;-)
 
      Silhouette - 3 hours ago
      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.
 
dehef - 2 hours ago
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 - 53 minutes ago
  > A tip: Strangely Safari tend to need flex-basis value
  everywhereMost of the Safari issues should have been fixed in
  Safari 11, FYI. (The implementation of flexbox was largely copied
  over from Blink.)
 
crush-n-spread - 4 hours ago
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
 
  lostapathy - 3 hours ago
  I've run it in production, with the ms-prefixed workarounds.  It
  actually wasn't too bad to get that going, but I look forward to
  not needing that.
 
  michaelmrose - 3 hours ago
  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.
 
    nilved - 2 hours ago
    >  The same site says virtually nobody, aprox 2-3% is using
    edge.What?  Do you know how many people that is?
 
    superkuh - 2 hours ago
    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.
 
  ch4s3 - 4 hours ago
  You're making the error of assuming that all web applications in
  production have the same user base and constraints as yours. For
  example, I work on an application that is a companion app to some
  larger domain applications that themselves only work on newer
  versions of Chrome and Firefox. I defacto don't have to support
  IE, as none of my users can use it. Additionally if you make a
  developer focused tool like bug reporting, APM, or log
  aggregation, you can probably ignore IE, if you don't target
  Windows devs.
 
  irrational - 4 hours ago
  Unless, of course, your production site purposefully does not
  support Edge (or IE) as a matter of policy. Fortunately that
  applies to me.
 
JepZ - 1 hours ago
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
 
  onion2k - 54 minutes ago
  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
 
    cvsh - 42 minutes ago
    The problem is that grid is best used for overall page
    layout... which is part of your CSS least amenable to
    progressive enhancement.
 
      c-smile - 34 minutes ago
       Just use  - the best possible Grid
      layout module out there. Works in all browsers, even IE6.
      
 
    c-smile - 37 minutes ago
    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?
 
  raquo - 33 minutes ago
  Re: CSS Grid, caniuse.com seems to be out of date here.MS Edge 16
  was released two weeks ago, and already supports the latest CSS
  Grid spec (allegedly, I haven't tried it myself).---As for the
  remaining 21%, depending on your target audience you might not
  care enough about UC Browser for Android, Samsung Internet, Opera
  Mini, Android Browser, and even IE11, which btw is no longer the
  default browser for Windows (Edge is).Especially if you're
  building a new product, by the time it becomes big enough that
  browser compatibility starts to matter, it will probably be a
  non-issue for CSS grid.
 
jbob2000 - 4 hours ago
> 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 - 4 hours ago
  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 - 2 hours ago
    > 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 - 4 minutes ago
      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.
 
  SippinLean - 3 hours ago
  Flexbox, especially with Autoprefixer, is pretty safe to use in
  production.Grid support is much spottier, but can be safely used
  in production depending upon your supported browsers.
 
andrewfromx - 2 hours ago
this is great info, https://gridbyexample.com is also good resource
 
boubiyeah - 3 hours ago
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)
 
  soperj - 2 hours ago
  For me the worst bugs have been in Safari by far.
 
  andrei_says_ - 15 minutes ago
  Having a significant amount of visitors using ie10 & ie11 rules
  flexbox out for me.So I use Susy grid system (2) and absolutely
  love it.
 
  lwansbrough - 3 hours ago
  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 - 2 hours ago
    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/), PyCharm for python
    (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.pngAll of these IDEs are
    specializations of IntelliJ IDEA
    (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.
 
      donut2d - 1 hours ago
      You've got a JetBrains IDE working with OCaml? What plugin
      are you using with which IDE? The only plugin[1] I've seen
      seems to be 7 years out of date.[1]:
      https://plugins.jetbrains.com/plugin/4986-ocaml-support
 
        sillysaurus3 - 1 hours ago
        I saw that https://github.com/sidharthkuruvila/ocaml-ide
        was pretty recent and assumed that it worked. I haven't
        tried it though.Amusingly someone made a plugin for pg's
        Arc 3.1 code back in '08: https://i.imgur.com/Xe7mvIB.pngIf
        IDEA doesn't support a particular language, it's pretty
        easy to fork an existing plugin and throw together some
        lexer rules.
 
        sillysaurus3 - 1 hours ago
        I just built and installed https://github.com/shawwn/ocaml-
        idehttps://i.imgur.com/hhnvIhT.pngIt looks like it was
        written for 2016.1, but the latest is 2017.3. It's throwing
        an exception, so some of the features are disabled. Still,
        the lexer rules seem to work, and it's pretty
        straightforward to debug the problem.(This is actually a
        great example: Intellij community is open source, and
        that's what's being used to build this plugin. Meaning you
        have access to all the relevant code. Debugging is really
        simple.)
 
      SippinLean - 2 hours ago
      >a "Search Everywhere" box, and you can type filenames,
      symbol names, actions>Just type "align" and usually webstorm
      pops up autocomplete with the right thingVS Code does both of
      these things, and is FOSS
 
        Viper007Bond - 2 hours ago
        VS Code is indeed nice (I use it as my quick file editor)
        but can't quite match the IntelliJ products, although it
        can get decently close.
 
        sillysaurus3 - 1 hours ago
        Here's a more persuasive demo: https://news.ycombinator.com
        /item?id=15514285https://imgur.com/z2euynIhttps://imgur.com
        /vb4uDMwhttps://imgur.com/4Xv4BMbIt's not so much that it
        has X feature or Y widget, but rather that the whole
        ecosystem feels cohesive. With emacs you sort of cobble
        together your configurations until you're happy with it,
        and that's very powerful -- it's why it's so successful.
        But there's something to be said for having "awesomeness
        out of the box". It's why Spacemacs was so popular.I hear
        you about FOSS. I was reeeeally hesitant to throw my time
        into yet another closed source clusterfuck. I grew up as a
        gamedev, and back in 2000 that meant you had to use Visual
        Studio. All of my VS skills are now completely obsolete.
        And whenever I ran into VS issues, I couldn't debug it
        since it was closed source.Two things convinced me IDEA is
        probably worthwhile:1. They're partially open source.
        https://github.com/JetBrains/intellij-community You can
        build that from source and run it, so you can at least see
        how most of the system is architected. You won't be able to
        extend some of the closed-source plugins, but you get some
        of the benefits of FOSS.2. Their tooling is their primary
        business model. When Microsoft lost their VS monopoly,
        Microsoft didn't die. JetBrains' sole focus is making the
        tooling ecosystem work; they're the Adobe of tooling.
 
      amatecha - 1 hours ago
      I've been using WebStorm (and IntelliJ IDEA) for the past
      couple years and love it. I have no intention of swapping to
      any other IDE unless I really have to.  Can definitely speak
      to the extreme convenience of instantly finding
      usages/definitions, "intellisense" of func params, plugin
      architecture, super customizable settings, built-in language
      support and linting/evaluation, refactoring assistance, live
      templates...  Just a godsend, to be frank.
 
      teleclimber - 1 hours ago
      I like Webstorm, it's my primary dev environment.But I can
      not praise its abilities as you do. My experience has been
      mixed. Sure it's cool when it works well, but then its bugs
      are all the more painful. You expect intelligence and you get
      the opposite.Take this bug I reported two years ago:
      https://youtrack.jetbrains.com/issue/WEB-19183It thinks "y"
      is a global if I put "x.y = ..." anywhere in my code.
      Genius!Also, It's lacking in its support for Vue Js. I get
      lots of red squiggles all over my code for perfectly valid
      Vue props, and PostCSS within single-page Vue component also
      is weak (no $variables support).
 
        sillysaurus3 - 1 hours ago
        Hmm, FWIW Vue is my primary stack and I haven't run into
        similar issues. Try this:git clone https://github.com/vuejs
        /vue-hackernews-2.0 && cd vue-hack* && yarn && webstorm
        .shift-shift "Item" should show
        https://i.imgur.com/AV1bbXG.pngAnd `this.$store.` should
        show the proper completions:https://imgur.com/a/pjcNsIt's
        possible that I've been getting along without the features
        that some other editor provides. Does VSCode have better
        Vue integration?
 
          Frizi - 13 minutes ago
          VSCode is indeed awesome for Vue. It supports pretty much
          any lang in any block properly, due to its support for
          embedded language contexts. If you have template
          lang="pug" and pug grammar plugin, it just picks it up.
          Also Vetur extension adds a lot of autocompletes and
          typescript support.
 
          teleclimber - 38 minutes ago
          My problem is more with CSS and template support.Here is
          Webstorm complaining about in a legit Vue v-for statement
          in a .vue single-page component.And second image is what
          it does when I try to use PostCSS
          variables.https://imgur.com/a/BNAa8
 
          sillysaurus3 - 26 minutes ago
          Aha! I see. Do you happen to have a repo I can clone to
          reproduce the problem? I'm interested in fixing
          that.Vue's tooling is context aware. It knows when you're
          within a  tag. I see that there's a PostCSS
          plugin: https://i.imgur.com/JTPlIEk.pngTheoretically, the
          tooling should be able to use that plugin's lexer rules.
          PostCSS already registers itself as a language (pcss) so
          Vue's tooling logic should be: "are we within a           scoped> tag? search for PostCSS tooling; if if none
          found, use vanilla CSS."It already does this for           lang="scss">, so postcss should definitely work. The
          logic happens in https://github.com/JetBrains/intellij-
          plugins/tree/master/vu... if you want to explore it.
 
      yscik - 1 hours ago
      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 - 57 minutes ago
        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.pngOdd. I haven't noticed that,
        but I'll watch out for it.
 
          yscik - 25 minutes ago
          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 - 19 minutes ago
          Ah yeah, I've always excluded node_modules. That's true
          though, it should probably be indexed.
 
      acdha - 1 hours ago
      How's performance? I've used PyCharm about once a year
      historically and kept going back to TextMate 2 or (now)
      VSCode for UI responsiveness.
 
        sillysaurus3 - 1 hours ago
        Mm, good point. WebStorm performance is good, but IDEA is
        noticeably slower. I haven't used PyCharm yet, so it's
        possible performance could be a pain point there. I find
        myself firing up Webstorm instead of IDEA due to slower
        IDEA indexing.FWIW Cursive is a bit sluggish to start, but
        after it's done indexing it feels like the best Lisp
        development environment ever made.
 
          acdha - 1 hours ago
          I liked PyCharm's feature list but the index-the-world
          behaviour definitely like it going back to the pre-SSD
          era. Not a show-stopper for my biggest project but the
          cost for everything else definitely left me hesitant to
          switch.
 
          scoggs - 9 minutes ago
          Sorry, this may be a silly question, but is it possible
          for PyCharm (and other IntelliJ IDE products) to define a
          specific working folder / path for the file index-the-
          world feature to stay within or does it always permeate
          through the entire computers hard drives, just in case?
 
          sillysaurus3 - 1 hours ago
          I had the same experience with a Vim plugin called Jedi.
          It was great, but typing "pdb." would freeze Vim for 5
          seconds. IDEs can definitely try to do too much.
 
  pfooti - 2 hours ago
  I just assumed the naming thing was for properties shared between
  grid and flexbox (such as align-items). It is still pretty
  frustrating to remember that kind of stuff though.
 
  anon335dtzbvc - 3 hours ago
  "and there are no compilers to tell you which combinations don't
  make sense"well thats not quiet true, in purescript you can write
  type-safe CSS checked at compile
  timehttps://pursuit.purescript.org/packages/purescript-
  css/3.3.0...
 
    kccqzy - 2 hours ago
    Does it tell you that align-items by itself doesn?t make sense
    regardless of the value, of the element isn?t otherwise set to
    use display: flex or grid?
 
      teleclimber - 1 hours ago
      I don't know the answer, but I'd be surprised if it did.I've
      also been very frustrated by CSS due to 1) its lack warnings
      and debug errors as mentioned above, and 2) that so many
      properties have side-effects (like setting an element to
      display:flex changes the auto value of min-width for all its
      children[1]).I've started working on something to help with
      this, but it's a long way off (and it may not work at
      all).[1] https://www.w3.org/TR/css-flexbox-1/#min-size-auto
 
c-smile - 4 hours ago
"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_valueWhy 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?
 
  dangerlibrary - 3 hours ago
  In the face of ambiguity, guess.There should be N-- and
  preferably only N --obvious ways to do it.
 
    c-smile - 2 hours ago
    "obvious" is key point here.This    {  width:100px;
    margin-left:1fr }    has clear and obvious physical meaning:
    solid block with the spring of strength 1 on the left of it.So
    the block is attached to the right side of its container. And
    so you don't need all those aligns - flex units can do
    alignment in more flexible ways.That's obvious indeed.But those
    flex-shrink/grow ...
 
  joshribakoff - 3 hours ago
  Your margin scenario is exactly what css grid handles nicely
  (grid gutters)
 
    c-smile - 2 hours ago
    Yes but flex units can be used not just in grid
    context.Consider this:   

Foo 
    bar.

  That  will span free space left in the p
    element from "Foo " and " bar."
 
  Mystrl - 3 hours ago
  Do you mean something like
  https://jsfiddle.net/Mystrl/9uj40kam/1/
 
    c-smile - 2 hours ago
    Close but without those artificial DOM elements.Here is an
    illustration of the idea of flex units:https://sciter.com/docs
    /flex-flow/images/flex-springs.png
 
  sillysaurus3 - 2 hours ago
  Just use Bulma. You can drop it into any project.
  https://bulma.io/documentation/columns/sizes/Your example can be
  accomplished like this:         class="column is-half">m:2*       class="column">1*     m:*1
    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 - 1 hours ago
    Bulma, as any other grid systems based on % units, is quite
    limited in real life.Check this: 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
 
      sillysaurus3 - 1 hours ago
      Hmm, why is it limited? I'm interested in hearing your
      experiences.
 
        c-smile - 1 hours ago
        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.
 
amatecha - 1 hours ago
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/
 
amatecha - 1 hours ago
These "Grid by Example" videos by Rachel Andrew are an excellent
intro to CSS Grid:https://www.youtube.com/watch?v=Dz9BzY21Zks&list=
PLQkVA6z3dF...Highly recommended for anyone who's not familiar and
wants a quick introduction -- each video is just a few minutes
long.  :)
 
fauigerzigerk - 1 hours ago
>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!"?
 
IgorPartola - 2 hours ago
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]
 
  sorrymate - 2 hours ago
  I too would like to know! I have yet to find a way display flex
  rows that are different heights and that align left to right. It
  seems the only options are to align by column, or use Masonry.js
  which seems like overkill. Even Bootstrap 4 only supports column
  layout.Anyone been able to accomplish this with CSS-Grid or
  Flexbox?
 
    IgorPartola - 2 hours ago
    From what I can tell, it hasn't been done with Flexbox alone.
    To get the order right, you have to specify a fixed height for
    each element, making it non-responsive at best. I am wondering
    if grid somehow helps.There is also of course the order
    property, which with some cleverness can re-order elements from
    1, 2, 3, 4, 5, 6 to 1, 4, 2, 5, 3, 6. You'd have to get awful
    clever with it though to figure out how to do this right, so
    still might rely on JS.
 
  akrigline - 1 hours ago
  Sort of https://codepen.io/akrigline/pen/qVaWQoYou can't simulate
  the way items can extend into other rows easily with CSS Grids,
  but the default behavior for children of a display:grid element
  is to flow horizontally into cells until they have to start
  wrapping.
 
  gsnedders - 59 minutes ago
  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.
 
  couchand - 55 minutes ago
  What's the correct order of elements?
 
smash33 - 40 minutes ago
Every page doesnt have to look the same in each browser.
 
chobo2 - 3 hours ago
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 - 3 hours ago
  My personal favorite is lazy loading a traditional grid system
  with Javascript if there's no css grid support...
 
  joshribakoff - 3 hours ago
  A common technique is fallback to mobile first layout
 
purple-dragon - 4 hours ago
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 - 4 hours ago
  My understanding is Grid is designed for whole page layout, while
  Flexbox is designed for sub-page or component layout.
 
    lostapathy - 3 hours ago
    Yeah - they do solve different problems. We recently switched
    our production app to using both (from strictly bourbon/neat
    grids) and it's made life so much simplier.
 
    purple-dragon - 4 hours ago
    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).
 
chrisweekly - 4 hours ago
Fantastic piece. Clarity, breadth, depth, working examples... this
is what ?howto?-style, practical posts should look like.
 
  CamperBob2 - 1 hours ago
  I agree, it's a nice piece of work.  It makes a better flexbox
  tutorial than most flexbox tutorials.