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

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单元工作的一些示例。 这些示例中的网格项放置在具有网格区域的网格上

.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

css 网格布局

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值