css 网格布局_CSS网格布局：Fr单元

短命女 2022-12-07 11:53 247阅读 0赞

css 网格布局

### 介绍 **(**Introduction**)** ###

With CSS Grid Layout, we get a new flexible unit: the Fr unit. Fr is a fractional unit and 1fr is for 1 part of the available space. The following are a few examples of the fr unit at work. The grid items in these examples are placed onto the grid with **[grid areas][].**

通过CSS Grid Layout，我们获得了一个新的灵活单元：Fr单元。 Fr是小数单位， 1fr是可用空间的一部分。 以下是fr单元工作的一些示例。 这些示例中的网格项放置在具有**[网格区域][grid areas]**的网格上**。**

.container {
      display: grid;
    
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 100px 200px 100px;
    
      grid-template-areas:
            "head head2 . side"
            "main main2 . side"
            "footer footer footer footer";
    }

The 4 columns each take up the same amount of space.

每4列占用相同的空间。

Head

头

Head 2

头2

Main

主要

Main 2

主2

Side

侧

Footer

页脚

## 使用fr的例子 **(**Examples using fr**)** ##

Here’s the same example from above with different **fr** values. Notice the change in the layout:

这是上面相同的示例，具有不同的**fr**值。 注意布局的变化：

.container {
      /* ... */
    
      grid-template-columns: 1fr 1fr 40px 20%;
      grid-template-rows: 100px 200px 100px;
    
      /* ... */
    }

Head

头

Head 2

头2

Main

主要

Main 2

主2

Side

侧

Footer

页脚

--------------------

In the following last example, the sidebar item covers 2fr, so it’ll be the same width as the items that span the 1st and 2nd columns:

在下面的最后一个示例中，边栏项覆盖2fr，因此其宽度与跨过第一和第二列的项的宽度相同：

.container {
      /* ... */
    
      grid-template-columns: 1fr 1fr 40px 2fr;
      grid-template-rows: 100px 200px 100px;
    
      /* ... */
    }

Head

头

Head 2

头2

Main

主要

Main 2

主2

Side

侧

Footer

页脚

## 混合单位 **(**Mixed Units**)** ##

As you saw in the previous examples, you can mix fr values with fixed and percentage values. The fr values will be divided between the space that’s left after what’s taken by the other values.

如您在前面的示例中看到的，您可以将fr值与固定值和百分比值混合使用。 fr值将在其他值占用的剩余空间之间进行划分。

For example, if you have a grid with 4 columns as in the following snippet, the 1st column will be 300px, the second 80px (10% of 800px), the 3rd and 4th columns will be 210px (each occupying half of the remaining space):

例如，如果您有一个包含4列的网格，如下面的代码片段所示，则第一列将为300px，第二列为80px(800像素的10％)，第三列和第四列将为210px(每个占剩余空间的一半) )：

main {
      width: 800px;
      display: grid;
      grid-template-columns: 300px 10% 1fr 1fr;
      /* 300px 80px 210px 210px */
    
      grid-template-rows: auto;
    }

> 翻译自: [https://www.digitalocean.com/community/tutorials/css-css-grid-layout-fr-unit][https_www.digitalocean.com_community_tutorials_css-css-grid-layout-fr-unit]

css 网格布局

[grid areas]: https://www.digitalocean.com/community/tutorials/css-css-grid-layout-grid-areas
[https_www.digitalocean.com_community_tutorials_css-css-grid-layout-fr-unit]: https://www.digitalocean.com/community/tutorials/css-css-grid-layout-fr-unit