grid

描述

该 grid 属性确定网格布局中列和行的数量、名称和宽度，设置网格布局模板，引用使用 grid-area 属性设置的元素区域的名称，设置布局网格容器中隐式创建的行和列的大小，它还允许您指定隐式创建的布局元素的自动放置算法的工作方式， 指示它们将如何放置在布局网格中。它是以下属性的简写属性： grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, grid-auto-flow.

效果展示

语法

grid: <grid-template> | <grid-template-rows> / [ auto-flow && dense?] <grid-auto-columns>? | [ auto-flow && dense?] <grid-auto-rows>? / <grid-template-columns>;

值

• <grid-template> 定义 grid-template 包括 grid-template-columns, grid-template-rows, grid-template-areas.
• <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? 通过 grid-template-rows 属性显式设置行轨道（并将 grid-template-columns 属性设置为 none）并指定如何通过 grid-auto-columns 自动重复列轨道（并将 grid-auto-rows 设置为 auto）来设置自动流。grid-auto-flow也相应地设置为列，如果指定，则为密集。所有其他格网子属性将重置为其初始值。
• [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> 通过 grid-template-columns 属性显式设置列轨道（并将 grid-template-rows 属性设置为 none）并指定如何通过 grid-auto-row 自动重复行（并将 grideauto-columns 设置为 auto）来设置自动流。grid-auto-flow也相应地设置为行，如果指定，则为密集。所有其他格网子属性将重置为其初始值。