这是一个grid的例子
什么是main标签？他的作用是什么？我们为什么要用这个main标签？
可以知道这是一种规范，并不会影响任何布局
那么我们来正式布局:
Thing u want?
im the top
im content content wowow zzz lol
the winter is coming
im content content wowow zzz lol for us
im the top
im content content wowow zzz lol
im the top
im content content it can save you wowow zzz lol
im the top
im content content wowow zzz lol
im the top
im content content breath wowow zzz lol
im the top
im content content wowow zzz lol
im the top
im content content wowow zzz lol sometime in life is not just wakeup and breath
im the top
im content content it can save you wowow zzz lol
这里利用了@supports(display:grid)，目的是为了兼容那些不支持grid的浏览器，你可以把display:grid修改成ggggggggrid，这样就可以看到不支持的浏览器的布局了
里面利用了很多技巧，真心劝你自己手动撸出来一个。为什么要利用两个Grid? 方便管理，符合格式规范。
为什么两个Grid要做到重合？重合性，可以让info和header和ul-grid 布局之间的配合。这里注意下Grid的设置，ul-grid的单位和父Grid的单位，推荐用rem或者vw，因为 我在做这个布局的时候，利用了fr，但是这两个布局不会重合，原因出在我的ul-grid是放在一个clomun的cell中，导致没有剩余空间。那为什么我要ul放在一个cell而不是一个area?好吧，其实我也在琢磨这个问题，其实Jensimmons 把grid-column 打多了一个s进去，这是个BUG。
参考 Link