CSS Grid 布局中的各种单位：fr、auto-fit、repeat-JavaScript中文网-JavaScript教程资源分享门户

一直以来，前端开发人员都希望在网页布局方面拥有更多的自由和创造力，而CSS Grid就是这个问题的一个完美解决方案。CSS Grid布局用于创建基于网格的布局，而这种布局通常是在一个行和列的网格系统中进行定义的。

在CSS Grid布局中，有很多可以使用的单位。下面将分别介绍其中三种单位：fr、auto-fit和repeat。

1. fr单位

fr单位是CSS Grid布局中比较常用的一个单位。它可以在网格布局中指定一个可用空间的分数，并指定其占用比例。例如，如果容器的宽度是300px，而其中的三列都是1fr，则每列都会占用100px的宽度。

要注意的是，在使用fr单位时，网格元素首先会根据指定的px,em等单位来分配宽度。如果空间仍然有剩余，则根据每个元素的fr分数来分配宽度。

.container{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

在上面的示例中，容器的宽度为600px，则第一列和第三列都会占用150px，第二列则会占用300px。

auto-fit是一个非常好用的单位，它能够让网格元素自动填满剩余的空间。例如，如果你想在容器中放置一些等宽的元素，那么可以使用auto-fit单位来自动调整布局以适应容器。

.container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

上面的代码中，repeat函数中的auto-fit表示“使列数量适应容器大小”，而minmax则指定了每列在最小和最大宽度之间的大小。

repeat函数是CSS Grid布局中的一个非常强大的函数，可以重复指定的模式。例如，要创建一个4列的网格布局，可以这样做：

.container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

上面的代码中，repeat函数中的4表示重复4次，1fr则表示每列占用网格容器的百分之一。同时，还可以使用repeat函数来创建不规则的布局。

.container{
    display: grid;
    grid-template-columns: repeat(2, 1fr 2fr);
}

上面的代码中，repeat函数首先重复两次，而1fr和2fr表示两个不同的尺寸，然后将它们交替着放置在每一行的两个列中。

通过使用fr、auto-fit和repeat等不同的单位，我们可以在CSS Grid布局中创建出非常灵活和自由的网格布局。这对于开发人员来说是一个非常强大的工具，可以创造出根据页面需求而不同的网格布局。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6487059448841e98945b0629