CSS Gridcheatsheet

CSS
复制代码
display: grid;
display: inline-grid;
display: subgrid;

CSS
复制代码
grid-template-columns: 1rem 2rem 1rem; /* rem 单位 */
grid-template-columns: 25% 50% 25%; /* 百分比单位 */
grid-template-columns: 1rem auto 1rem 2fr; /* auth 和 fr */
grid-template-columns: repeat(12, 1fr); /* 重复写法 */
grid-template-rows: 1rem 10% auto repeat(5, 10px); /* 可以混合写 */

CSS
复制代码
/* 自动行于列 */
grid-auto-columns: 10px; /* 不论一共有多少列，每列均有相同的宽度 */
grid-auto-rows: 1rem; /* 不论一共有多少行，每列均有相同的高度 */

CSS
复制代码
/* Areas */
grid-template-areas:
  "header header"
  "main aside"
  "footer footer"; /* Grid-style */
grid-template-areas: "header header" "main aside" "footer footer"; /* Inline-style */

CSS
复制代码
/* Template 简写 */
grid-template:
  "header header" auto
  "main aside" 100vh
  "footer footer" 10rem
  / 80% 20%;
/* 上面写法等同于 */
grid-template-columns: 80% 20%;
grid-template-rows: auto 100vh 10rem;
grid-template-areas:
  "header header"
  "main aside"
  "footer footer";

CSS
复制代码
/* Gaps */
grid-row-gap: 1rem;
grid-column-gap: 0.5rem; /* 分别定义不同的值 */
/* 简写 */
grid-gap: 1rem 0.5rem;
grid-gap: 1rem;

CSS
复制代码
/* 元素对齐 */
justify-items: start; /* 左对齐 */
justify-items: center; /* 居中 */
justify-items: end; /* 右对齐 */
justify-items: stretch; /* 拉伸 */

CSS
复制代码
align-items: start;
align-items: center;
align-items: end;
align-items: stretch;

CSS
复制代码
/* place-items 简写 */
place-items: start stretch;
/* 等同于 */
align-items: start;
justify-items: stretch;

CSS
复制代码
/* 内容对齐 */
justify-content: start;
justify-content: center;
justify-content: end;
justify-content: stretch;
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;

CSS
复制代码
align-content: start;
align-content: center;
align-content: end;
align-content: stretch;
align-content: space-around;
align-content: space-between;
align-content: space-evenly;

CSS
复制代码
/* place-content 简写 */
place-content: center start;
/* 等同于 */
align-content: center;
justify-content: start;

CSS
复制代码
/* Automatic grid 定位 */
grid-auto-flow: row; /*  从左至右，然后从上至下 */
grid-auto-flow: column; /* 从上至下，然后从左至右 */
grid-auto-flow: dense; /* 系统自适应 */

CSS
复制代码
/* 简写 */
/* 定义了 grid columns, rows 和 areas */
grid:
  "header header" auto
  "main aside" 100vh
  "footer footer" 10rem
  / 80% 20%; /* 你也可以包括一个 Template 等同于下面. */
grid-template:
  "header header" auto
  "main aside" 100vh
  "footer footer" 10rem
  / 80% 20%; /* 也等同于下面 */
grid-template-columns: 80% 20%;
grid-template-rows: auto 100vh 10rem;
grid-template-areas:
  "header header"
  "main aside"
  "footer footer";
/* 自动 Grid 流 */
grid: 1rem / auto-flow dense 1fr; /* 等同于下面 */
grid-template-rows: 1rem;
grid-auto-flow: dense;
grid-auto-columns: 1fr;
grid: auto-flow dense 1rem / repeat(10, 10%);
grid-auto-flow: dense;
grid-auto-rows: 1rem;
grid-template-columns: repeat(10, 10%);

CSS
复制代码
.grid-child {

CSS
复制代码
/* Column 位置 */
grid-column-start: 1;
grid-column-end: 2;
grid-column: 1 / 2; /* 简写  */
grid-column: 1 / span 2; /* 合并两列 */
grid-column: 1; /* 有且只有一列 */

CSS
复制代码
/* Row 位置 */
grid-row-start: 2;
grid-row-end: 4;
grid-row: 2 / 4; /* 简写 */
grid-row: 2 / span 3; /* 合并三行 */
grid-row: 1; /* 有且只有一行 */

CSS
复制代码
/* Area 定位 */
grid-area: header; /* 你可以命名 grid area */
grid-area: 2 / 1 / 4 / 2; /* 你可以用使用简写，等同于下面 */
grid-row-start: 2;
grid-column-start: 1;
grid-row-end: 4;
grid-column-end: 2;

CSS
复制代码
justify-self: start;
justify-self: center;
justify-self: end;
justify-self: stretch;

CSS
复制代码
align-self: start;
align-self: center;
align-self: end;
align-self: stretch;

CSS
复制代码
/* place-self 简写 */
place-self: start stretch;
/* 等同于 */
align-self: start;
justify-self: stretch;