Beluga

2017: The Year of The CSS Grid Layout Standard

Recommended Posts

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

The CSS standard Grid Layout will soon be usable in the stable versions of the leading browsers. It should hit Chrome and Firefox in March. It is in Safari tech preview, but no clear date. MS Edge is working on updating support. I guess support in mobile browsers will follow.

2017 is the year to use it on sites, where it is OK to experiment with bleeding edge stuff.

A complete guide to the system on CSS Tricks

Learn by examples (includes video tutorials)

Rachel Andrews summarizing use cases for Grid, Flexbox and Box Alignment in a single article on Smashing Mag (note: heavy with Codepens)

News on all things CSS Layout curated by Rachel

Polyfill support is unfortunately dragging behind with no contributors stepping up to help Fremy

  • Like 10

Share this post


Link to post
Share on other sites

Now all major browsers except Edge ship with Grid Layout support. You can let Microsoft know you want it by voting in Uservoice. The votes do matter:

 

  • Like 4

Share this post


Link to post
Share on other sites
On 06/04/2017 at 4:00 PM, SiNNuT said:

Love this! Thanks @SiNNuT been waiting for css grid forever, ditched floats for flexbox on a recent site but it's really no substitute for a proper grid system (previously using bourbon/neat).

  • Like 1

Share this post


Link to post
Share on other sites

Today I got the email:

"CSS Grid is included in Edge 16 that was released today as part of the Windows 10 Fall Creators update."

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

That leaves us with only IE11 supporting CSS grids only half-baked... Sadly, we still have to support it for client projects.

  • Like 1

Share this post


Link to post
Share on other sites

As much as I love trying out new CSS, I only ever use safe (ish) techniques so grid will have to wait for me. Probably at least another year as I've only just ditched floats for flexbox.

  • Like 1

Share this post


Link to post
Share on other sites

I don't think we can use grid for global layout soon. But for single components it can be just as useful in places and it doesn't seem like to much of a hassle to have less sophisticated looking fallbacks for those smaller usecases.

  • Like 1

Share this post


Link to post
Share on other sites

I found this to be a great approach for using Grid today: https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/

Quote

Here’s how that approach could work in practice. 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. It might sound like progressive enhancement, but it’s actually more of an accessibility-centric approach enabled by a mental shift.

One caveat is that you naturally can't use "grid in grid" for navigation layout etc..

  • Like 2

Share this post


Link to post
Share on other sites
On 10/19/2017 at 5:32 AM, Beluga said:

 

One caveat is that you naturally can't use "grid in grid" for navigation layout etc..

 

you can use grid in grid. since there is no support for sub-grids at the moment, the only way to do a layout is grid within grid.

you just have a re-declare the grids that go inside the other grids.

here's a quote from the smashing mag grid article

Quote

However, a grid container (one whose element is set to display: grid) only treats the elements that are direct descendants as grid items. This means you can’t create a single layout grid here. Instead, you have to create grids at the component level, effectively creating multiple grids with the same properties.  (https://www.smashingmagazine.com/2017/06/building-production-ready-css-grid-layout/)

What this is saying is that you cannot have a single grid system to deal with the layout but rather you need grids within grids. This creates extra code but still not as much as say something like flexbox and all it's css&divs.  Also there is not reason why you can't use css-grid and bootstrap together. SImply ignore the flexbox components.

Here is a sample Bootstrap responsive layout using CSS grid . Not a whole lot of code. (make sure to click the html/css tabs to see the src)

also, here's a neat project

Bootstrap’s grid in CSS Grid

https://mdo.github.io/bootstrap-css-grid-layout/

 

  • Like 2

Share this post


Link to post
Share on other sites
7 minutes ago, neosin said:

you can use grid in grid. since there is no support for sub-grids at the moment, the only way to do a layout is grid within grid.

When I said "you naturally can't use "grid in grid" for navigation layout etc.." I was referring to the simple fallback solution of all unsupported browsers falling back to mobile layout. I was not referring to what CSS Grid can or cannot support.

  • Like 1

Share this post


Link to post
Share on other sites
1 minute ago, Beluga said:

When I said "you naturally can't use "grid in grid" for navigation layout etc.." I was referring to the simple fallback solution of all unsupported browsers falling back to mobile layout. I was not referring to what CSS Grid can or cannot support.

ah gotcha, thanks for the clarification. I think the simple fallback solution is awesome.

here's a list of the latest supported browsers for anyone interested https://caniuse.com/#feat=css-grid

 

  • Like 1

Share this post


Link to post
Share on other sites
Posted (edited)

Worth watching entirely.
Don't miss the fallback solution (5 steps).
Firefox/Firefox Developer Edition has a grid inspector.
https://www.mozilla.org/en-US/developer/css-grid/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
https://gridbyexample.com/
https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks
https://cssgrid.io/ (there is also https://flexbox.io/ by the same author)
https://cssgridgarden.com/ (already mentioned in the topic)
And so on.

 

Edited by Christophe
  • Like 4

Share this post


Link to post
Share on other sites

The reason I still use Bootstrap is not only the "Grid" part, but there are many other solutions in it, which are really useful and can save you a lot of time.

Latest thing I've found is a way for responsive video embed (doing this "by hand" is not as easy as it may seem).

https://getbootstrap.com/docs/4.0/utilities/embed/

Because of things like this, I prefer staying within the Bootstrap Framework.

  • Like 1

Share this post


Link to post
Share on other sites

The CSS Grid vs Bootstrap (or any other CSS framework/library) question does not make too much sense anyway :)

Just because now we have CSS Grid it does not mean that it provides all the stuff a heavy weight CSS framework gives us. We are comparing apples to oranges... CSS Grid solves one particular – albeit long standing – issue, that's all there is to it.

  • Like 2

Share this post


Link to post
Share on other sites

Since starting my journey to actually learn programming, css is off the menu (but struggling to ignore the PW forum!). So with that in mind, a framework will be very handy indeed. I haven't got time to learn grid right now, nor would I use it anyway, too early days for me.

  • Like 2

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.