CSS Grid Layout as masonry with 'grid-auto-flow: dense'.
Look at number of pics and the empty spaces inside grid when initial/dense value changes
Describes and visually shows some of the new grid layout terms including grid lines, grid cell, grid track, grid area
Example of CSS Grid Layout using grid-areas through three different media queries to make it responsive. 😎
sizes & lengths with only 1 CSS custom properties (in progress).
TODO: shape-outside for texts & vertical centered
A simple HTML & CSS responsive grid layout.
A simple grid layout with a zooming animation effect for showing blog posts or other content.
Using CSS Grid Layout, with a flexbox fallback, in a practical sample template.
Neat and tidy responsive grid layout using flexbox. Mobile menu using CSS.
Update: 3.1.15 - Added social slide in, added images, updated HTML markup.
Basic grid using floats, then uses CSS Feature Queries ( @supports ... ) to determine if the browser supports Flexbox or CSS Grid Layout. CSS Grid Layout works in Safari Technical Preview, WebKit Nightly and Firefox Nightly out of the box. Chrome works with Experimental Extension APIs enabled at chrome://flags/ and in Firefox with layout.css.grid.enabled flag by going to about:config.
Playing around with the new css grid module spec and flexbox. In Chrome, you'll have to head to chrome://flags and enable "Experimental Web Platform Features" for this layout to work. I'm sure it looks pretty not great in all other browsers.
Uses flex-row and a flex value for each element; contains an interesting use of nth-child to style last two elements. More information on my blog
Need to know how to enable it? Go here.