
You don't need a grid framework on top of the CSS grid layout - kawera
https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system
======
Brajeshwar
Wow, it's been a while. Back in the days[1], it was a feat to do even a simple
Faux 3-Column layout[2]. I made lots of friends and following on forums and
'mailing lists' helping and getting help with the quirks, and CSS hacks. Those
in the know of such CSS hacks and their solutions got their 'guru' moments and
treatments.

The ability to fully understand the CSS Box Model, and enlighten someone was
the pinnacle of your CSS Ninja tactics.

There were the purists who would not write anything but in "Strict Mode".
Debates on why "transitional" should be that - transitional. There were
moments of triumph when Tantek[3] himself replied to your email, discussing
his tan-hacks.

Then, there was my CSS mentor/superhero - Philippe Wittenbergh[4]. I would
email him right away to test my work on the Mac browsers, especially with that
nasty Internet Explorer for Mac. This was before I was introduced to the Mac
in 2006.

Soon enough, writing up a CSS-Grid system for a project became second-nature
and felt like ringing the bell. Hell, I even had a dead-simple CSS Grid that
got some traction, which I later added to Github and people liked it, used it
for a while.

It is such a good feeling that "Grid" is no longer just a CSS terminology to
mean a setup of patterns to build a layout but now a keyword in CSS that the
browser understands and do something. We have come a long way.

1\. I think, the early 21st century - 2001/2003-ish.

