Jump to content

2017: The Year of The CSS Grid Layout Standard


Beluga
 Share

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
Link to comment
Share on other sites

  • 2 months later...
  • 2 weeks later...
  • 5 months later...

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
Link to comment
Share on other sites

  • 5 months later...
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
Link to comment
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
Link to comment
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
Link to comment
Share on other sites

  • 3 weeks later...

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
Link to comment
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
Link to comment
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 3
Link to comment
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
Link to comment
Share on other sites

  • 1 year later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...