
From Bootstrap to CSS Grid - kawera
https://open.nytimes.com/bootstrap-to-css-grid-87b3f5f830e4?pagewanted=all
======
mrborgen
"It took about three lines of CSS to write the grid layout I wanted, and I
wanted to live in the bright and beautiful future where layout is always that
simple."

This is so spot on. I've met many developers who tend to think Bootstrap is
easier, but that's usually because they haven't experienced this part of CSS
Grid. Just add a couple of lines and you have a very powerful grid layout.

I wrote an article on Bootstrap vs. CSS Grid a few weeks ago btw. Feel free to
check it out:

[https://hackernoon.com/how-css-grid-beats-
bootstrap-85d5881c...](https://hackernoon.com/how-css-grid-beats-
bootstrap-85d5881cf163)

And here is a link to my free CSS Grid course, in case you're interested in
learning it:

[https://scrimba.com/g/gR8PTE](https://scrimba.com/g/gR8PTE)

~~~
tnolet
Not arguing the usefulness of CSS Grid, but Bootstrap is a whole bunch more
than just a grid. All the components in Bootstrap kinda work together with the
.container .row .col classes and that’s still a crazy useful feature.

~~~
Bizarro
The thing about Bootstrap (at least v3) is that the component library is
pretty bare bones.

But I'm curious to your statement about "working together". Are Bootstrap
components "aware" of the layout css/components?

~~~
chiefalchemist
I took that to mean the style was out of the box consistent; that while not
unique and perfect you have to work pretty hard to muck it up.

------
jrochkind1
Does Grid work in IE 10 or 11?

`caniuse` says "partial" support with prefixes in 11. Anyone have experience
of how well it works, with prefixes, how "partial" or compatible the support
is?

> I implemented this CSS Grid progressive enhancement on The New York Times
> Watching media card component. Users on old browsers see Bootstrap, but
> users on browsers that support the display: grid property

Okay... yeah, I don't want to do that. Workaround with bootstrap or flexbox
that don't really do _quite_ what I want as well as grid does... are still
better than having to do the workaround _and_ grid, to get all browsers.

> You’re absolutely ready to declare display: grid if you’re the only person
> contributing code.

I think it's the other way around. If you have a team big enough to do grid
_and_ fallbacks with flexbox or float or whatever, you're ready for grid. If
you're one person... you probably don't got time for that! If I got to do the
good enough fallback anyway, I'd rather just be done then. At least if you're
me. Sadly, so goes CSS improvements. In a couple years I can probably use
grid. Hey, at least I can finally use flexbox, which is awesome too!

~~~
Bizarro
As I said in another post in this thread, I'm hoping Postcss and the
autoprefixer plugin will work with at least IE11.

Is IE 10 even relevant these days? It seems that except for very outdated
systems, everybody should have been autoupdated to IE 11 by now

~~~
andrei_says_
Everybody except some companies with systems locked to an older version
because of legacy software they need to consume. Which also happen to be
amongst your big clients and despite representing 5% in your analytics,
represent 20% of your potential business.

Now what? Do you make your new site unusable for them? Or do you create a
complex intricate fallback css which defies the purpose of using css grids?

~~~
jonnyscholes
Then yeah CSS grid is not right for that project. But not everyone is in that
camp - and some are a bit of both. We have clients like yours and then many
others that don't even need IE11 based on their stats. The money saved because
we can use more efficient tech like CSS grid mean more time to add features!

(All our websites _work_ in IE11 - they're just allowed to be "visually
different from the approved designs" \- it's a pretty good compromise for many
clients!)

~~~
jrochkind1
Def report back if you try doing stuff with grid that works in both IE11 and
up to date browsers. I'm curious to hear how it goes from someone that did it.

I've done that with flexbox, and it worked out fine for me with both IE 10 and
11, even though caniuse notes "large number of bugs" in IE11 flexbox
implementation. Wasn't really a problem with my implementation. But it sounds
like grid might be a different story, where IE11 implements things to an older
spec with significant differences.

~~~
andrei_says_
In a similar situation (support for ie11 and a usable site in ie10) I’ve found
the susy grid system (v.2) indispensable.

Incredible flexibility and precision with just a few lines of scss. I know
that in a few years I’ll be writing pure css for grids, but until then it’s
susy for me. I just don’t have the time or will to write multiple layers of
redundant css.

------
disconnected
It's about time the web got a decent layout system.

Every UI toolkit that I know of (wxWidgets, Tcl/Tk, Qt) has some form of
layout mechanism (box layout, grid layout, etc), and they'd had it for
years/decades.

On the web though, people have been hacking around this omission for ages with
tables and assorted "grid" systems (pure css, bootstrap, etc).

The needs for layout management was there for as long as I can remember, and
this isn't a particularly tough problem to solve (Tcl/Tk has had "pack" since
the late 90s, IIRC).

