CSS Grid 在 IE 浏览器 兼容

html-css021

CSS Grid 在 IE 浏览器 兼容,第1张

现代浏览器 |  IE浏览器

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用于流式内容展示。