2\.
[https://alistapart.com/article/fauxcolumns](https://alistapart.com/article/fauxcolumns)

3\.
[https://en.wikipedia.org/wiki/Tantek_%C3%87elik](https://en.wikipedia.org/wiki/Tantek_%C3%87elik)

4\. [https://l-c-n.com/](https://l-c-n.com/)

~~~
mipapage
Wow! What a throwback, I was on that CSS list and Philippe and I would do a
lot of css writing and testing together, along with 'Big John'. I recall a day
when this 'Dave' guy came by asking for people to check out his garden...

~~~
Brajeshwar
Ah! Dave Shea[1] is awesome. I'm a big fan. I once asked him if he would do a
site design for me. Unfortunately, he was busy. He was super polite and
humble.

Mezzoblue[2] was one of those source of inspiration to CSS enthusiasts.

1\. [http://daveshea.com/](http://daveshea.com/)

2\. [http://www.mezzoblue.com/](http://www.mezzoblue.com/)

------
smexy
A fun way to familiarize yourself with grid is CSS Grid Garden:

[http://cssgridgarden.com/](http://cssgridgarden.com/)

~~~
lathiat
That is quite nifty!

------
onion2k
_As if you start with old browsers, you limit yourself to their capabilities._

In my experience the design of a website is often done _without a browser in
mind at all_. A designer uses an application like Sketch or Photoshop to mock
up what the site should look like, and once the client has signed off a web
designer/developer figures out how to build it in a way that works in all the
target browsers. Starting with what the browser can do sounds like a much
better approach, but that's going to take a paradigm shift in what both
designers do and what clients expect. I can't help but think that's going to
limit adoption of 'new browser first' for a long while.

~~~
jacobr
Another problem is if a designer used to be a web developer 10 years ago, or
has limited knowledge of what's possible, and limits the design to what they
think is easier to accomplish.

I prefer an uncompromised design and a designer that accepts my feedback
and/or that I make adjustments if some design will take an unreasonable amount
of time to implement or will have bad performance.

------
ourmandave
_Create solid markup, uncluttered by additional elements that the past tells
you that you need. Design your site using what Grid and other new methods have
to offer. Then look at how you deal with the browsers without support, by
serving them something slightly simpler._

Perhaps a fallback like, oh I dunno, <TABLES>?!

~~~
stephenr
Tables don't work in a world that requires responsive layout. I don't want to
be pinching and zooming all over the place to read content on a handheld
device.

~~~
slavik81
HN is one of the most mobile-friendly sites I visit and it's still table-
based.

~~~
npunt

      just wait until someone quotes someone and you have to scroll all the way over here ---->

~~~
garaetjjte
Because this is not quote, but code block.

~~~
pbhjpbhj
Or when the nesting gets deep and you have about 3 words per line ... or
you're trying to visually identify the comment hierarchy.

------
TheAceOfHearts
If you've been following CSS grid at all, or if you look up anything related
to it, you'll probably encounter something written by Rachel Andrew. She's
been doing an incredible job at documenting and promoting CSS grid.

In the past she wrote a CSS grid polyfill [0], but sadly it never got updated
to the latest version of the spec. It'd be an easier sell if you could
polyfill it reasonably on some older browsers, even if performance suffered a
bit.

Right now the last holdout is Edge [1], which is funny because they were the
first to ship the older spec, going back as far as IE10 or IE11. Luckily, the
next version will be shipping the latest spec.

I've noticed autoprefixer [2] supports a grid option. I'd love a guide that
explained any incompatibilities between the two versions. Getting a mostly
working grid on IE11 and Edge would probably make it an easier sell for many.

When flexbox started growing popular there were guides showing you could
support most features on IE10 and beyond with little effort if you used
autoprefixer. Since there are equivalent versions of most attributes on older
browsers, you just had to be aware of bugs and gotchas. For example, the
default value for flex-grow, flex-shrink, and flex-basis (and their older
equivalents) changed between versions, so if you always had to set them. In
addition to any incompatibilities between versions, all implementations were
buggy, so you had to be aware of bugs and their workarounds. Luckily, they're
all well documented on the flexbugs [3] repo.

Considering grid is more complicated than flexbox, I wouldn't be surprised to
find it has a few bugs. Does anyone know if there's a gridbugs repo that
developers can track?

EDIT: After a quick search, I found a blog post [4] talking about supporting
the older version.

[0] [https://github.com/FremyCompany/css-grid-
polyfill/](https://github.com/FremyCompany/css-grid-polyfill/)

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

[2]
[https://github.com/postcss/autoprefixer](https://github.com/postcss/autoprefixer)

[3]
[https://github.com/philipwalton/flexbugs](https://github.com/philipwalton/flexbugs)

[4] [https://rachelandrew.co.uk/archives/2016/11/26/should-i-
try-...](https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-
the-ie-implementation-of-css-grid-layout/)

~~~
rachelandrew
The latest version of autoprefixer has the old grid support off by default,
I'm not sure of a scenario in which it would be useful to be honest. The spec
in IE10,11 and Edge is solid, it just is more limited than the updated spec.

------
andrewfromx
[https://gist.github.com/andrewarrow/63d4dbbf171e00b0b455e362...](https://gist.github.com/andrewarrow/63d4dbbf171e00b0b455e3623b8468f1)

wow, you can say display: grid and display: flex in css? and then flex: 1 1
200px;, grid-row-end: span 2;, grid-column: 1 / -1; What browser support
these? Like is it 90% or 50%?

~~~
stephenr
where did you find this? Is there a page showing it in use?

~~~
rachelandrew
That's the code from the example I linked, you can find it here along with
details [https://gridbyexample.com/patterns/header-asmany-span-
footer...](https://gridbyexample.com/patterns/header-asmany-span-footer/)

That site is where I keep all by grid demos including a whole series of
tutorial videos explaining the spec.

------
tannhaeuser
I'm wondering how the Bootstrap CSS guys feel about CSS Grid, having just
spent enormous work on porting the Bootstrap 3 grid to CSS Flexbox. I guess
right after the eventual release of Bootstrap 4 there's going to be Bootstrap
5 based on CSS Grid, making "container", "row" and other divitis optional? But
that's sure going to be another sh*tload of work with all the QA and corner
cases.

~~~
qw
Considering the issues with IE11, Flexbox still has a few more years left if
you have big enterprise customers (or the government)

------
usaphp
I could not understand how can you set a custom height for one of your grid
items, and then align it top/bottom/center for example.

~~~
rado
By setting the cell as flex with flex-direction: column. And wrapping the
content in an extra div. This bothers me too, so advanced yet worse than
tables in vertical alignment. Or am I missing something?

~~~
rachelandrew
Grid also implements Box Alignment, just like flexbox. You can align the item
inside the grid area.

[https://rachelandrew.co.uk/css/cheatsheets/box-
alignment](https://rachelandrew.co.uk/css/cheatsheets/box-alignment)

------
slaymaker1907
The title is kind of misleading. It seems to be arguing that the new CSS grid
layout is extremely powerful, but the title implies otherwise.

~~~
jordache
no the sentiment from the article was communicated precisely in the title for
me.

~~~
prophesi
No, it's clickbaity and does not accurately depict what the article is
describing. It's not dismissing grids, but encouraging the eventually-to-be-
standard CSS grid.

~~~
jordache
it clearly says you don't need a grid framework.

gride framework != css grid layout specs

