grid布局

示例html与css

html

<div class="wrapper">
      <div class="one item">One</div>
      <div class="two item">Two</div>
      <div class="three item">Three</div>
      <div class="four item">Four</div>
      <div class="five item">Five</div>
      <div class="six item">Six</div>
</div>

<div class="wrapper">
      <div class="one item">One</div>
      <div class="two item">Two</div>
      <div class="three item">Three</div>
      <div class="four item">Four</div>
      <div class="five item">Five</div>
      <div class="six item">Six</div>
</div>

css

.wrapper {
  margin: 60px;
  display: grid; /* 声明一个容器 */
  grid-template-columns: repeat(3, 200px); /*  声明列的宽度  */
  grid-gap: 20px; /*  声明行间距和列间距  */
  grid-template-rows: 100px 200px; /*  声明行的高度  */
}
.one {
  background: #19CAAD;
}
.two { 
  background: #8CC7B5;
}
.three {
  background: #D1BA74;
}
.four {
  background: #BEE7E9;
}
.five {
  background: #E6CEAC;
}
.six {
  background: #ECAD9E;
}
.item {
  text-align: center;
  font-size: 200%;
  color: #fff;
}

.wrapper {
  margin: 60px;
  display: grid; /* 声明一个容器 */
  grid-template-columns: repeat(3, 200px); /*  声明列的宽度  */
  grid-gap: 20px; /*  声明行间距和列间距  */
  grid-template-rows: 100px 200px; /*  声明行的高度  */
}
.one {
  background: #19CAAD;
}
.two { 
  background: #8CC7B5;
}
.three {
  background: #D1BA74;
}
.four {
  background: #BEE7E9;
}
.five {
  background: #E6CEAC;
}
.six {
  background: #ECAD9E;
}
.item {
  text-align: center;
  font-size: 200%;
  color: #fff;
}

设置父元素为grid容器

css

   .wrapper {
      margin: 60px;
      display: grid; /* 声明一个容器 */
      grid-template-columns: repeat(3, 200px); /*  声明列的宽度  */
      grid-gap: 20px; /*  声明行间距和列间距  */
      grid-template-rows: 100px 200px; /*  声明行的高度  */
    }

   .wrapper {
      margin: 60px;
      display: grid; /* 声明一个容器 */
      grid-template-columns: repeat(3, 200px); /*  声明列的宽度  */
      grid-gap: 20px; /*  声明行间距和列间距  */
      grid-template-rows: 100px 200px; /*  声明行的高度  */
    }

1.，grid容器设置height后，所有行平分容器高度，为每一行设置固定高度后，剩下的行会平分剩余高度

2.grid-gap，设置行列间距

css

 grid-gap: 20px; /* 行列间距 */
 grid-gap: 20px 40px;   /* 行间距和列间距 */

 grid-gap: 20px; /* 行列间距 */
 grid-gap: 20px 40px;   /* 行间距和列间距 */

repeat/auto-fill/fr/minmax

repeat函数用于简化重复的值，该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值
auto-fill关键字表示自动填充，可以用于每行不固定列数，和选择所有行
fr关键字用于分配剩余空间，根据fr的数值进行等分，如1fr 2fr，则分别为1/3 2/3，fr的个数也代表行或列的个数
minmax函数用于设置最小最大行宽或列高，接受两个参数，分别为最小值和最大值

grid-template-columns设置列宽

