Excellent demo by Rachel Andrew: Using CSS Grid Layout and a touch of flexbox to build a more forgiving hero image block that can cope with additional content or additional boxes. CSS Grid: Multiple image hero block (CodePen) → Related: A Complete Guide to CSS Grid Layout →
Tag Archives: layout
Is Houdini ready yet‽
“Is Houdini ready yet‽” is a dedicated page to tracking the status of Houdini. But what is Houdini? Here’s a snippet from Smashing Magazine: Imagine how much nicer your development life would be if you could use any CSS property and know for sure it was going to work, exactly the same, in every browser. …
Modern Layouts: Getting Out Of Our Ruts
Video (filmed at An Event Apart) and slides from “Modern Layouts: Getting Out of Our Ruts” by Jen Simmons: In the early years of the web, there was a lot of variation and experimentation with where to put content on a web page. Then, it seems we all settled into a handful of patterns and …
Grid Style Sheets 2.0
GSS reimagines CSS layout & replaces the browser’s layout engine with one that harnesses the Cassowary Constraint Solver — the same algorithm Apple uses to compute native layout. Using Constraint CSS and GSS Selectors it’s really easy to, for example, make two elements have the same width: .container { &[width] == #elm[width]; } Next to …
Quantity Ordering With CSS
Here is your mission, should you choose to accept it: create a table of items. Each item should span a third of the content area, with the fourth item starting on a new row, much like floats. However, a particular item must always display the price at the end of the first row. Visually, we …
CSS-Grid-Polyfill
CSS Grid Layout Polyfill: The polyfill’s css parser was built by following the CSS Syntax 3 specification, the polyfill should be able to process any css stylesheet. It can react to dynamic pseudo-classes like ‘:hover’, to media queries changes or window resize events. It also detects changes to the DOM that may affect the layout …
CSS3 Grid By Example
Rachel Andrew: I have been writing and speaking about the CSS Grid Layout Module for some time now. In order to learn how Grid works I’ve put together lots of small examples, and I am publishing them here as a resource for anyone else interested in this emerging specification. Great to see these all bundled …
Chrome M40: The Virtual Viewport
The idea of the virtual viewport is to split the notion of “the viewport” into two, “the layout viewport” (where fixed position items are attached) and “the visual viewport” (What the users actually see). In the screenshots above you can cleary see this in action: without a virtual viewport it’s not possible to view right …
CSS Grid Layout 2014 Recap
Two posts on CSS Grid Layout: one covering the changes in the spec during 2014, and another one talking about the implementation details in Blink and Webkit. CSS Grid Layout 2014 Recap: Implementation Status → CSS Grid Layout 2014 Recap: Specification Evolution → Related: CSS3 Grid Layout Module, an Introduction → Automatic Placement when using …
Flexbox adventures
Up until reading Flexbox Adventures I hadn’t really given much thought to how flexbox grow exactly works. If you do want to know: Available space = (Container size – Flex-basis siblings total). Flex Item size = Basis + ((Available space / Total Grow nums) * Individual grow num). A recommended read. Flexbox adventures → When …