深入解析CSS第六章网页布局开启新纪元——读书笔记

6.1网页布局开启新纪元

• 构建基础网格
  
  
  
• display: grid定义一个网格容器
  grid-template-columns/grid-template-rows：定义了网格每行每列的大小（fr：代表每一列(或每一行)的分数单位）
  grid-template-columns: 300px 1fr定义了一个固定宽度为300px的列，后面跟着一个会填满剩余可用空间的列。2fr的列宽是1fr的两倍
  grid-gap：定义了每个网格单元之间的间距（grid-gap:0.5em 1em 指定垂直和水平方向的间距）