Digging deep into Threads App post layout, I further deepened my understanding of CSS grid layout

When I come across a new product, the first thing I think about is how they implement CSS. It was no exception when I came across Meta's Threads. I quickly explored the mobile app and noticed that I could preview public posts on the web.

This provided me with an opportunity to dig deeper. I made some interesting discoveries, which I discuss in this article.

Let's dig deeper!

Post layout with CSS Grid

One of the most notable use cases for CSS Grid in production applications is 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 column of the grid is named --barcelona. I'm curious about the reason for choosing this name.

The post layout consists of 2 columns * 4 rows grid. No main container; use the grid-column and grid-row attributes to manually place each item in the post

profile picture

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

The avatar is in the first column, spanning the first two rows. It is worth noting that padding-top exists. While I can't find a specific reason for this in production code, it appears to be fine-tuning the UI alignment.

Here's how the avatar looks before and after with and without padding-top:

Another reason to apply padding-top might be to move the avatar down and bring it closer to the lines.

Use odd values ​​for grid rows

What is the reason for the odd value as the height of the grid row? Upon further inspection, it appears to be a way to fine-tune the UI. The sum of the line heights is 40px, this includes the height of the avatar and the padding-top (36px + 4px).

One might wonder why these values ​​are not normalized. A design system is often considered a belief that designers must strictly follow predefined rules for UI elements.

However, this example shows that it is acceptable to use manually adjusted values. In some cases, it is acceptable to deviate from strict guidelines.

Limitations on using fixed-size rows

Due to the fixed width of the first two rows, it is not possible to add padding to them. However, as long as you are aware of this limitation, you can work around it by using margins.

Here is an example:

Since the row size is fixed, adding top and bottom padding will not affect the post title.

 Space between layout columns feels a bit messy

Currently the spacing between layout columns is zero. Instead, the image has a size of 36*36 pixels, while its container has a width of 48 pixels.

This simulates the spacing here. I don't know why the team chose this approach, but I prefer to use the gap property.

Why not use named CSS grid regions instead?

From what I've observed so far, there are three grid layout variants, all of which can benefit from using named grid areas.

I tried duplicating the grid and building it based on named regions. It looks easier to scan than specifying the column and row values.

To demonstrate this, let's assign a grid-area to each item in the layout:

.AvatarContainer {
  grid-area: avatar;
}

.HeaderContainer {
  grid-area: header;
}

.BodyContainer {
  grid-area: body;
}

.ThreadlineContainer {
  grid-area: line;
}

.FooterContainer {
  grid-area: footer;
}

Method 1: Default

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

Note the use of . to represent white space.

Variation 2: Reply

Variation is when someone replies to another.

.post--reply {
  grid-template-rows: 36px 0 max-content max-content;
  grid-template-areas:
    "avatar header"
    "body body"
    "body body"
    "footer footer";
}

Variation 3: Threaded Connection Thin Wire

.post--withLine {
  grid-template-areas:
    "avatar header"
    "avatar body"
    "line body"
    "footer footer";
}

The use of named grid areas here makes it possible to change the layout by editing in only one place.

SVG Thin Line Processing

To be honest, it was the threads in the Threads app that first caught my attention. I'm curious about how it's structured because I wrote about a similar topic a few weeks ago.

See the image below:

The line connecting my avatar to Mark's avatar is an SVG path. It consists of three parts.

The length of the first part is calculated in JavaScript.

Inline CSS Variables for Grid

I'm happy to see large applications like Threads using what I and many others are advocating.

In user profiles, the tab grid layout is built using an inline CSS variable containing the number of tabs.

Very useful. We just need to change the value of the CSS variable when the number of tabs increases. Pretty neat, right?

overflow newline

I noticed the use of overflow-wrap: anywhere in the body of the post. I have not used or heard of this keyword before. I use break-word.

According to MDN, it's the same as break-word, but with an extra:

The chance of soft line breaks introduced by word breaking is taken into account when calculating the minimum content intrinsic size.

I still don't see a difference between using break-word and anywhere. If anyone on the Threads team is reading this, I'm very curious why.

Use of Dynamic Viewport Units

I like to use the dynamic viewport unit dvh in the splash screen.

Defensive CSS Strategies

To ensure flexbox layouts don't break due to minimum content-length, use min-width: 0 to reset the behavior.

in conclusion

That's it for today. I love examining the CSS and seeing how the Threads team builds the product. I'm sure there's a lot more I haven't noticed since this is just a preview version on the web.

Due to the limited space of the article, today’s content will be shared here. At the end of the article, I would like to remind you that the creation of articles is not easy. If you like my sharing, please don’t forget to like and forward it, so that more people in need See. At the same time, if you want to gain more knowledge of front-end technology, welcome to follow me, your support will be the biggest motivation for me to share. I will continue to output more content, so stay tuned.