css

 grid-template-columns: 100px 500px; /* 列数等于宽度个数。列数为2，宽度分别为100px,500px */ 
 grid-template-columns: 100px 1fr; /* 列数等于宽度个数。列数为2，宽度分别为100px，容器剩余宽度 */
 grid-template-columns: 100px minmax(200px, 1fr); /* 列数等于宽度个数。列数为2，宽度分别为100px，最小200px最大所有剩余容器高度 */
 grid-template-columns: repeat(3, 400px); /* 每行固定列数和宽度。三列的宽度都为400px */
 grid-template-columns: repeat(auto-fill, 400px); /* 每行不固定列数，自动根据容器宽度调整列数。每列宽度都为400px */

 grid-template-columns: 100px 500px; /* 列数等于宽度个数。列数为2，宽度分别为100px,500px */ 
 grid-template-columns: 100px 1fr; /* 列数等于宽度个数。列数为2，宽度分别为100px，容器剩余宽度 */
 grid-template-columns: 100px minmax(200px, 1fr); /* 列数等于宽度个数。列数为2，宽度分别为100px，最小200px最大所有剩余容器高度 */
 grid-template-columns: repeat(3, 400px); /* 每行固定列数和宽度。三列的宽度都为400px */
 grid-template-columns: repeat(auto-fill, 400px); /* 每行不固定列数，自动根据容器宽度调整列数。每列宽度都为400px */

grid-template-rows设置行高

css

grid-template-rows: 100px 200px; /* 设置一二行高度分别为100px 200px,其余未设置高度的行平分剩余容器高度 */
grid-template-rows: repeat(auto-fill, 100px); /* 设置每行高度都为100px */

grid-template-rows: 100px 200px; /* 设置一二行高度分别为100px 200px,其余未设置高度的行平分剩余容器高度 */
grid-template-rows: repeat(auto-fill, 100px); /* 设置每行高度都为100px */

grid-auto-rows设置行高

css

grid-auto-rows: 100px ; /* 所有行高为100px*/
grid-auto-rows: 100px 200px; /* 第一行行高为100px，第二行行高为200px，剩余行行高高为100px */
grid-auto-rows: 100px 1fr;  /* 第一行行高为100px，第二行行高为容器剩余高度，剩下行高为100px */
grid-auto-rows: 100px minmax(200px, 1fr) /* 第一行行高为100px，第二行行高最小为200px，最大为容易所有剩余高度 */

grid-auto-rows: 100px ; /* 所有行高为100px*/
grid-auto-rows: 100px 200px; /* 第一行行高为100px，第二行行高为200px，剩余行行高高为100px */
grid-auto-rows: 100px 1fr;  /* 第一行行高为100px，第二行行高为容器剩余高度，剩下行高为100px */
grid-auto-rows: 100px minmax(200px, 1fr) /* 第一行行高为100px，第二行行高最小为200px，最大为容易所有剩余高度 */

grid-column

是 grid-column-start 和 grid-column-end 的简写属性

grid-row

是 grid-row-start和 grid-row-end 的简写属性

Autoprefixer适配grid

https://github.com/postcss/autoprefixer
https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/

Autoprefixer不支持repeat auto-fit auto-fill

css

.grid {
  /* This will never be IE friendly */
  grid-template-columns: repeat(auto-fit, min-max(200px, 1fr))
}

.grid {
  /* This will never be IE friendly */
  grid-template-columns: repeat(auto-fit, min-max(200px, 1fr))
}

ie11下flex布局align-items：center不居中无法生效

与min-height会冲突

place-items

CSS 中的 place-items 是一个简写属性，它允许你在相关的布局（如 Grid 或 Flexbox）中可以同时沿着块级和内联方向对齐元素 (例如：align-items 和 justify-items 属性) 。如果未提供第二个值，则第一个值作为第二个值的默认值。

展开查看

11111

KaTeX

You can render LaTeX mathematical expressions using KaTeX:

The Gamma function satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral

$$ \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt,. $$

You can find more information about LaTeX mathematical expressions here.

grid布局 #

示例html与css #

repeat/auto-fill/fr/minmax #

grid-template-columns设置列宽 #

grid-template-rows设置行高 #

grid-auto-rows设置行高 #

grid-column #

grid-row #

Autoprefixer适配grid #

Autoprefixer不支持repeat auto-fit auto-fill #

ie11下flex布局align-items：center不居中无法生效 #

place-items #

KaTeX #