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. 😎
A simple grid layout with a zooming animation effect for showing blog posts or other content.
A simple HTML & CSS responsive grid layout.
sizes & lengths with only 1 CSS custom properties (in progress).
TODO: shape-outside for texts & vertical centered
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.
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
Using CSS Grid Layout, with a flexbox fallback, in a practical sample template.
Full credit for this idea goes to Tyler Sticka at https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/ from which I took the idea.
Need to know how to enable it? Go here.