1.网格容器:通过display属性设置属性值为grid或inline-grid可以创建一个网格容器。网格容器中的所有子元素就会自动变成网格项目（grid item）

1.1网格项目默认放在行中，并且跨网格容器的全宽

2.显示网格:使用grid-template-columns和grid-template-rows属性可以显式的设置一个网格的列和行

2.1grid-template-rows指定的每个值可以创建每行的高度。行高的尺寸可以是任何非负值，长度可以是px、%、em等长度单位的值。

item1和item2具有固定的高，分别为50px和100px。因为只定义了两个行的高度值，所以item3和item4的高度是根据其自身的内容来定义

2.2grid-template-columns指定的每个值来创建每列的列宽

item4、item5和item6放置在新的一行（第二行），因为grid-template-columns只定义了三列的大小，它们也分别放置在列1、列2和列3；其中列1、列2和列3的尺寸大小等于item1、item2和item3宽度

fr单位可以帮助我们创建一个弹列的网格轨道。它代表了网格容器中可用的空间（就像Flexbox中无单位的值）

在这个示例中，网格容器分成了4等份（1 + 1 + 2 = 4），每一份（1fr）是网格容器宽度的四分之一。所以item1和item2的宽度是网格容器的四分之一宽，item3是网格容器宽度的四分之二（2fr）

当fr和其它长度单位的值结合在一起的时候，fr是基于网格容器可用空间来计算

在这个示例中，网格容器可用空间是网格宽度减去3rem和25%剩下的宽度，而fr就是基于这个尺寸计算

3.网格轨道最小和最大尺寸:可以通过minmax()函数来创建网格轨道的最小或最大尺寸

minmax()函数接受两个参数：第一个参数定义网格轨道的最小值，第二个参数定义网格轨道的最大值。可以接受任何长度值，也接受auto值。auto值允许网格轨道基于内容的尺寸拉伸或挤压

在这个示例中，第一行的高度最小值是100px，但其最大值为auto，允许行高可以变大超过100px

第一列设置了最小值为auto，但它的最大值是50%，也就是列的最大宽度不会超过网格容器宽度的50%

4.重复网格轨道:使用repeat()可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目

repeat()也接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸

在这个示例中，第一列和最后一列的宽度都是30px，并且它们之间有另列三列，这三列是通过repeat()来创建的，而且每列的列宽是1fr（1fr = (网格宽度 - 30px - 30px) / 3）

CSS Grid布局(1)相关推荐

带你入门 CSS Grid 布局
前言三月中旬的时候,有一个对于 CSS 开发者来说很重要的消息,最新版的 Firefox 和 Chrome 已经正式支 CSS Grid 这一新特性啦.没错:我们现在就可以在最流行的两大浏览器上玩转 ...
ext grid 重新布局_如何让你的 CSS Grid 布局有良好的可访问性
稿件来源:阿里云开发者社区(点击下面"了解更多"查看原文) CSS Grid 可以将元素放入有行和列的网格中,从而让创建二维布局成为可能.有了它,你可以自定义网格的任何形态,例如网 ...
css grid布局
最近在学习css grid布局,为了避免以后忘记了难得查资料,遍写在博客中方便以后查询! 1,display属性 display有三个值, grid :生成一个块级网格 inline-grid :生成 ...
css grid布局_如何使用CSS Grid重新创建Medium的文章布局
css grid布局 When people think of CSS Grid they normally envision image grid layouts and full web page ...
css响应式布局_用 CSS Grid 布局制作一个响应式柱状图
最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...
CSS Grid 布局
什么是 Grid 布局? CSS Grid 布局是二维布局方式,可以同时控制行和列的排布和对齐方式 Grid 由水平线和垂直线构成,两条水平线中间的区域叫做行轨道,两条垂直线中间的区域叫做列轨 ...
CSS Grid 布局完全指南(图解 Grid 详细教程)
CSS Grid 布局完全指南(图解 Grid 详细教程) CSS Grid 布局是 CSS 中最强大的布局系统.与 flexbox 的一维布局系统不同,CSS Grid 布局是一个二维布局系统,也就 ...
html布局间距,CSS Grid布局：列和间距
在上一节介绍了Grid的基础知识,在前一节的基础上介绍Grid的新特性,怎么样来提高间距的设置以使用fr单位和repeat()实现可伸缩性的布局. 可伸缩性单位网格的目的是使我们能正确的控制网格布局 ...
html grid布局,css grid布局使用
Note:设置网格布局后,容器子元素(项目)的float.display:inline-block. display:table-cell. vertical-align 和Column-*等设置都将 ...
css grid布局fr单位理解
转自 fr 简介及实例网格布局支持弹性尺寸(flex-size),这是一个很好的自适应布局技术. fr是一个相对尺寸单位,表示剩余空间做等分,此项分配到的百分比(如果只有一个项使用此单位,那就占剩余 ...

CSS Grid布局(1)

1.网格容器:通过display属性设置属性值为grid或inline-grid可以创建一个网格容器。网格容器中的所有子元素就会自动变成网格项目（grid item）

1.1网格项目默认放在行中，并且跨网格容器的全宽

2.显示网格:使用grid-template-columns和grid-template-rows属性可以显式的设置一个网格的列和行

2.1grid-template-rows指定的每个值可以创建每行的高度。行高的尺寸可以是任何非负值，长度可以是px、%、em等长度单位的值。

item1和item2具有固定的高，分别为50px和100px。因为只定义了两个行的高度值，所以item3和item4的高度是根据其自身的内容来定义

2.2grid-template-columns指定的每个值来创建每列的列宽

item4、item5和item6放置在新的一行（第二行），因为grid-template-columns只定义了三列的大小，它们也分别放置在列1、列2和列3；其中列1、列2和列3的尺寸大小等于item1、item2和item3宽度

fr单位可以帮助我们创建一个弹列的网格轨道。它代表了网格容器中可用的空间（就像Flexbox中无单位的值）

在这个示例中，网格容器分成了4等份（1 + 1 + 2 = 4），每一份（1fr）是网格容器宽度的四分之一。所以item1和item2的宽度是网格容器的四分之一宽，item3是网格容器宽度的四分之二（2fr）

当fr和其它长度单位的值结合在一起的时候，fr是基于网格容器可用空间来计算

在这个示例中，网格容器可用空间是网格宽度减去3rem和25%剩下的宽度，而fr就是基于这个尺寸计算

3.网格轨道最小和最大尺寸:可以通过minmax()函数来创建网格轨道的最小或最大尺寸

minmax()函数接受两个参数：第一个参数定义网格轨道的最小值，第二个参数定义网格轨道的最大值。可以接受任何长度值，也接受auto值。auto值允许网格轨道基于内容的尺寸拉伸或挤压

在这个示例中，第一行的高度最小值是100px，但其最大值为auto，允许行高可以变大超过100px

第一列设置了最小值为auto，但它的最大值是50%，也就是列的最大宽度不会超过网格容器宽度的50%

4.重复网格轨道:使用repeat()可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目

repeat()也接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸

在这个示例中，第一列和最后一列的宽度都是30px，并且它们之间有另列三列，这三列是通过repeat()来创建的，而且每列的列宽是1fr（1fr = (网格宽度 - 30px - 30px) / 3）

CSS Grid布局(1)相关推荐

最新文章

热门文章