CSS Grid Playground

A Moiré Effect

Optical Illusions

Inspired by Takashiro Kusharima┬┤s fantastic Poemotion Series.
  • The first example is close-ish to this . Rabbit Hole alert!
  • Overlapping things in Grid is a lot of fun! No position:fixed; needed at all. Added a flip book to my list of future demos.
  • Was having an issue with border-radius and transparency for my circles so gave clip-path a go. Support is not there yet but it works great.
DEMO

Making and Breaking the Grid

From Print to Web

Replicated the cover of Timothy Samara's awesome book with CSS Grid.
  • Eric Meyer's article on Faud Grid Tracks was super helpful. Filler <b>s FTW!
  • Having the ability to easily overlap things makes all the difference
  • Realized there's a second edition of the book while working on this. Sounds like a fun future challenge!
DEMO

Jump Around

Perfect Squares

Wanted to try making something were things kept their square ratio and get the hang of implicit vs explicit.
  • 1 parent Grid with perfect squares ( Couldn't get minmax to work just yet but vw and media queries did the trick for now)
  • 1 child Grid that's 10 columns by 10 rows with implicit placement of images/cities.
  • Four or Five nth-of-types to give things a random-ish placement
DEMO