Grid

子元素

display

为子级建立新的网格格式化上下文。

 
display: grid
 
display: inline-grid

grid-template

定义网格的行和列。

 
grid-template-columns: 12px 12px 12px;
grid-template-rows: 12px 12px 12px;
 
grid-template-columns: repeat(3, 12px);
grid-template-rows: repeat(3, auto);
 
grid-template-columns: 8px auto 8px;
grid-template-rows: 8px auto 12px;
 
grid-template-columns: 22% 22% auto;
grid-template-rows: 22% auto 22%;

grid-gap

指定列和行间距的大小。

 
grid-row-gap: 1px;
grid-column-gap: 9px;
 
grid-gap: 1px 9px;
 
grid-gap: 6px;

justify-items

沿行轴对齐网格项中的内容。

 
justify-items: start;
 
justify-items: end;
 
justify-items: center;
 
/* 默认 */
justify-items: stretch;

align-items

沿列轴对齐网格项目中的内容。

 
align-items: start;
 
align-items: end;
 
align-items: center;
 
/* 默认 */
align-items: stretch;

justify-content

当总网格大小小于容器时，对齐行轴上的所有网格内容。

 
justify-content: start;
 
justify-content: end;
 
justify-content: center;
 
justify-content: stretch;
 
justify-content: space-around;
 
justify-content: space-between;
 
justify-content: space-evenly;

align-content

当总网格大小小于容器时，对齐列轴上的所有网格内容。

 
align-content: start;
 
align-content: end;
 
align-content: center;
 
align-content: stretch;
 
align-content: space-around;
 
align-content: space-between;
 
align-content: space-evenly;

grid-auto-flow

自动放置未明确放置的网格项目的算法。

 
grid-auto-flow: row;
 
grid-auto-flow: column;
 
grid-auto-flow: dense;