display: grid| display: -ms-grid //加前缀-ms
grid-template-columns: repeat(12, 1fr) | -ms-grid-columns: (1fr)[12]//重复函数
grid-template-columns: 1fr repeat(3, 20px 1fr)| -ms-grid-columns: 1fr (20px 1fr)[3]
grid-template-columns:100px minmax(200px,500px) 1fr| -ms-grid-columns:100px minmax(200px,500px) 1fr//minmax函数
当值为auto时不起作用。minmax(50px,auto)
单元格占行:现代浏览器
grid-column:1/2
grid-row:1/2
单元格占行:IE浏览器
-ms-grid-column:1
-ms-grid-column-span:1
-ms-grid-row:1
-ms-grid-row-span:1
https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/
使用代码可以时限自动换行。IE浏览器使用样式tablelayoutfixed,引用内容为abcdefghigklmnopqrstuvwxyz1234567890。即可实现浏览器自动换行。
CSSGrid网格布局又称为Grid网格,是一个二维的基于网格的布局系统,它的目标是完全改变我们基于网格的用户界面的布局方式。CSS一直用来布局我们的网页,但一直以来都存在这样或那样的问题。
一开始我们用表格table,然后是浮动float,再是定位postion和内嵌块inline-block,但是所有这些方法本质上都是只是hack而已,并且遗漏了很多重要的功能例如垂直居中。
Flexbox的出现很大程度上改善了我们的布局方式,但它的目的是为了解决更简单的一维布局,而不是复杂的二维布局实际上Flexbox和Grid能协同工作,而且配合得非常好。Grid网格布局是第一个专门为解决布局问题而创建的CSS模块,只要我们一直在制作网站,我们就一直要讨论这些问题。
css的grid布局和表格的区别如下:
grid是固定大小的,table大小可变
grid继承自面板元素,table继承自块元素
grid用于表单内,用于显示内容,table用于流式内容展示。