Issue 111
a CSS Grid competition, interoperability, and a responsive testing tool.
News
Issue 111
Since the last email I have presented a new layout talk at NordicJS in Stockholm, and an updated talk at Smashing Conference in Freiburg. Tomorrow I'll be running a CSS Layout workshop for Smashing Conf before heading home from this long trip. Next for me will be a workshop and talk at FITC Web Unleashed in Toronto.
I can't do too many workshops each year but all of my workshop material and more is part of my CSS Layout Online Workshop, I'll be updating that with new material written for the in-person workshops this month, and existing members will of course get those updates.
Rachel Andrew, CSS Layout News
[css-grid] fit-content() vs 'stretch' alignment · Issue #1732 · w3c/csswg-drafts
We have an issue that needs resolving around fit-content, it relates to this issue as raised on GridBugs.
If you have thoughts then post them to the thread.
[blink-dev] Intent to Ship: CSS Paint API - Google Groups
The CSS Paint API defines a new way for developers to draw content into a CSS <image> during the paint phase of the rendering engine. One of the Houdini APIs.
Microsoft Edge Web Summit 2017 | Channel 9
The Edge Web Summit will be streamed live on the 13th September - you can follow along here.
The CSS Grid Challenge: Build A Template, Win Some Smashing Prizes! – Smashing Magazine
Smashing Magazine are running a contest with some great prizes.
"create an interesting, accessible layout with CSS Grid, or use CSS Grid to rebuild an existing layout. What you design is entirely up to you. Feel free to use Flexbox additionally as well, e.g. as fallback for browsers not supporting CSS Grid. The only requirement is that the template you submit doesn’t break in IE9 and is still fully accessible in IE8."
The deadline is September 30th, I'm looking forward to seeing what people come up with.
CSS Grid shorthand no longer resets the gutter properties
The interesting thing about this tweet isn't so much the detail about the grid shorthand no longer resetting the gutter (gap) properties, but the fact that something resolved by the CSS WG in August has already been fixed by all of the implementations. These efforts are great for us web developers, and hopefully will help people be more confident in using new specifications.
Learn
Breaking the Grid - daverupert.com
Dave Rupert writes about the issues with replaced elements in Grid (and also Flexbox).
Building a Trello Layout with CSS Grid and Flexbox — SitePoint
An article using CSS Grid and Flexbox to build a layout like the one used by productivity tool Trello.
Interesting
Meet XRespond Testing Tool: Let’s Make Building Responsive Websites Simpler – Smashing Magazine
An article introducing XRespond, which looks like a useful addition to tools for testing responsive websites.
How not to break the Guardian website | Developer blog | Info | The Guardian
Not just layout but this is an interesting look into how a large website - The Guardian website - manages updates without breaking things.
Our Sponsor
Learn, prototype and get creative
CSS Grid is powerful and no doubt the layout method of the future. CCS Grid might take a little to get used to though. That's why we created Grid Builder. And so everybody can learn and work with this exciting new technology, we made it free!
As you can see in the screenshot above, we totally got creative while toying around. Just hop over to get the app, play with the showcases or create something from the start. Then let us know what you think!
You are also welcome to hang around a bit, look at demos and read up on Grid. See ya there!
CSS Layout News Newsletter
Join the newsletter to receive the latest updates in your inbox.