grid布局——从入门到放弃

基本知识

CSS grid 布局有两个核心组成部分：wrapper（网格容器，父元素）和items（网格项，子元素）。

基本属性

属性	含义
display: grid	网格布局（父元素设置）
grid-template-columns: 10px 10rem 10%;	将列分为3份
grid-template-rows: 10px 10rem 10%;	将行分为3份
grid-column-start: 1;grid-column-end: 4;	盒子开始于第一条列线，结束于第四条列线
grid-column: 1 / 4;	以上的简写形式
grid-row-start: 1;grid-row-end: 3;	盒子开始于第一条行线，结束于第三条行线
grid-row: 1 / 4;	以上的代码简写

小案例

  <div class="wrapper">

    <div class="item1">1</div>

    <div class="item2">2</div>

    <div class="item3">3</div>

    <div class="item4">4</div>

    <div class="item5">5</div>

  </div>

.wrapper {

  width: 300px;

  height: 300px;

  background-color: #ddd;

  text-align: center;

  font-size: 30px;

  margin: 0 auto;

  /* 网格布局 */

  display: grid;

  /* 现在是3*3的网格 */

  /* 将行分为3份 */

  grid-template-columns: 33.3% 33.3% 33.3%;

  /* 将列分为2份，不够或者多出都可以 */

  grid-template-rows: 33.3% 33.3% 33.3%;

}

.item1 {

  /* 开始于第一条行网格线，结束于第四条行网格线 */

  grid-row-start:;

  grid-row-end:;

  background-color: red;

}

.item2 {

  /* 简写：开始于第一条行网格线，结束于第三条行网格线 */

  grid-column: 2/4;

  background-color: green;

}

.item3 {

  background-color: yellow;

}

.item4 {

  grid-row: 2/4;

  grid-column: 3/4;

  background-color: pink;

}

.item5 {

  grid-row: 3/4;

  grid-column: 1/3;

  background-color: purple;

}

继续挖掘

基本属性

属性	含义
grid-template-columns: repeat(n, 1fr);	将网格分为n列，1fr表示n分之一份父元素
grid-template-rows: 50px 400px 50px;	分为3行，每一行的高度为50px 400px 50px。父元素
grid-template-areas:	每一个网格项，你可以使用任意名称。“ . ”代表空白网格项。父元素
grid-area:	网格区域(Grid Area)。子元素

小案例

  <div class="wrapper">

    <div class="header">头部</div>

    <div class="menu">菜单</div>

    <div class="content">内容</div>

    <div class="footer">底部</div>

  </div>

.wrapper {

  margin: 100px auto;

  width: 600px;

  background-color: #f5f5f5;

  display: grid;

  /* 分为12列，每一列为1fr */

  grid-template-columns: repeat(12, 1fr);

  grid-template-rows: 50px 400px 50px;

  /* 12 * 3 = 36 个网页项 .为空白网格项*/

  grid-template-areas:

    "h h h h h h h h h h h h"

    "m m c c c c c c c c c c"

    "f f f f f f f f f f . .";

  /* 网格边距 10px */

  grid-gap: 10px;

}

.wrapper .header {

  border-radius: 10px;

  background-color: #bbf1bb;

  /* 占据 名称为 h 的网格项 */

  grid-area: h;

}

.wrapper .menu {

  border-radius: 10px;

  background-color: #fde886;

  /* 占据 名称为 m 的网格项 */

  grid-area: m;

}

.wrapper .content {

  border-radius: 10px;

  background-color: #8afcf9;

  /* 占据 名称为 c 的网格项 */

  grid-area: c;

}

.wrapper .footer {

  border-radius: 10px;

  background-color: #dfb8f8;

  /* 占据 名称为 f 的网格项 */

  grid-area: f;

}

还有一种书写方式实现该布局：

.wrapper {

  margin: 100px auto;

  background-color: #f5f5f5;

  display: grid;

  /* 分为12列，每一列为1fr */

  grid-template-columns: repeat(12, 1fr);

  grid-template-rows: 50px 400px 50px;

  /* 网格边距 10px */

  grid-gap: 10px;

}

.wrapper .header {

  border-radius: 10px;

  background-color: #bbf1bb;

  /* 占据 名称为 h 的网格项 */

  grid-area: 1/1/2/13;

}

.wrapper .menu {

  border-radius: 10px;

  background-color: #fde886;

  /* 占据 名称为 m 的网格项 */

  grid-area: 2/1/3/3;

}

.wrapper .content {

  border-radius: 10px;

  background-color: #8afcf9;

  /* 占据 名称为 c 的网格项 */

  grid-area: 2/3/3/13;

}

.wrapper .footer {

  border-radius: 10px;

  background-color: #dfb8f8;

  /* 占据 名称为 f 的网格项 */

  grid-area: 3/1/4/11;

}

与响应式结合使用

只需要在css中加入

/* 屏幕像素小于等于1000px时 */

@media screen and (max-width: 1000px) {

  .wrapper {

  grid-template-areas:

  "m m m m m m h h h h h h"

  "c c c c c c c c c c c c"

  "f f f f f f f f f f f f";

  }

}

补充理论

display: grid | inline-grid | subgrid;

grid ：生成一个块级网格

inline-grid ：生成一个内联网格

subgrid ：如果你的网格容器本身是另一个网格的网格项（即嵌套网格），你可以使用这个属性来表示

grid-template-columns: repeat(3, 20px [col-start]) 5%; 
等价于：grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%;

网格容器(Grid Container)

网格项(Grid item)

网格线(Grid Line)

网格轨道(Grid Track)

网格单元格(Grid Cell)

网格区域(Grid Area)

参考文档

巴特西

grid布局——从入门到放弃

基本知识

基本属性

小案例

继续挖掘

基本属性

小案例

与响应式结合使用

补充理论

最新文章

热门文章