You don't need a grid framework on top of the CSS grid layout | Hacker News Reader

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

rachelandrew.co.uk

150 pointskawera49 comments

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

3. https://en.wikipedia.org/wiki/Tantek_%C3%87elik

4. https://l-c-n.com/

In the earlier day, it was dead simple using tables. We jumped on the CSS layout bandwagon about 5 years too early.

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...

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/

2. http://www.mezzoblue.com/

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

http://cssgridgarden.com/

That is quite nifty!

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.

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.

I had to implement designs that were created with QuarkXPress. :-(

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

That wouldn't work because it would rely on markup although display: table is pretty handy as a fallback for small UI elements in particular.

The grid (and flexbox) specifications define how fallbacks should work, making it pretty straightforward to create good - not identical (because what would be the point?) experiences for the browsers you need to support.

So, for example with display: table which generates anonymous boxes, the spec defines that box generation won't happen.

I detailed a bunch of this stuff here: https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks

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.

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.

That's an argument against botched sites (or, for good css), NOT an argument for tables.

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

Then you visit some very unfriendly sites.

The only part of HN that is remotely easy to read on mobile are the homepage/etc list pages, which recently became slightly better to read sometimes (I don't know why but the new mobile-friendly scaling doesn't always kick in).

Those pages have zero need for a table based layout - they're vertical lists of stuff.

The comments threads are honestly terrible to read on mobile.

Hacker News is a single column. That's the simplest layout to build using CSS. It really doesn't need tables or grid layouts.

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

Because this is not quote, but code block.

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

It also doesn't really have much along the lines of a "responsive layout" in the sense of one that changes (outside of scaling) with different browser sizes/shapes. (But the typical clean forum also doesn't really need one, so using "outdated" tech is fine. CSS Grid is nice because it allows to do things that weren't (easily) done before, but not everybody wants or needs them)

Pinching and zooming is very underrated. I like it better than scrolling and digging through hidden menus.

Responsive design isn't about hidden menus.

At its most basic, it's just reflowing content to fit the given viewport width.

You lost that battle 15 years ago, and rightly so.

Jeez, I'm like a 150 in internet years (or 1,500 in JS framework years). crumbles into neatly stacked dust

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

[2] https://github.com/sindresorhus/into-stream

[3] https://www.npmjs.com/package/neatly

[4] https://github.com/linkedin/dustjs

It really is 1999 again. I shudder at the days of design patterns that utilized nested tables.

Tables seem better than Grid, because of vertical alignment, too bad they don't have wrapping.

Grid has alignment: https://rachelandrew.co.uk/css/cheatsheets/box-alignment

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/

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

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

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

[4] https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-...

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.

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_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...

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

Almost 70% browser support according to caniuse [1]

1- http://caniuse.com/css-grid/embed

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

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...

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

Codepen embedded in linked page.

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.

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

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.

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?

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

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.

I read it as "You don't need a grid framework on top of the CSS grid"

Though its annoying to parse that title

Ok, let's try your rewording.

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

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.

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

gride framework != css grid layout specs

I read the title as saying you don't need to use CSS Grid.

Reply on news.ycombinator.com