Using CSS grid to make a grid, is, well, the whole point. But what if you want all those grid items to maintain an aspect ratio, like a 1:1 square? It’s possible, but it involves a little trickery. In this video, we’ll look at doing that because we want to put a logo, centered, in each square.
One of the final demos:
CodePen Embed Fallback… Read article “#179: A Grid of Squares”#191: Learn by doing: CUBE CSS
#190: CSS Custom Properties Penetrate the Shadow DOM
#189: Notion for Personal & Public Use
#188: Exploring the Overlapping Header Pattern
#187: Notion for Team Meetings & Documentation
#186: Notion for Web Development Teams
#185: Playing with CSS Masks
#184: Inside & Aligned Lists
#183: Art Directing Images, the Picture Element, and Image CDNs
#182: Baby’s First Vue SFC
#181: Poking at HTML Lists
#180: Tinkering with Video on Mobile
#178: Percy Catches Visual Changes in any Workflow
#177: Local WordPress Development to Production Workflow
#176: Working with Framer Motion
#175: 7 Things to Know About Webflow
#174: Using Local Overrides in DevTools
#173: Ooooops I guess we’re full-stack developers now.
#172: Hand SVGing a Curved Line
Create your
podcast in
minutes
It is Free
Podcast – Kitchen Sink WordPress
The Goat Farm
Away From The Keyboard
Arrested DevOps
Build Phase