Layout in CSS has always been a difficult task: hacking solutions using positioning, floats, and therefore the one-dimensional flexbox has never been very satisfactory. Fortunately, there’s a replacement tool to feature to our arsenal: CSS Grid Layout. it’s an amazingly powerful layout system that allows us to style pages using a two-dimensional grid – offering the type of fine-grained layout control that print designers take for granted!
Grid Layout’s been in development for a short time, but has recently been made a W3C candidate recommendation and has been added to most of the main browsers, so it is prepared for clock time.
This collection includes:
Image Mosaic Effect with CSS Grids & Blend Modes
CSS Grid: Calendar
CSS Grid: Form to Badge
Procedurally Generated CSS Numbers
CSS Grid Poster
CSS Grid Responsive – Books
CSS Grid Layout Demo
CSS Grid: Bullet Journal
CSS Grid: Makeup Palettes
Isometric Card Grid
Due to use of some modern CSS techniques, this demo won’t work properly in IE.