Best Practices With CSS Grid Layout — Smashing Magazine

A great set of answers from Rachel to frequently asked questions about CSS grid. She addresses the evergreen question of when to use flexbox and when to use grid:

I tend to use Flexbox for components where I want the natural size of items to strongly control their layout, essentially pushing the other items around.

A sign that perhaps Flexbox isn’t the layout method I should choose is when I start adding percentage widths to flex items and setting flex-grow to 0. The reason to add percentage widths to flex items is often because I’m trying to line them up in two dimensions (lining things up in two dimensions is exactly what Grid is for).

Best Practices With CSS Grid Layout — Smashing Magazine

Tagged with

Related links

Untapped – Using Simple Tools as a Radical Act of Independence

It would be much harder for a 15-year-old today to View Source and understand the code structure that built the website they’re on. Every site is layered with analytics, code snippets, javascript plugins, CMS data, and more.

This is why the simplicity of HTML and CSS now feels like a radical act. To build a website with just these tools is a small protest against platform capitalism: a way to assert sustainability, independence, longevity.

Tagged with

Printing music with CSS grid

Laying out sheet music with CSS grid—sounds extreme until you see it abstracted into a web component.

We need fluid and responsive music rendering for the web!

Tagged with

Playing with Infinity in CSS / Coder’s Block

CSS has an infinity constant.

I did not know this.

Tagged with

[ We Need to Talk About the Front Web / Part 1: Introduction : Ge Ricci ]

Angela has turned her talk from FFconf into a five-part series of articles. I’m biased because I already agree with everything in here, but it’s well worth reading.

Tagged with

WebKit Features in Safari 17.2 | WebKit

Lots of new features landing in Safari, and it’s worth paying attention to the new icon requirements now that websites can be added to the dock:

To provide the best user experience on macOS, supply at least one opaque, full-bleed maskable square icon in the web app manifest, either as SVG (any size) or high resolution bitmap (1024×1024).

Tagged with

Related posts

Speedier tunes

Improving performance with containment.

Workaround

Browsers and bugs.

Control

Trying to understand a different mindset to mine.

CSS Day 2022

Excellent as always.

Bugblogging

Also, tipblogging.