Relationship of grid layout to other layout
Grid and flexbox

如果屏幕上有很多剩余的空间,flex布局会均分成5列,而grid布局则会始终为3列,并且余下的两个item也长度也 相同,而如果屏幕宽度调整为小于200时,flex布局会弹性地变为1列,但是grid布局始终未3列

Flexbox Layout(Content Out)
One
Two
Three
Four
Five
Grid Layout(Layout In)
One
Two
Three
Four
Five
auto-fill

自始至终,item的长度为200px,在屏幕变小于200的时候,会变成单独的行,但是长度依旧保持在200px

One
Two
Three
auto-fill & minmax(200px, 1fr)

flex布局有一点不同的是,在最开始的分配的时候grid布局会优先划分布局,即会优先规定出屏幕中可以最大容忍出 多少个符合条件(这里是最小为200px, 最大为1fr)的item数量,然后依次填充

One
Two
Three
Grid and absolutely positioned elements

如果父容器有定位标识relative Or absolute等,那么下面的子item会根据原始它们应该布局的位置定位,反之如果父容器没有 定位标识,那么应用了position: absolute;会脱离gird布局,并且按照CSS传统的方式布局。

One
Two
This block is absolutely positioned. In this example the grid container is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the area it has been placed into.
Four
Grid and display: contents

display: contens;会将应用在这个元素下子元素或伪元素提升到与父元素相同的层级,就好像是父元素消失了一样。下面的这个例子中,嵌套的子元素会以正常的块级元素显示

Nested A
Nested B
Nested C
Two
Three
Four
Five

而当给box1应用了display: contens;之后,就会发现子元素也应用了grid布局

Nested A
Nested B
Nested C
Two
Three
Four
Five