Pure CSS Crossword (CSS Grid)

Nice demo of a pure CSS Crossword Puzzle, built using CSS Grid. Be sure to check out the validation rules too, they’re built using the General Sibling Selector (e.g. ~): #item1-1:valid ~ #item1-2:valid ~ #item1-3:valid ~ #item1-4:valid ~ #item1-5:valid ~ #item1-6:valid ~ .crossword-board–highlight .crossword-board__item-highlight–across-1 { opacity: 1; } UPDATE 2017.06.22: There’s a blogpost available, describing […]

CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout

Time to ramp up your CSS Grid Layout skills, as it’s now enabled by default in Chrome Canary: Boom! There it is. Latest Chrome Canary now has Grid Layout enabled by default. It’s on the way. pic.twitter.com/sUNOZKVUlH — Rachel Andrew (@rachelandrew) November 25, 2016 It’ll also land in Firefox 52. Speaking of, Firefox also sports […]

Simple Flexbox Grid System

… with blackjack, and hookers! (ref) Introduction and Requirements A while ago, I created a small and simple flexbox-based grid system for use in the projects we make at work. The developed Grid System inspired upon how Bootstrap works: it divides the grid into 12 columns (configurable). it supports gutters in between columns (configurable). it […]

Fukol™ Grids

Building a CSS Grid System isn’t that hard really, thanks to flexbox. Heydon has stripped it to its smallest form: .fukol-grid { display: flex; flex-wrap: wrap; margin: -0.5em; } .fukol-grid > * { flex: 1 0 10em; margin: 0.5em; } Fukol™ is a lightweight, breakpoint free, completely responsive, element query driven*, progressive enhancement based CSS […]

Creating a Multiple Image Hero Layout with CSS Grid Layout

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 →