CSS Layout News - CSS Layout News - Issue 275

Masonry, content-visibility, and hiding things with CSS
 

CSS Layout News

 

ISSUE 275  3rd November 2020

 

News

 

Issue 275

I'd seen a few people mention the publication of a Grid Level 3 draft spec, which adds the masonry feature, so thought it a good time to write about the spec. You can find that in my list of links today. I'm also documenting it all over at MDN.

I'm not quite sure how it got to be November, however it is, and I'm starting to book in workshops and events for next year. All virtual right now, though I'd love to think we can be doing some in-person stuff in 2021. Anyhow, you can come and workshop with me in February where I'll be doing my CSS Layout Masterclass for Smashing Conf. Speaking of Smashing Conf, we have our last virtual event of the year next week. It's the online version of SmashingConf SF so will be in a good timezone for the USA.

Thinking of all of my US readers as you await your election result.

Rachel Andrew, CSS Layout News

 

Chrome Canary: dynamic contextual flexbox alignment icons!

Some images in this tweet of flexbox contextual alignment icons in Chrome Canary DevTools.

twitter.com

 
 

Learn

 

Native CSS Masonry Layout In CSS Grid — Smashing Magazine

The masonry spec is now part of CSS Grid Level 3. I made some demos and wrote about how it works for Smashing Magazine.

smashingmagazine.com

 

More on content-visibility | CSS-Tricks

More on content-visibility with some thoughts from Chris along with a video explaining more.

css-tricks.com

 

Comparing Various Ways to Hide Things in CSS | CSS-Tricks

A great rundown of the different ways to hide things using CSS.

css-tricks.com

 

Adactio: Journal—Accessible interactions

Jeremy writes up his thought process when designing an accessible component.

adactio.com

 
You received this email because you subscribed via the CSS Layout News site.
We'll be sorry to see you go but you can unsubscribe instantly.
 
Spike Island 133 Cumberland Rd Bristol BS1 6UX
 
 

 
 
©2020 CSS Layout News | Privacy Policy | Curated by Rachel Andrew.
 
Published with Curated

Older messages

CSS Layout News - Issue 274

Tuesday, October 27, 2020

A grid solution to layout shifts, CSS Shapes and emoji, grid sites that don't look so griddy. View on the web Archives ISSUE 274 27th October 2020 News Issue 274 Hello! Here we are with another

CSS Layout News - Issue 272

Tuesday, October 13, 2020

Interesting techniques with grid, subgrid, flexbox, and custom properties. View on the web Archives ISSUE 272 13th October 2020 News Issue 272 Late sending this today as I've had one of those days

CSS Layout News - Issue 271

Tuesday, October 6, 2020

Flexbox gaps, DevTools, accessibility resources, and media queries View on the web Archives ISSUE 271 6th October 2020 News Issue 271 Lots of interesting things today, perhaps everyone is back from

CSS Layout News - Issue 270

Tuesday, September 29, 2020

MDN Browser Compat Report, accessibility, animation, font-size with clamp() View on the web Archives ISSUE 270 29th September 2020 News Issue 270 Animation and accessibility feature heavily this week,

CSS Layout News - Issue 269

Tuesday, September 22, 2020

In-depth with the display specification, sortable tables, and accessible navigation View on the web Archives ISSUE 269 22nd September 2020 News Issue 269 Being a bit light on content this week, mostly

You Might Also Like

#489: Web Performance

Tuesday, January 7, 2025

Instant navigation, Web Almanac 2024, INP debugging, font-face fallbacks and compression dictionaries. Issue #489 • Jan 7, 2025 • View in the browser Smashing Newsletter Hello Smashing Friends, Web

The Beautiful House That Made Mayer Rus Anxious—At First

Tuesday, January 7, 2025

View in your browser | Update your preferences ADPro Concrete Box Supreme I confess, I was a bit intimidated by the prospect of writing about the work of architect Tadao Ando for the first time in my

New Updates and a Sneak Peek into 2025

Tuesday, January 7, 2025

Both our email builder and website builder are getting significant upgrades to enhance your experience.͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌ ͏‌

🐺Get ready to get press in 2025!

Tuesday, January 7, 2025

Since you asked, we extended the sale! ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Accessibility Weekly #430: FTC Orders AccessiBe to Pay $1M

Monday, January 6, 2025

January 6, 2025 • Issue #430 View this issue online or browse the full issue archive. Featured: FTC orders AI accessibility startup AccessiBe to pay $1M for misleading advertising "The US Federal

Getting ready for 2025

Sunday, January 5, 2025

Issue 227: Key focuses in the new year ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Want to Scale Your Firm in 2025? Start Here

Thursday, January 2, 2025

View in your browser | Update your preferences ADPro Build Your Best Team Yet A new calendar year presents an opportunity to wipe the slate clean, and your approach, whether slapdash or carefully

Our Must-Reads of 2024

Tuesday, December 31, 2024

View in your browser | Update your preferences ADPro Year in Review Well, we made it. It's the last day of 2024, so today, we're taking a walk down memory lane to bring you some of our

Accessibility Weekly #429: Broken Frames

Monday, December 30, 2024

December 30, 2024 • Issue #429 View this issue online or browse the full issue archive. Featured: Navigating imperfect accessibility frameworks for trauma-informed outcomes "So what is it then? Am

Top issues from 2024

Sunday, December 29, 2024

Issue 226: Looking back at the most resonating topics ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