When I encounter a new product, one of the first things that comes to mind is how they implemented the CSS. This was no different when I came across Threads by Meta. I quickly explored the mobile app and noticed that I could preview public posts on the web.

This presented an opportunity for me to dig deeper. I came across a few interesting findings, which I will discuss in this article.

Let’s dive in!

Using CSS grid for the post layout

One of the most noteworthy use cases of CSS Grid in a production app is found in Threads. CSS Grid is used to build the post layout.

Take a look:

:root {
  --barcelona-threadline-column-width: 48px;
}

.post {
  display: grid;
  grid-template-columns:
    var(--barcelona-threadline-column-width)
    minmax(0, 1fr);
  grid-template-rows: 21px 19px max-content max-content;
}

Fun fact: the first grid column is named --barcelona. I’m curious to know the reason behind this choice.

The post layout consists of a 2-column * 4-row grid. There is no main container; each item within the post is manually placed using the grid-column and grid-row properties.

The user avatar

.post-avatar {
  padding-top: 4px;
  grid-row: 1 / span 2;
  grid-column: 1;
}

The avatar is positioned in the first column and spans the first two rows. It’s worth noting the presence of padding-top. Although I couldn’t find a specific reason for it in the production code, it seems to be fine-tuning the UI alignment.

Here is a before & after look for an avatar with and without the padding-top treatment:

The other reason for applying the padding-top here could be to push the avatar all the way down and make it closer to the line.

Using odd values for the grid rows

Why use 21px and 19px as row values? After inspecting further, it seems to be a form of fine-tuning for the UI. The sum of the row heights is 40px, which accounts for the avatar height plus the padding-top (36px + 4px).

You might be curious why these values are not standardized. Design systems are commonly associated with the belief that designers must strictly follow predefined rules for UI elements.

However, this example shows that using manually adjusted values can be acceptable. It’s okay to deviate from strict guidelines in certain situations.

Limitations of Using Fixed-Size Rows

Due to the fixed widths of the first two rows, it’s not possible to add padding to them. Nevertheless, as long as you’re aware of this limitation, it can be worked around by using margins instead.

Here is an example:

Adding top and bottom padding didn’t affect the post header due to the fixed-size rows.

The space between the layout columns feels a bit hacky

The current gap between the layout columns is zero. Instead, the image has a size of 36*36 pixels, whereas its container is 48 pixels in width.

This mimics the spacing here. I don’t know why the team opt-in for that, but I would prefer to use gap instead.

Why not use named CSS