6 ms·

You don't need a grid framework on top of the CSS grid layout

150 points by kawera 9y ago

andrewfromx 9y ago
https://gist.github.com/andrewarrow/63d4dbbf171e00b0b455e3623b8468f1 https://gist.github.com/andrewarrow/63d4dbbf171e00b0b455e362... 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%?
- usaphp 9y ago
  Almost 70% browser support according to caniuse [1] 1- http://caniuse.com/css-grid/embed http://caniuse.com/css-grid/embed
- deleted 9y ago
  [deleted]
- stephenr 9y ago
  where did you find this? Is there a page showing it in use?
  - kawera 9y ago
    Codepen embedded in linked page.
  - rachelandrew 9y ago
    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.
usaphp 9y ago
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 9y ago
  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 9y ago
    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
ourmandave 9y ago
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>?!
- robin_reala 9y ago
  You lost that battle 15 years ago, and rightly so.
  - ourmandave 9y ago
    Jeez, I'm like a 150 in internet years (or 1,500 in JS framework years). crumbles into neatly stacked dust
    - dabber 9y ago
      That's a very modern approach for someone 1,500 years old ;D crumbles[1] into[2] neatly[3] stacked dust[4] [1] https://www.npmjs.com/package/crumbles https://www.npmjs.com/package/crumbles [2] https://github.com/sindresorhus/into-stream https://github.com/sindresorhus/into-stream [3] https://www.npmjs.com/package/neatly https://www.npmjs.com/package/neatly [4] https://github.com/linkedin/dustjs https://github.com/linkedin/dustjs
- stephenr 9y ago
  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.
  - Animats 9y ago
    At least with tables you can view all the content and you can zoom in. There are many botched sites now where on some devices you can't scroll, or can't scroll far enough to even see all the content, or can't zoom in far enough to read it.
slaymaker1907 9y ago
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 9y ago
  no the sentiment from the article was communicated precisely in the title for me.
  - deleted 9y ago
    [deleted]
  - prophesi 9y ago
    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 9y ago
      it clearly says you don't need a grid framework. gride framework != css grid layout specs
- setr 9y ago
  I read it as "You don't need a grid framework on top of the CSS grid" Though its annoying to parse that title
  - dang 9y ago
    Ok, let's try your rewording.
- inimino 9y ago
  I read the title as saying you don't need to use CSS Grid.
TheAceOfHearts 9y ago
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-to-use-the-ie-implementation-of-css-grid-layout/ https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-...
- detaro 9y ago
  Regarding autoprefixer, at least this article recommends against using it, since the MS implementation has more differences than just the prefix: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La... I've also bookmarked this article about CSS Grid in production, but haven't read it completely yet: https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/ https://www.smashingmagazine.com/2017/06/building-production...
Brajeshwar 9y ago
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 9y ago
  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 9y ago
    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 9y ago
A fun way to familiarize yourself with grid is CSS Grid Garden: http://cssgridgarden.com/ http://cssgridgarden.com/
- lathiat 9y ago
  That is quite nifty!
tannhaeuser 9y ago
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 9y ago
  Considering the issues with IE11, Flexbox still has a few more years left if you have big enterprise customers (or the government)
onion2k 9y ago
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 9y ago
  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.
- stesch 9y ago
  I had to implement designs that were created with QuarkXPress. :-(
Anardo 9y ago
Isn't the whole point of a framework for IE support? That is the only reason I still use one. You can't use the CSS native grid because IE does not support it.

150 points by kawera 9y ago

https://gist.github.com/andrewarrow/63d4dbbf171e00b0b455e3623b8468f1 https://gist.github.com/andrewarrow/63d4dbbf171e00b0b455e362... 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%?

usaphp 9y ago
Almost 70% browser support according to caniuse [1] 1- http://caniuse.com/css-grid/embed http://caniuse.com/css-grid/embed
deleted 9y ago
[deleted]
stephenr 9y ago
where did you find this? Is there a page showing it in use?
- kawera 9y ago
  Codepen embedded in linked page.
- rachelandrew 9y ago
  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.

usaphp 9y ago

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 9y ago
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 9y ago
  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

ourmandave 9y ago

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>?!

robin_reala 9y ago
You lost that battle 15 years ago, and rightly so.
- ourmandave 9y ago
  Jeez, I'm like a 150 in internet years (or 1,500 in JS framework years). crumbles into neatly stacked dust
  - dabber 9y ago
    That's a very modern approach for someone 1,500 years old ;D crumbles[1] into[2] neatly[3] stacked dust[4] [1] https://www.npmjs.com/package/crumbles https://www.npmjs.com/package/crumbles [2] https://github.com/sindresorhus/into-stream https://github.com/sindresorhus/into-stream [3] https://www.npmjs.com/package/neatly https://www.npmjs.com/package/neatly [4] https://github.com/linkedin/dustjs https://github.com/linkedin/dustjs
stephenr 9y ago
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.
- Animats 9y ago
  At least with tables you can view all the content and you can zoom in. There are many botched sites now where on some devices you can't scroll, or can't scroll far enough to even see all the content, or can't zoom in far enough to read it.

slaymaker1907 9y ago

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 9y ago
no the sentiment from the article was communicated precisely in the title for me.
- deleted 9y ago
  [deleted]
- prophesi 9y ago
  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 9y ago
    it clearly says you don't need a grid framework. gride framework != css grid layout specs
setr 9y ago
I read it as "You don't need a grid framework on top of the CSS grid" Though its annoying to parse that title
- dang 9y ago
  Ok, let's try your rewording.
inimino 9y ago
I read the title as saying you don't need to use CSS Grid.

TheAceOfHearts 9y ago

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-to-use-the-ie-implementation-of-css-grid-layout/ https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-...

detaro 9y ago
Regarding autoprefixer, at least this article recommends against using it, since the MS implementation has more differences than just the prefix: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La... I've also bookmarked this article about CSS Grid in production, but haven't read it completely yet: https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/ https://www.smashingmagazine.com/2017/06/building-production...

Brajeshwar 9y ago

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 9y ago
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 9y ago
  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 9y ago

A fun way to familiarize yourself with grid is CSS Grid Garden: http://cssgridgarden.com/ http://cssgridgarden.com/

lathiat 9y ago
That is quite nifty!

tannhaeuser 9y ago

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 9y ago
Considering the issues with IE11, Flexbox still has a few more years left if you have big enterprise customers (or the government)

onion2k 9y ago

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 9y ago
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.
stesch 9y ago
I had to implement designs that were created with QuarkXPress. :-(

Anardo 9y ago

Isn't the whole point of a framework for IE support? That is the only reason I still use one. You can't use the CSS native grid because IE does not support it.