Last night the release of Firefox Nightly included subgrid. So you can now try out all of the examples I have been creating for yourself.
Back with an update with news of CSS Grid Level 2. Level 2 is mostly about the subgrid feature which was removed from Level 1 pending more discussions about how it should work. Subgrid is currently being implemented in Firefox, and I’ve been testing some early builds in order to be able to document the specification.
I’ve not been very good at updating with bits of news since Grid shipped in browsers, however to complete the picture of browsers shipping Grid layout in 2017, Edge will ship their release to the public with the Windows update on October 17th, 2017.
Today is the day. CSS Grid Layout is now available in a production browser as it lands in Firefox.
Yesterday the feature list for the Safari 10.1 release was posted, this release is now in Beta and includes Grid. The work to implement grid in Safari has been completed by the team at Igalia, who also implemented it in Blink.
We should see Grid support out from behind flags in Firefox and Chrome by March next year. You can keep track of browser updates and news on my browsers page. However, we will still have old browsers to consider and new browsers that don’t yet support the new specification.
As we start to create more complex layouts it is worth understanding how grid interacts with other layout methods. In the video today I take a look at how grid works when grid items or their children use position: absolute.
The properties used to define the explicit grid are grid-template-columns, grid-template-rows, and grid-template-areas. These can be combined into the grid-template shorthand.
If there is a string of text inside the element that has display: grid it will become a grid item, this anonymous item will participate in the grid layout but otherwise can’t be styled and will use the CSS of the parent.
If grid items are being placed by auto-placement then they will be placed into empty cells on the grid, and not overlap each other. However you can position grid items into the same grid cells or allow them to overlap. Overlapping items can be controlled in terms of their stacking order using z-index.
An example that I use in some of my presentations about Grid is a recreation of a fairly common, yet fragile pattern. A block of images and text used as navigation to stories or content on a site. With current methods to create these blocks we have to set the heights of elements - and we all know that setting the height of things on the web doesn’t tend to end well. As soon as more text gets added than we expected, or the text is larger than expected it can all fall apart.
At All Things Open in Raleigh I gave a couple of presentations. Here is a video of my Grid Layout talk. The slides are a bit difficult to see in the video but you can find them on SlideShare.
If you have been following along so far, then you might be thinking that it would be very handy to have support for inspecting and working with Grid Layout in browser DevTools. The nice folk over at Firefox thought the same thing. So if you are using Firefox Nightly or Developer Edition you can use the Grid Highlighter.
The CSS Grid Layout Level 1 specification contains a value of display, which would enable indirect children to use the grid defined on a parent. This subgrid value has not been implemented by any browser as yet.
We can nest one grid inside another grid, so a grid item can become a grid container too.
Yesterday I shared a video that demonstrated how to use grid-template-areas to create a layout and on Day 9 we took a look at named lines. Today we look at an interesting feature of using either of these methods.
Earlier in this series we looked at how to lay out items using line numbers, and also named lines. There is another way to create layouts on your grid and that is to use the descriptive named grid areas method.
Yesterday we took a look at aligning the grid items. You can also align the tracks of the grid - assuming that you have a grid container that is larger in one or both dimensions than the size of the tracks.
CSS Grid Layout implements the alignment properties from the Box Alignment Module Level 3. This module takes the alignment properties that you already know if you have used flexbox, and makes them available to other layout methods.
As it is Saturday, here is a longer video recorded at ffconf in Brighton a few weeks ago. It’s not just grid, but I introduce the Box Alignment Module in this talk which will be the theme of the next couple of days of posts.
Yesterday we looked at how to position grid items using line numbers. You always have line numbers to use in this way, additionally when defining your grid you can opt to name some or all of the lines and then use those names when positioning items.
We have so far been creating grid tracks, and auto-placing items onto those tracks however you are likely to want to set the positions of things around your grid. Grid gives us a few options when doing this. Today we’re going to look at positioning using line numbers, as no matter what else you do you will always have numbered lines to use.
If you create a grid on an element all the child elements immediately become grid items, and will lay themselves out on your defined grid according to the auto-placemnt rules.
One of the nice things about flexbox is the ability to get the browser to lay out as many things as will fit into a container giving them all an equal flexible width. We can do the same with grid by using the auto-fill or auto-fit keywords along with repeat notation.
Flexbox works out flexible sizing based on the flex items, with grid we take a different approach and create a grid then place items into it. This doesn’t mean that we have to create very rigid grid structures however. The minmax() function is one way that we can create grids that flex according to some parameters.
A longer video for Day 4. This presentation was recorded at the View Source Conference in Berlin.
When defining your grid, the value of grid-template-columns and grid-template-rows is a track listing. A list of the tracks sizes that make up your grid.
The CSS Grid specification introduced a new unit for CSS. This is the fr unit and if you already use flexbox you’ll see it behaves in a similar way to how flex-grow behaves when you set flex-basis to 0.
CSS Grid Layout really is coming to our browsers in 2017. In the last few weeks both Chrome and Firefox have posted their “intent to ship” the specification, un-prefixed and so we should see Grid out from behind browser flags by the end of the first quarter of 2017. Exciting stuff!
It has been quite a year for conferences! I have one more event this year, where I’ll be talking about layout including Grid Layout, ConFoo in Vancouver.
Grid Layout has now been enabled by default in Chrome Canary, which is the first step in it shipping in Chrome next year to all Chrome users.
Hot on the heels of the Intent to Ship for Chrome, here is news of Firefox, they intend Grid to ship without needing a flag enabled in Firefox 52.
Here is the Intent to Ship for CSS Grid Layout which also details interoperability and implementation status.