Chrome 57 Beta Adds the CSS Grid Layout, Enhances Add to Home Screen and More

Chrome 57 Beta Adds the CSS Grid Layout, Enhances Add to Home Screen and More

We may earn a commission for purchases made using our links.

Google has recently rolled out new Chrome updates to Android, Chrome OS, Linux, Mac and Windows. If you haven’t already received your latest Chrome update, be sure to check and see if it’s available for you now. This means that work from previous release channels are now being shifted to the next branch (Canary to Dev, Dev to Beta) and Google has released some details about what we can expect with version 57 of their Chrome Beta channel.

The big addition here is the inclusion of the CSS Grid Layout, which is quite similar to CSS Flexbox. Google points you to this Mozilla Developer Network page if you want to learn about it in more detail. With websites being accessed on screens of varying sizes (from large TVs to small watches), supporting all of these screens can be difficult for a web developer. It’s definitely been possible thanks to complex combinations of markup and CSS, but that ends up being difficult to maintain over time.

CSS Grid Layout

So the CSS Grid gives web developers a two-dimensional grid-based layout system that is optimized for responsive user interface design. Developers can specify if they want an element to span across a number of columns and/or rows, and these elements can even be named so that it’s easy to layout the code. Check the image above for an example of how this can work once it has been implemented. Chrome 57 Beta also comes with some changes to the Add to home Screen feature too.

Google has been doing a lot of work to make Progressive Web Applications feel more native than ever before and this change enhances that even further. Assuming the website you’re visiting is setup as a PWA, Chrome will allow it to be integrated into Android much deeper than before. These shortcut app icons will appear in your launcher’s app drawer, in the Android Settings section, and they can receive incoming intents from other apps as well.

Source: Chromium Blog