Why the hell did it take so long for the web to come up with a decent layout
mechanism?

~~~
thomascgalvin
Web development is just starting to catch up to where we were fifteen years
ago. Things like type safety, unit testing, and dependency management are
still fairly new on the Javascript side of the house, and I'd argue that Maven
is lightyears ahead of NPM or pack or gulp or whatever the fuck the kids are
using these days.

The UI side is even worse. When you compare $todays_web_framework to QT or
Swing, it's like dropping into some terrible alternate timeline where the size
of a thing on-screen can only be divined by spraying the proper mixture of
cattle bones and chicken entrails on a ouija board beneath a blood moon.

~~~
chrisco255
We intentionally moved from Qt to Electron for desktop app development.
Electron apps look better generally and are far easier to maintain than Qt-
based apps. CSS has its warts but it's very expressive these days. Don't even
get me started on Swing versus React. A decent set of React components are
more declarative, easier to maintain, and faster to develop with than Swing.
You also have powerful testing tools in React like Jest snapshots and Enzyme,
which allow you to inspect and test the output of your UI in ways that are not
straightforward with Swing.

~~~
skocznymroczny
Swing has been obsolete for quite some while, if anything, compare with JavaFX

------
ty___ler
My breakthrough moment for grid UI development was realizing that all of my
layout code for a component is contained in the parent – rather than spread
around the children.

For example, in bootstrap or some other older layout framework every "column"
would need to contain some class or id to style it correctly. So for a 3
column grid you would need to give each element a class setup of something
like "column-third".

With grid, all that layout logic is moved into a single container "display:
grid" element, making it so much easier to add/remove/edit grid items. Even
padding is declared in the container element with the "grid-gap" property!
It's a small improvement that has immensely increased my developer experience
building grid-like UI.

~~~
chiefalchemist
And it makes sense. That is define the properties of the container, not the
individual items within it.

