Figma背后的CSS

Aha! Develop is a fully extendable agile development tool — customize how you work. Get started now.ads via Carbon

Aha！Develop是一个完全可扩展的敏捷开发工具 - 定制你的工作方式。现在就开始吧。广告通过Carbon

While learning how to build a Figma plugin, I stumbled upon a few interesting usages of Flexbox and Grid in Figma. When I found them, I just got distracted and couldn’t resist digging more.

在学习如何构建Figma插件时，我偶然发现了Flexbox和Grid在Figma中的一些有趣用法。当我发现它们时，我就分心了，忍不住想多挖点。

Flexbox and Grid have been providing us web developers with lots of new capabilities to build new layouts, and what I will show you in this article is just that.

Flexbox和Grid一直在为我们网络开发者提供很多新的能力来构建新的布局，而我将在本文中向你展示的就是这个。

To move along with this article, you don’t need to have a detailed knowledge of Flexbox or Grid, and I will try to explain most examples from the ground up.

要继续阅读本文，你不需要对Flexbox或Grid有详细的了解，我将尝试从头开始解释大多数例子。

Let’s get discovering.

让我们开始发现。

Introduction

简介

The purpose of this write-up is to show how powerful flexbox and grid are and to highlight those interesting use-cases for them. There might be a few bits that are focused on subtle UI details which I like very much.

这篇文章的目的是为了展示flexbox和grid的强大功能，并强调它们的那些有趣的应用案例。可能有一些地方集中在微妙的UI细节上，我非常喜欢。

Using CSS Grid

使用CSS网格

On the right side of Figma, we have the default “Design” tab. When selecting an element on the canvas, we can see its x-axis, y-axis, width, and height values. This also can be different depending on the element being a text, group, frame, and more.

在 Figma 的右侧，我们有默认的 "设计 "标签。在画布上选择一个元素时，我们可以看到它的X轴、Y轴、宽度和高度值。这也可以根据元素是文本、组、框架等而有所不同。

What I found interesting here is using CSS grid for each row in the design tab. I dig that so, so much.

我发现这里有趣的是在设计标签中的每一行都使用了CSS网格。我非常非常喜欢这个方法。

Consider the following figure.

请看下图。

Notice how we have many lines. Those are for the 28 columns, yes! You read that right. Any row in the design tab is built on top of that grid.

请注意我们有很多行。这些是为28个栏目准备的，是的!你没看错。设计标签中的任何一行都是建立在该网格之上的。

Each column has a width of 8px.

每一列的宽度为8px 。

.raw_components--_singleRow { display: grid; grid-template-columns: repeat(28, 8...