一、什么是网格布局?

  1. 网格布局是多行弹性布局区域

二、网格布局有什么用?

      与弹性布局相同的是,网格布局在页面上为元素开辟出一片独立区域,可以设置每行宽度和高度,实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变,且与弹性布局不同的是,网格布局的各行互不影响,元素位置固定,不会出现下一行的内容挤到上一行的情况。

三、网格布局的元素宽度

可以为网格布局区域内的每个元素设置宽度和位置
image.png

四、布局的样式

网络布局样式:

ctrl+3选中网格区域,Ctrl+2调出样式配置窗口,配置样式如下图:
image.png

image.png练习:运用网格布局做出如下图所示界面:
image.png