grid布局有以下属性：
- grid-template-columns：设置列的宽度和数量。
- grid-template-rows：设置行的高度和数量。
- grid-template-areas：设置区域布局，通过给每个区域命名来实现。
- grid-template：同时设置列宽、行高、区域布局的简写属性。
- grid-column-gap：设置列之间的间距。
- grid-row-gap：设置行之间的间距。
- grid-gap：同时设置列间距和行间距的简写属性。
- grid-auto-columns：设置自动布局时自动分配列的宽度。
- grid-auto-rows：设置自动布局时自动分配行的高度。
- grid-auto-flow：设置自动布局时内容该如何分配，默认为row。
- grid-column-start：设置一个单元格的列起始位置。
- grid-column-end：设置一个单元格的列结束位置。
- grid-row-start：设置一个单元格的行起始位置。
- grid-row-end：设置一个单元格的行结束位置。
- grid-column：同时设置一个单元格的列起始位置和结束位置的简写属性。
- grid-row：同时设置一个单元格的行起始位置和结束位置的简写属性。
- justify-items：设置单元格内部的对齐方式。
- align-items：设置单元格内部的对齐方式。
- place-items：同时设置单元格内部的对齐方式的简写属性。
- justify-content：设置整个grid内容的水平对齐方式。
- align-content：设置整个grid内容的垂直对齐方式。
- place-content：同时设置整个grid内容的对齐方式的简写属性。
- justify-self：设置单元格本身的水平对齐方式。
- align-self：设置单元格本身的垂直对齐方式。
- place-self：同时设置单元格本身的对齐方式的简写属性。