CSS网格布局指南

该CSS网格布局模块出厂时带有一个新的CSS单元称为fr单元。尽可能简单,fr就是“分数”一词的缩写。新单元可以快速将网格分层成比例的列或行。因此,创建完全响应灵活的网格几乎变得轻而易举。 由于分数单元与网格布局模块一起引入,您可以在支持CSS网格的任何浏览器中使用。如果您还想支持旧版浏览器,这里是一个很好的CSS网格聚合填充,可以让您不仅可以使用fr单元,还可以使用其他网格功能。 基本用法 首先,我们来看一下使用分数单位的基本网格。下面的布局将空格分成三个等宽列和两个等高的行。 在属于HTML由6周的div打上.box阶级,一个内部.wrapper的div。 HTML 1 2 3 4 五 6 7 8 < div class = “wrapper” >    < div class = “box box-1” >1.</ div >    < div class = “box box-2” >2.</ div >    < div class = “box box-3” >3.</ div >    < div class = “box box-4” >4.</ div >    < div class = “box box-5” >5.</ div >    < div class = “box box-6” >6.</ div > </ div >   要使用网格布局模块,您需要将display: grid;CSS属性添加到包装器。的grid-template-columns属性使用fr单元作为值; 该三列的比为1:1:1。 对于网格行(grid-template-rows属性),我没有使用fr单位,因为只有包装器具有固定的高度才有意义。否则,在某些设备上可能会产生奇怪的结果,但是即使这样,fr设备仍然保持这个比例(这是巨大的)。 该grid-gap属性在框之间添加一个10像素的网格。如果您不希望任何差距只是删除此属性。 CSS 1 2 3 4 五 6 7 8 9 10 11 12 .wrapper {    display : grid;    grid-template-columns: 1 fr 1 fr 1 fr;    grid-template-rows: 200px 200px ;    grid-gap: 10px ; } .box {    color : white ;    text-align : center ;    font-size : 30px ;    padding : 25px ; } 注意上面的CSS不包含一些基本的样式,如背景颜色。您可以在文章末尾的演示中找到完整的代码。 变化率 当然,你不仅可以使用1:1:1,还可以使用任何比例。以下,我使用1:2:1的分数,也将空间分为三列,但中间的列将是其他两个宽度的两倍。 我也增加了价值,grid-gap以便您可以看到它如何更改布局。基本上,浏览器从视口宽度中扣除网格间隙(在本示例中,网格间距加起来为80像素),并根据给定的分数对其余部分进行分割。 CSS 1 2 3 4 五 6 .wrapper {    display : grid;    grid-template-columns: 1 fr 2 fr 1 fr;    grid-template-rows: 200px 200px ;    grid-gap: 40px ; } 结合fr其他CSS单位 您也可以将该单元与任何其他CSS单元结合使用。例如,在下面的例子中,我使用了我的网格的比例。fr60% 1fr 2fr 那么这是如何工作的?该浏览器分配该视口宽度的60%到第一列。然后,它将剩余的空间分成1:2分数。 同样的事情也可以写成60% 13.33333% 26.66667%。但坦率地说,为什么会有人想使用这种格式?分数单位的巨大优势在于它提高了代码的可读性。此外,它是完全准确的,因为百分比格式仍然只增加99.9999%。 CSS 1 2 3 4 五 6 .wrapper {    display : grid;    grid-template-columns: 60% 1 fr 2 fr;    grid-template-rows: 200px 200px ;    grid-gap: 10px ; } 除了百分比,你也可以用其他的CSS单位连同部分单元,例如pt,px,em,和rem。 添加空格 fr 如果你不想让你的设计变得混乱,并添加一些空格到你的网格怎么办?分数单位也有一个简单的解决方案。 您可以看到,这个网格有一个空列,而它仍保留所有六个框。对于这种布局,我们需要将空间分成四列而不是三列。所以,我们使用属性的1fr 1fr 1fr 1fr值grid-template-columns。 我们在grid-template-areas属性中添加空列,使用点表示法。基本上,此属性允许您引用指定的网格区域。而且,您可以grid-area使用您需要为每个区域单独使用的属性来命名网格区域。 CSS 1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 .wrapper {    display : grid;    grid-template-columns: 1 fr 1 fr 1 fr 1 fr;    grid-template-rows: 200px 200px ;    grid-gap: 10px ;    grid-template-areas:      “box-1 box-2 . box-3”      “box-4 box-5 . box-6” ; } .box -1 {    grid-area: box -1 ; } .box -2 {    grid-area: box -2 ; } .box -3 {    grid-area: box -3 ; } .box -4 {    grid-area: box -4 ; } .box -5 {    grid-area: box -5 ; } .box -6 {   grid-area: box -6 ; } 空白区域不一定必须形成列,它们可以在网格中的任何位置。 该repeat()功能 您还可以将该fr单元与该repeat()功能一起使用以获得更简单的语法。如果您只有一个简单的网格,但是当您想要实现复杂的布局(例如嵌套网格)时,可以派上用场,这不是必需的。 CSS 1 2 3 4 五 6 7 .wrapper {    display : grid;    grid-template-columns: repeat ( 3 , 1 fr);    /* grid-template-columns: 1fr 1fr 1fr; */    grid-template-rows: 200px ;    grid-gap: 10px ; } 该repeat(3, 1fr)语法产生相同的布局的1fr 1fr 1fr。下面的布局与第一个例子相同。 如果增加repeat()函数内的乘数,您将有更多列。例如,repeat(6, 1fr)结果是六个相等的列。在这种情况下,我们所有的框都将在同一行中,这意味着只需要为该grid-template-rows属性使用一个值(200px)即可。 CSS 1 2 3 4 五 6 .wrapper {    display : grid;    grid-template-columns: repeat ( 6 , 1 fr);    grid-template-rows: 200px ;    grid-gap: 10px ; } 您可以使用repeat() 多次。例如,以下示例导致一个网格,其中最后三列是前三个列的两倍。 CSS 1 2 3 4 五 6 .wrapper {    display : grid;    grid-template-columns: repeat ( 3 , 1 fr) repeat ( 3 , 2 fr);    grid-template-rows: 200px ;    grid-gap: 10px ; } 您也可以与其他CSS单元结合repeat()使用。例如,您可以使用200px repeat(4, 1fr) 200px有效的代码。 如果您对如何使用CSS网格模块创建复杂的布局感兴趣,则该repeat()功能和fr单元Rachel Andrew会有一个有趣的博客文章,您可以如何做到这一点。 试用演示 最后,这是我承诺的演示。它使用与本文中第一个示例相同的代码。叉子,看看你可以实现与fr单位。 将简单的CSS网格布局集成到WordPress中

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » CSS网格布局指南
分享到:
赞(0)
广告位820*80