------
aloukissas
I'm a recent convert to CSS grid, absolutely love it. There's no dilemma
between flexbox + grid; they're complimentary. Just looking forward to full
devtools support in Chrome (although Firefox's grid devtools are mighty fine).

------
angrymouse
I recently converted my blog to CSS grid.

In the past I would have lazily used bootstrap as I've used that for over
three years and know the grid inside out.

It was a touch intimidating at first. No framework!

But it is really quite expressive. It took me 12 lines of CSS to get a
traditional blog layout that collapsed on mobiles.

~~~
sinistersnare
Do you have a link? I am thinking about converting my blog to CSS-Grid, but
would like some inspiration.

~~~
angrymouse
It is a touch hacky but here it is:
[https://grillopress.github.io](https://grillopress.github.io)

Code here:

[https://github.com/GrilloPress/grillopress.github.io?files=1](https://github.com/GrilloPress/grillopress.github.io?files=1)

The idea behind my blog is every major article I style slightly differently.

Have an upcoming design kanban one where I've played about a bit more with
grids to create the boards

------
jasonbarone
So I love CSS Grid very much, but have found myself still wanting/needing
masonry-style "Pinterest" layouts, which I haven't been able to do without
JavaScript. I've seen many of the CSS column and flexbox hacks, but nothing
quite nails it.

Anyone have any good ideas here?

~~~
jonnyscholes
CSS grid can do this! Sure not as freedom as a JS implementation but its good
enough in 95% of scenarios in my experience!
[https://codepen.io/balazs_sziklai/pen/mOwoLg](https://codepen.io/balazs_sziklai/pen/mOwoLg)
(not my code - just one of the examples on codepen)

~~~
colept
Sorry, but this is not true masonry because the heights of the items are
fixed. Masonry layouts have dynamic height elements.

~~~
jonnyscholes
Sorry I just linked to the first one that looked right as I was on the move.
Flexible height is definitely possible as we're using it that in prod. Here's
another examplei found with working flexible height :)

[https://codepen.io/Kseso/pen/ZJbEMe/](https://codepen.io/Kseso/pen/ZJbEMe/)

------
pavel_lishin
Not relevant to the article, but her avatar is very cool - and apparently she
generated it with SVG and stylesheets:
[https://codepen.io/tallys/pen/mPBBXr](https://codepen.io/tallys/pen/mPBBXr)

~~~
spaceseaman
Does anyone have a link to how to go about generating an image like this?

Did the writer hand make the individual polygons or generate it from an image
of themselves?

~~~
aeosynth
It's possible to generate svgs from images, see [https://jmperezperez.com/svg-
placeholders/](https://jmperezperez.com/svg-placeholders/)

~~~
pavel_lishin
That's really cool, but the results don't look much like her avatar. I'm
guessing it's really hard to do this without a lot of human input.

------
Zyst
Can someone illuminate me as to what are some of the reasons that would make
someone style with CSS Grid with a Fallback to Bootstrap?

Considering you are already writing Bootstrap due to compatibility concerns
why not just keep using that? I feel like adding another dependency like this
would just create a risk of having design differences pop up over time.

Mind you, I don't hate CSS Grid. I really enjoyed learning it, and I look
forward to be able to use it in a few years.

~~~
nkozyra
> Can someone illuminate me as to what are some of the reasons that would make
> someone style with CSS Grid with a Fallback to Bootstrap?

Generous interpretation: graceful upgrade when CSS grid has sufficient browser
support.

Realistic interpretation: to work with the 'new hot' and not the 'old stodgy'

~~~
chrisco255
It's not just "the new hot". Using pure CSS over a JS + CSS library like
bootstrap has performance implications for your code. Besides avoiding yet
another dependency, native CSS grid renders faster. Also, CSS grid being a
native feature, you can use those skills in any project, anywhere, even one
that isn't using Bootstrap.

------
pdog
What is the advantage of using CSS Grid instead of Flexbox? The Bootstrap v4
already uses Flexbox for its grid system.

~~~
mrborgen
Flexbox is built for one dimension layouts (e.g. a header), while Grid is
built for creating two-dimensional layouts (e.g. an entire page).

Use both and you'll get the best of two worlds.

------
arunitc
Let alone using CSS Grid. Here in India, I can't even use Flexbox. Thanks to
UC Browser having a 30% market share. Sigh, back to those IE 6 days.

------
TipVFL
It's interesting to now have this, flexbox, and the multi-column module (that
I never see anyone talking about).

Does anyone know if this can be used for dynamically wrapping columns?
Ostensibly flexbox should be able to handle that, but without an explicit
height your column will never wrap.

I recently needed to implement dynamically wrapping columns and I was able to
get 90% of what I needed from the multi column module. However it seems to be
really buggy at this point, it often ended up with elements sliced in half or
missing. Also, the biggest issue for me was no way to target the columns and
prevent reordering. I had sections of text that could be expanded or
collapsed, and that would trigger a complete rearrangement of columns. Nasty.

I ended up coding my own column system for vertical wrapping, and it was so
helpful I was thinking about open-sourcing it, but I'm not sure if CSS grid
obviates the need.

~~~
kilburn
As you found out, the CSS multi-column module is not very well specified, and
browser support is severly lacking in both features and performance.

Unfortunately... no, there's no better css only alternative. Grids are not
supposed to address that use case. For now you are much better off looking at
"masonry" javascript implementations, because they actually work and exhibit
better performance than css columns.

------
Bizarro
Here's a full-length CSS Grid tutorial posted to HN a few days ago.

[https://medium.freecodecamp.org/heres-my-free-css-grid-
cours...](https://medium.freecodecamp.org/heres-my-free-css-grid-course-merry-
christmas-3826dd24f098)

------
desireco42
Just to add what others always mention: CSS Grid and Flexbox are compatible,
CSS Grid lays elements in grid, while flexbox handles one dimensional layouts.

To create complex layout you need both and should be familiar with both
anyway.

I think we are so familiar with css/html pain that we can't believe to see
light in the end of the tunnel. :)

------
caffodian
What are the preferred solutions for people that are forced to support IE11?

I've seen fallback CSS and JavaScript polyfills used.

~~~
buovjaga
Here's a simple approach: [https://www.smashingmagazine.com/2017/06/building-
production...](https://www.smashingmagazine.com/2017/06/building-production-
ready-css-grid-layout/)

"Rather than using fallbacks and shims to ensure a design and layout look the
same across all browsers, we’d provide the mobile vertical single-column
layout to all browsers and then serve up advanced functionality to those
browsers and viewport widths that can take advantage of them."

~~~
jonnyscholes
+1 This is a great solution that doesn't take a huge amount of time to
implement. Esp if you only use CSS Grid for 2d layouts and use flex for which
has decent IE11 support for laying out components (where mobile is often just
stacked 100% width components).

A good way to bring a client round is to explain that the time saved on making
IE11 pixel perfect is better spent adding features elsewhere.

------
robertkrahn01
There were some good links in the article but my no. 1 resource for CSS grid
is [https://css-tricks.com/snippets/css/complete-guide-grid/](https://css-
tricks.com/snippets/css/complete-guide-grid/)

------
kumarvvr
What I love about the CSS Grid is that it does a really good job of separating
content from presentation.

I have used it in one project and it's awesome. What I struggled to do with
Bootstrap for almost a week, I could do the same with CSS Grid in an
afternoon.

------
swlkr
CSS Grid blew me away the first time I saw it. I didn't realize it was ready
on the latest browsers. I switched from bootstrap recently to tachyons, this
is just another reason to not miss it.

------
jordache
what's the deal with IE11 and CSS Grid? Is it partial support or MS specific
notion of CSS Grid? I keeps seeing both sentiments represented with regard to
IE.

------
sandGorgon
is there a ui toolkit for react based on CSS Grid ?

~~~
Bizarro
Currently, probably not. I'm using ant design right now and it uses Flexbox as
its underlying layout engine. I think Bootstrap 4 is the same. Once they ditch
support for IE11, then they'll probably move to CSS Grid, but at that point
you really don't need a UI toolkit to be based on CSS Grid. You either just
use the css directly, or have a UI toolkit-independent component wrappers
around the grid.

~~~
sandGorgon
Well, I'm looking for component wrappers.

For example I'm using quite a bit of semantic-ui today. Makes the job of
building interfaces really simple and easy.

------
shrikant
Completely off-topic: All five people mentioned as experts on CSS Grid towards
the end of this post are women.

(I don't have anything else to add, just found this interesting.)

~~~
eggpy
In another blog post they inform us that they have been ranked a Top Company
for Women in Technology[0]. I'm not familiar with the Anita Borg Institute
that did the ranking, but I think it's great to see anyways.

[0] - [https://open.nytimes.com/the-new-york-times-ranks-as-a-
top-c...](https://open.nytimes.com/the-new-york-times-ranks-as-a-top-company-
for-women-in-technology-22950f5a342)

