5分钟入门CSS GRID layout

曾经在视频网站看过国外的关于css grid layout演讲,一看视频时长就关了。。。后来在一个项目里用了一下,发现其实要简单使用起来没有那么多名堂。

试想一下这个场景:当页面左侧有一个只有window高度一样高的菜单,而右侧的主要内容却高过这个菜单,我们无法得知右侧内容的高度来写给菜单,却要保证左侧菜单和右侧内容一样高(通常是为了background-color),如果强行用float解决了之后,有另一个同样的页面右侧内容比菜单要矮,是不是可能又要重写样式了?

以这个为目标写一个简单的html框架

开始第一行CSS代码

或者

这样