Skip to main content
CSS is fun and cool and I like it.
Article

First Steps into a Possible CSS Masonry Layout

It’s not at the level of demand as, say, container queries, but being able to make “masonry” layouts in CSS has been a big ask for CSS developers for a long time. Masonry being that kind of layout where unevenly-sized elements are layed out in ragged rows. Sorta like a typical brick wall turned sideways.

The layout alone is achievable in CSS alone already, but with one big caveat: the items aren’t arranged in rows, they are arranged in … Read article “First Steps into a Possible CSS Masonry Layout”

Article

Equal Width Columns in CSS Grid are Kinda Weird

Everything is flexible these days. If you write grid-template-columns: 200px 200px 200px;, sure, you’d have equal-width columns, but that’s a rare day. What you usually mean is three columns of equal fluid width.

We’ve got fractional units for that, like grid-template-columns: 1fr 1fr fr;. That’s usually fine, but they aren’t very sturdy like pixels. A large bit of media (or something like a <pre>, or long bit of text like a URL) can cause those columns … Read article “Equal Width Columns in CSS Grid are Kinda Weird”

Link

Chromium lands Flexbox gap

Link

Exciting Things on the Horizon For CSS Layout

Link

Constrained CSS grids without `max-width`

Article

A Grid of Logos in Squares

Let’s build a literal grid of squares, and we’ll put the logos of some magazines centered inside each square. I imagine plenty of you have had to build a logo grid before. You can probably already picture it: an area of a site that lists the donors, sponsors, or that is showing off all the big fancy companies that use some product. Putting the logos into squares is a decent way of handling it, as it forces some clean structure … Read article “A Grid of Logos in Squares”

Video

#179: A Grid of Squares

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”
Article

4 CSS Grid Properties (and One Value) for Most of Your Layout Needs

CSS Grid provides us with a powerful layout system for websites. The CSS-Tricks guide gives you a comprehensive overview of Grid’s properties with layout examples. What we’re going to do here is a reverse approach to show you the smallest possible set of grid properties you need to know to meet most of your layout needs.… Read article “4 CSS Grid Properties (and One Value) for Most of Your Layout Needs”

Link

Careful with Nested `display: grid; height: 100%;`

Article

Responsive Grid Magazine Layout in Just 20 Lines of CSS

I was recently working on a modern take of the blogroll. The idea was to offer readers a selection of latest posts from those blogs in a magazine-style layout, instead of just popping a list of our favorite blogs in the sidebar.

The easy part was grabbing a list of posts with excerpts from our favorite RSS feeds. For that, we used a WordPress plugin, Feedzy lite, which can aggregate multiple feeds into a single time-ordered list — perfect … Read article “Responsive Grid Magazine Layout in Just 20 Lines of CSS”