Beluga Posted January 4, 2017 Share Posted January 4, 2017 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 10 Link to comment Share on other sites More sharing options...
Beluga Posted March 29, 2017 Author Share Posted March 29, 2017 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: 4 Link to comment Share on other sites More sharing options...
horst Posted April 1, 2017 Share Posted April 1, 2017 in another thread I had posted some useful links to this too: https://processwire.com/talk/topic/15886-different-styles-for-results-of-an-array-page-grid/#comment-141785 2 Link to comment Share on other sites More sharing options...
Beluga Posted April 6, 2017 Author Share Posted April 6, 2017 Ok, apparently slowest response to an email ever (3 years), but Microsoft has confirmed they are working on getting their Grid implementation updated in Edge. 1 Link to comment Share on other sites More sharing options...
SiNNuT Posted April 6, 2017 Share Posted April 6, 2017 http://cssgridgarden.com 6 Link to comment Share on other sites More sharing options...
SamC Posted April 18, 2017 Share Posted April 18, 2017 On 06/04/2017 at 4:00 PM, SiNNuT said: http://cssgridgarden.com 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). 1 Link to comment Share on other sites More sharing options...
szabesz Posted October 18, 2017 Share Posted October 18, 2017 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." 2 1 Link to comment Share on other sites More sharing options...
dragan Posted October 18, 2017 Share Posted October 18, 2017 That leaves us with only IE11 supporting CSS grids only half-baked... Sadly, we still have to support it for client projects. 1 Link to comment Share on other sites More sharing options...
SamC Posted October 18, 2017 Share Posted October 18, 2017 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. 1 Link to comment Share on other sites More sharing options...
LostKobrakai Posted October 19, 2017 Share Posted October 19, 2017 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. 1 Link to comment Share on other sites More sharing options...
Beluga Posted October 19, 2017 Author Share Posted October 19, 2017 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.. 2 Link to comment Share on other sites More sharing options...
neosin Posted March 23, 2018 Share Posted March 23, 2018 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/ 2 Link to comment Share on other sites More sharing options...
Beluga Posted March 23, 2018 Author Share Posted March 23, 2018 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. 1 Link to comment Share on other sites More sharing options...
neosin Posted March 23, 2018 Share Posted March 23, 2018 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 1 Link to comment Share on other sites More sharing options...
Christophe Posted April 11, 2018 Share Posted April 11, 2018 (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_Layouthttps://gridbyexample.com/https://rachelandrew.co.uk/css/cheatsheets/grid-fallbackshttps://cssgrid.io/ (there is also https://flexbox.io/ by the same author)https://cssgridgarden.com/ (already mentioned in the topic) And so on. Edited April 14, 2018 by Christophe 4 Link to comment Share on other sites More sharing options...
nfil Posted April 14, 2018 Share Posted April 14, 2018 Great advices... 3 Link to comment Share on other sites More sharing options...
theo Posted April 15, 2018 Share Posted April 15, 2018 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. 1 Link to comment Share on other sites More sharing options...
szabesz Posted April 15, 2018 Share Posted April 15, 2018 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. 3 Link to comment Share on other sites More sharing options...
SamC Posted April 15, 2018 Share Posted April 15, 2018 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. 2 Link to comment Share on other sites More sharing options...
Christophe Posted July 4, 2019 Share Posted July 4, 2019 Mentioned in a book For CSS Grid (and also Flexbox):https://cssgrid.cc https://cssgrid.cc/css-grid-guide.html 2 Link to comment Share on other sites More sharing options...
Recommended Posts