Accordion rows in CSS Grid | Eric Meyer

It feels good to me, having two sets of rows where the individual rows accordion open to accept content when needed, and collapse to zero height when not, with a β€œblank” row in between the sets that pushes them apart.

When Eric first tweeted about the new design on his site, I thought something a bit unusual was going on with the CSS layout. I actually dove straight into the source that day and learnt a little about using negative row/column indices that I'd not really considered before. Still, I missed this clever trick he's using. By having a set of rows at the top and bottom of the page that may or may not contain content, he creates an "accordion" like layout. If content exists, the row expands to give it space; if it doesn't, the row collapses to nothing. The trick is having one row in-between those groups with a height of 1fr, thereby expanding to fill/fit all the necessary content.

Eric does point out that, in theory, it seems like leaving out that flexible middle row should still work, but he has a niggling suspicion it'll cause issues. Which is funny, because I have the same (unfounded) suspicion 😁 As I was reading down the article, my reaction was initially "you can't do that with rows" and then "aha, that flexi-height row will make it work". I'm just not sure why...

Explore Other Notes

β¬… Newer

Fantasy kindreds of Saynim

Darrell is one of those authors who really considers the world-building side of their work, so I've long found their blog fascinating. Recently, they've released a series of posts on the background […]

Older ➑

Colour palette contrast checking

A useful tool for quickly analysing the various combinations of a colour palette and determining which are safe to use from a contrast ratio perspective. I find it particularly useful when used in […]
  • When Eric first tweeted about the new design on his site, I thought something a bit unusual was going on with the CSS layout. I actually dove straight into the source that day and learnt a […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.