-
Book Overview & Buying
-
Table Of Contents
-
Feedback & Rating
Responsive Web Design with HTML5 and CSS - Fourth Edition
By :
It is important to be aware that when you define a grid, it is only the direct descendant elements of that grid element that can participate in the layout. The children of those direct descendants cannot.
There is one way you can work around this problem right now with display: contents, and there are additional possibilities on the horizon in the form of subgrid. Right now, subgrid only has an implementation in Firefox so we cover subgrid in the ‘Latest Platform Features’ section of the book.
Currently, you can deal with this need, using display: contents. What the display: contents declaration does is effectively make the layout aspect of the element it is set on, and crucially, not the accessibility side, disappear, allowing the children of that element to behave visually, as if the parent element didn’t exist.
Let’s consider this markup, and try this out for yourself as we go, by playing with example_05...