Conditionally Styling Selected Elements in a Grid Container

Calendars, shopping carts, galleries, file explorers, and online libraries are some situations where selectable items are shown in grids (i.e. square lattices). You know, even those security checks that ask you to select all images with crosswalks or whatever. 🧐 I found a neat way to display selectable options in a grid. No, not recreating […]

An Auto-Filling CSS Grid With Max Columns of a Minimum Size

Within Drupal 10 core, we’re implementing a new auto-filling CSS Grid technique that I think is cool enough to share with the world. The requirements are: The user specifies a maximum number of columns. This is the auto-filling grid’s “natural” state. If a grid cell goes under a user-specified width, the auto-filling grid will readjust […]

Using Position Sticky With CSS Grid

Say you’ve got a two-column CSS grid and you want one of those columns to behave like position: sticky;. There is nothing stopping you from doing that. But the default height for those two columns is going to be “as tall as the tallest content in either column” because the default behavior for grid columns […]

Expandable Sections Within a CSS Grid

I love CSS Grid. I love how, with just a few lines of code, we can achieve fully responsive grid layouts, often without any media queries at all. I’m quite comfortable wrangling CSS Grid to produce interesting layouts, while keeping the HTML markup clean and simple. But recently, I was presented with a unique UI […]

Less Absolute Positioning With Modern CSS

Each time I work on a component that needs absolute positioning, I ask myself: is it really necessary? I started to notice a few use-cases where using position: absolute isn’t needed. I found this interesting and I thought about documenting the use-cases that I usually came through while working on front-end projects. In this article, […]

Embracing Asymmetrical Design

At InVision, few things give me as much joy as sitting in on a user interview. Users help me see and experience our product with fresh eyes. And one piece of fresh feedback that keeps coming up over-and-over again is the harmful effect that text-overflow: ellipsis has on our product’s accessibility. I already talked a […]

Minding the “gap”

You might already know about the CSS gap property. It isn’t exactly new, but it did gain an important new ability last year: it now works in Flexbox in addition to CSS Grid. That, and the fact that I believe the property is more complicated than it appears, made me want to go back and […]

Pin It on Pinterest