A common Grid Layout gotcha is when a newcomer to the layout method wonders how to style a grid cell which doesn’t contain any content. In the current Level 1 specification, this isn’t possible since there is no way to target an empty Grid Cell or Grid Area and apply styling. This means that to apply styling, you need to insert an element.
In this article, I am going to take a look at how to use CSS Generated Content to achieve styling of empty cells without adding redundant empty elements and show some use cases where this technique makes sense.
Styling Empty Cells With Generated Content And CSS Grid Layout
Responsive Web design has transformed how websites are designed and built. It has inspired us to think beyond device classifications and to use media queries to adapt a layout to the browser’s viewport size. This, however, deviates from the hierarchical structure of CSS and characterizes elements relative to the viewport, instead of to their container.
Extensive use of media queries might be the answer for today, but it is not a viable long-term solution.
Media Queries Are Not The Answer: Element Query Polyfill
To help you tap the full potential of Marionette, we’ve prepared an entire eBook full of useful hands-on examples which is also available in the Smashing Library. — Ed.
Excerpt from –
A Thorough Introduction To Backbone.Marionette (Part 1)