网格布局允许指定区域,一个区域由单个或多个单元格组成。根据上一节学习的内容,请将"section"设置为网格布局容器,并且生成一个3x3的网格,该网格容器项的宽度、高度都为100px。再给容器添加"grid-template-areas: 'a b c''d e f''g h i'"属性,表示3x3的网格区域划分从左到右、从上到下依次为a、b、c、d、e、f、g、h、i。现在给第一个"article"标签设置"grid-area: e"属性,此时可以看到数字1已经被移动到了最中间的区域,即区域"e"。 进入下一节的学习吧。
加载中...