# Grid 网格布局从入门到实践

TIP

上一章我们学习了 Flex 弹性布局,但我们学习完后,就会发现 Flex 弹性布局更适合做一维布局,一行或者一列。

如果我们想要轻松实现多行多列的这种二维布局,就可以用到我们接下来要讲到的 Grid 网格布局。

# 一、Grid 网格布局的基础概念

TIP

在学习 Grid 网格布局前,首先我们来了解下 Grid 网格布局相关的一些基本概念

  • 什么是网格布局
  • 什么是 grid 容器(container)和项目(item)
  • 什么是行、列和单元格
  • 什么是网格线
  • 什么是网格轨道(Grid tracks)
  • 什么是网格区域(Grid areas)
  • 什么是网格间距(Gutters)
  • 什么是网格内容

# 1、什么是网格布局

TIP

  • Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定“项目”所在的单元格,可以看作是二维布局
  • Grid 布局远比 Flex 布局强大,我们之前说 Flex 更适合处理一维布局,单行或单列

image-20220806223226684

# 2、什么是 grid 容器和项目

TIP

  • 采用网格布局的区域,称为 “容器”container)。容器内的直接子元素,称为 “项目”item
  • 通过给元素添加display:griddisplay: inline-grid;来指定元素为 Grid 网格布局
    • display:grid; 元素自身以块级元素显示
    • display: inline-grid; 元素自身以行内块元素显示
  • 任何元素都可以指定为 Grid 网格布局
<style>
  .grid-container {
    display: grid;
    /* display:inline-grid; */
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
  </div>
</body>

注:

以上代码中 class 名为grid-container的 div 就是 Grid 容器,class 名为grid-item的 div 就是 Grid 项目

# 3、什么是行、列和单元格

TIP

  • 容器里面的水平区域称为"行"(row),垂直区域称为"列"(column)。
  • 行和列交叉形成区域,称为"单元格"(cell)。
  • 正常情况下,n行和m列会产生n x m个单元格。
  • 如下图的容器被划分为 3 行 3 列,总共被划分出3 * 3 = 9个单元格

image-20220806224809875

# 4、什么是网格线

TIP

  • 划分网格的线,称为“网格线”(grid line
  • 水平网格线划分出行,垂直网格线划分出列。
  • 正常情况下,n行有n + 1根水平网格线,m列有m + 1根垂直网格线
  • 如下图,Grid 容器划分成3行3列的网格,那就有4根水平网格线和4根垂直网格线

image-20220806225543554

# 5、什么是网格轨道(Grid tracks)

TIP

网格轨道是两条网格线之间的空间,如下图标出的水平方向和垂直方向上的轨道

image-20220806231754660

# 6、什么是网格区域(Grid areas)

TIP

  • 网格区域是由网格中一个或者多个单元格组成的一个矩形区域。有点类似于表格中的合并,单个单元格或多个单元格合并后形成的区域。
  • 也就是意味着,我们把 Grid 容器划分成对应的网格单元格后,我们可以对这些网格单元格做合并操作。
  • 下图中 Grid 容器划分成 3 行 3 列的网格,形成了 9 个单元格,包含 6 个网格区域

image-20220806231354717

# 7、什么是网格间距(Gutters)

TIP

  • 网格间距分为行间距列间距
  • 行与行的间隔,被称为行间距,列与列的间隔,被称为列间距。具体如下图所示

image-20220806230247512

# 8、什么是网格内容区域

TIP

我们知道 Grid 容器的每一个子元素,被称为 Grid 项目。所有 Grid 项目看成一个整体,这个整体我们称为网格内容。

image-20220806235518767

注:

学习了 Grid 网格布局相关的基础概念后,接下来我们就来学习 Grid 容器和 Grid 项目相关的属性,这些属性控制着 Grid 网格的布局效果。

# 二、Grid 容器属性

TIP

  • 当元素设为网格布局以后,容器子元素(项目)的floatdisplay: inline-blockdisplay: table-cellvertical-aligncolumn-*等设置都将失效。
  • 接下来我们来学习 Grid 容器相关的属性,具体如下表格中列出的
属性名 说明
grid-template-columns 定义列,及每一列的列宽
grid-template-rows 定义行,及每一行的行高
row-gap 设置行与行的间隔(行间距)
column-gap 设置列与列的间隔(列间距)
gap column-gaprow-gap的合并简写形式
grid-template-areas 网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。
grid-template-areas属性用于定义区域。
grid-auto-flow 设置容器的子元素排列顺序,默认是 "先行后列"
grid-auto-columns 设置隐式网格的列宽
grid-auto-rows 设置隐式网格的行高
justify-items 单元格中内容在单元格中水平对齐方式
align-items 单元格中内容在单元格中垂直对齐方式
place-items place-items属性是align-items属性和justify-items属性的合并简写形式。
justify-content 设置整个内容区域在容器里面的水平位置
align-content 设置整个内容区域在容器里面的垂直位置
place-content place-content属性是align-content属性和justify-content`属性的合并简写形式
grid-template grid-template属性是grid-template-columnsgrid-template-rowsgrid-template-areas这三个属性的合并简写形式。

# 1、grid-template-columns 和 grid-template-rows 属性

TIP

  • 容器指定了网格布局以后,接着就要划分行和列
  • grid-template-columns属性定义列,及列宽
  • grid-template-rows属性定义行,及行高
  • 以上两属性值的三个不同单位
    • 绝对长度单位 px
    • 百分比%,相对 Grid 容器宽和高而言
    • fr项目所占容器的份数

# (1)绝对长度单位 px

<style>
  .grid-container {
    /* 网格布局 */
    display: inline-grid;
    /* 定义行,3行的行高都是100px */
    grid-template-rows: 100px 100px 100px;
    /* 定义列,3列的宽都是100px */
    grid-template-columns: 100px 100px 100px;
    margin: 100px;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
</body>

以上代码指定了一个三行三列的网格,每一列列宽为100px,第一行行高为100px

image-20220807000443939

# (2)百分比%单位

<style>
  .grid-container {
    /* 网格布局 */
    width: 400px;
    height: 300px;
    border: 3px solid red;
    display: inline-grid;
    /*
            定义了3行,及每一行行高
            第一行高 20% * 300px=60px 
            第二行高 50% * 300px=150px
            第三行高 30% * 300px=90px
        */
    grid-template-rows: 20% 50% 30%;
    /*
            定义了3列,及每一列列宽
            第一列宽 20% * 400px=80px 
            第二列宽 50% * 400px=200px
            第三列宽 30% * 400px=120px
        */
    grid-template-columns: 20% 50% 30%;
    margin: 100px;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
</body>

image-20220807001444295

# (3)fr 关键字

TIP

  • 为了方便表示比例关系,网格布局提供了fr关键字(fraction 的缩写,意为"片段")。
  • 如果所有列或行都用 fr 单位
    • 每一列宽 = 容器宽 * (当前列 fr 值 / 所有列 fr 值总和)
    • 每一行高 = 容器高 *(当前行 fr 值 / 所有行 fr 值总和)
<style>
      .grid-container {
        /* 网格布局 */
        width: 600px;
        display: inline-grid;
        /* 定义2行,第一行高为100px */
        grid-template-rows: repeat(2, 100px);
        /*
              定义3列,3列分别占容器总宽的一个占比
              第1列宽 =600px * 1/(1+2+3)=100px
              第2列宽 =600px * 2/(1+2+3)=200px
              第3列宽 =600px * 3/(1+2+3)=300px
          */
        grid-template-columns: 1fr 2fr 3fr;
        margin: 100px;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>
    </div>
  </body>

image-20220807005848193

  • fr可以与绝对长度的单位结合使用,fr 单位的行或列,表示的是平分剩余空间高或宽
<style>
  .grid-container {
    /* 网格布局 */
    width: 600px;
    display: inline-grid;
    /* 定义2行,第一行高为100px */
    grid-template-rows: repeat(2, 100px);
    /* 
            定义3列
            第1列宽 200px
            第2列宽=(600px-200px)*2/(2+3)=160px
            第3列宽=(600px-200px)*3/(2+3)=240px
        */
    grid-template-columns: 200px 2fr 3fr;
    margin: 100px;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
  </div>
</body>

image-20220807010444967

# (4)repeat() 函数

TIP

  • 有时候,重复写同样的值非常麻烦,尤其网格很多时。这时,可以使用repeat()函数,简化重复的值。
  • repeat()接受两个参数,第一个参数是重复的次数,第二个参数是所要重复的值。
/* 定义行,3行的行高都是100px */
grid-template-rows: repeat(3, 100px);
/* 定义列,3列的宽都是100px */
grid-template-columns: repeat(3, 100px);
  • repeat()用于重复种模式也是可以
/*  定义了6行,第1,4行的高为50px 第2,5行的高为100px,第3,6行的高为80px */
grid-template-rows: repeat(2, 50px 100px 80px);

案例

<style>
    .grid-container {
        /* 网格布局 */
        width: 400px;
        display: inline-grid;
        /* 定义2行,每一行高为100px */
        grid-template-rows: repeat(2, 100px);
        /*
            定义4列
            第1,3列宽为50px
            第2,4列宽为100px
        */
        grid-template-columns: repeat(2, 50px 100px);
        margin: 100px;
    }
</style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
        <div class="grid-item">7</div>
        <div class="grid-item">8</div>
    </div>
</body>

image-20220807002758350

# (5)auto-fill 关键字

TIP

有时,单元格的大小是固定的,但是容器的大小不确定,如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用auto-fill关键字表示自动填充。

grid-template-columns: repeat(auto-fill, 100px);

案例

<style>
  .grid-container {
    /* 网格布局 */
    width: 580px;
    height: 300px;
    border: 2px solid red;
    display: inline-grid;
    /* 定义2行,第一行高为100px */
    grid-template-rows: repeat(2, 100px);
    /* 
        	列为自动填充 最终列数=容器宽 / 100 得到的整数部分
        	最终列数=580/100=5.8 所以最终为5列
        */
    grid-template-columns: repeat(auto-fill, 100px);
    margin: 100px;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
  </div>
</body>

image-20220807004739712

# (6)minmax()

TIP

minmax()函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。

/*
	minmax(100px , 1fr) 表示最小宽为300px,最大为1fr
*/
grid-template-columns: 1fr 1fr minmax(300px, 1fr);
<style>
  .grid-container {
    /* 网格布局 */
    display: grid;
    /* 
            创建3列
        	minmax(300px,1fr)表示最小宽300px,最大宽1fr
            当三列平分容器宽>=300时,三列宽相等
            当三列平分容器宽<300时,第三列宽=300,另外两列宽=(容器宽-300)/2 
        */
    grid-template-columns: 1fr 1fr minmax(300px, 1fr);
  }
  .grid-item:nth-child(1) {
    background-color: skyblue;
  }
  .grid-item:nth-child(2) {
    background-color: pink;
  }
  .grid-item:nth-child(3) {
    background-color: khaki;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
  </div>
</body>

GIF 2022-8-8 15-15-39

# (7)auto 关键字

TIP

  • auto 关键字表示(列宽或行高)由浏览器自已决定长度
  • auto 表示当对应单元格中的元素(如 div)在未设置宽度时,当前列宽为自动计算的宽
  • 如果设置了宽,宽小于单元格计算后宽,则单元格宽以自动计算的为主
  • 如果设置的宽,大于了单元格计算后宽,则单元格宽等于设置的内容宽
grid-template-columns: 100px auto 100px;
<style>
  .grid-container {
    border: 2px solid red;
    /* 网格布局 */
    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 200px auto 200px;
  }
  .grid-item:nth-child(1) {
    background-color: skyblue;
  }
  .grid-item:nth-child(2) {
    background-color: pink;
    /* width: 500px; */
  }
  .grid-item:nth-child(3) {
    background-color: khaki;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
  </div>
</body>

image-20220808153813890

中间一列宽 width:500px 时

.grid-item:nth-child(2) {
  width: 500px;
}

如果 auot 计算的宽小于 500px,则中间一列单元格的宽为 500px

如果大于 500px,则以 auto 计算的宽为主。具体效果如下图

GIF 2022-8-8 15-40-26

# (8)网格线的名称

TIP

grid-template-columns属性和grid-template-rows属性里面,还可以使用方括号,指定每一根网格线的名字,方便以后的引用。

<style>
  .grid-container {
    /* 网格布局 */
    display: grid;
    width: 800px;
    margin: 100px auto;
    /* 定义行 及网格线名称 */
    grid-template-rows: [a1] 200px [a2];
    /* 定义列 及网格线名称 */
    grid-template-columns: [b1] 150px [b2] 200px [b3] auto [b4];
  }
  .grid-item:nth-child(1) {
    background-color: skyblue;
  }
  .grid-item:nth-child(2) {
    background-color: pink;
  }
  .grid-item:nth-child(3) {
    background-color: khaki;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
  </div>
</body>

image-20220808155950248

# 2、row-gap、column-gap、gap 属性

TIP

  • 在早期三个属性的写法分别为:grid-row-gap、grid-column-gap、grid-gap。
  • 根据最新标准,三个属性前的 grid-前缀已经删除。
属性名 说明
row-gap 设置行与行的间隔(行间距)
column-gap 设置列与列的间隔(列间距)
gap row-gapcolumn-gap的合并简写形式
  • 属性值单位为 绝对单位 px 或 百分比%
  • 如果单位是百分比,则百分比相对的是网格容器的百分比
  • gap 后如果只写一个值,表示列间距和行间距一样大小
/*
	gap:10px 20px;是 row-gap:10px 与 column-gap:20px;的简写
*/
gap: 10px 20px;
<style>
  .grid-container {
    /* 网格布局 */
    display: grid;
    grid-template-rows: repeat(2, 100px);
    grid-template-columns: repeat(3, 100px);
    margin: 30px;
    /* 行间距10px 列间距20px */
    gap: 10px 20px;
  }
  .grid-item:nth-child(n) {
    background-color: skyblue;
  }
  .grid-item:nth-child(2n) {
    background-color: pink;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
  </div>
</body>

image-20220808162126096

# 3、grid-template-areas 属性

TIP

  • grid-template-areas 属性用于指定网格区域,一个区域由单个或多个单元格组成。
  • 这个属性需要配合项目属性grid-area一起来使用
  • grid-area属性用于指定 Grid 项目放在哪一个区域。
  • grid-area后的值为区域名
/* 定义3行,每行高为100px */
grid-template-rows: repeat(3, 100px);
/* 定义3列,第列宽为100px */
grid-template-columns: repeat(3, 100px);
/* 每个单元格定义为一个区域,每个区域名分别为 a 到i */
grid-template-areas:
  "a b c"
  "d e f"
  "g h i";

将上面多个单元格合并成一个区域的写法如下:

grid-template-areas:
  "a a b"
  "a a b"
  "c c c";

上面代码将 9 个单元格分成 a,b,c 三个区域

案例应用

<style>
  .grid-container {
    /* 网格布局 */
    display: inline-grid;
    /* 定义3行,每行高为100px */
    grid-template-rows: repeat(3, 100px);
    /* 定义3列,每列宽为100px */
    grid-template-columns: repeat(3, 100px);
    /* 定义了三个区域,区域名分别为 a,b,c */
    grid-template-areas:
      "a a b"
      "a a b"
      "c c c";
    margin: 100px;
  }
  /* 每个区域中文字效果 */
  .grid-item {
    text-align: center;
    line-height: 100px;
    font-size: 30px;
    color: red;
  }
  .grid-item:nth-child(1) {
    /* 将项目放在区域a中 */
    grid-area: a;
    background-color: skyblue;
  }
  .grid-item:nth-child(2) {
    /* 将项目放在区域b中 */
    grid-area: b;
    background-color: pink;
  }
  .grid-item:nth-child(3) {
    /* 将项目放在区域c中 */
    grid-area: c;
    background-color: khaki;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item">a区域</div>
    <div class="grid-item">b区域</div>
    <div class="grid-item">c区域</div>
  </div>
</body>

image-20220808172243503

  • 如果某些区域不需要利用,则使用.)表示
grid-template-areas:
  "a . . b"
  "c . . d"
  "e . . f";
<style>
  .grid-container {
    /* 网格布局 */
    display: inline-grid;
    /* 定义3行,每行高为100px */
    grid-template-rows: repeat(3, 100px);
    /* 定义4列,每列宽为100px */
    grid-template-columns: repeat(4, 100px);
    /* 定义了6个区域,区域名分别为 a,b,c,d,e,f*/
    grid-template-areas:
      "a . . b"
      "c . . d"
      "e . . f";
    margin: 100px;
  }
  /* 每个区域中文字效果 */
  .grid-item {
    text-align: center;
    line-height: 100px;
    font-size: 30px;
    color: red;
  }
  .grid-item:nth-child(1) {
    /* 将项目放在区域a中 */
    grid-area: a;
  }
  .grid-item:nth-child(2) 
    /* 将项目放在区域b中 */ {
    grid-area: b;
  }
  .grid-item:nth-child(3) {
    /* 将项目放在区域c中 */
    grid-area: c;
  }
  .grid-item:nth-child(4) {
    /* 将项目放在区域d中 */
    grid-area: d;
  }
  .grid-item:nth-child(5) {
    /* 将项目放在区域e中 */
    grid-area: e;
  }
  .grid-item:nth-child(6) {
    /* 将项目放在区域f中 */
    grid-area: f;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item">a区域</div>
    <div class="grid-item">b区域</div>
    <div class="grid-item">c区域</div>
    <div class="grid-item">d区域</div>
    <div class="grid-item">e区域</div>
    <div class="grid-item">f区域</div>
  </div>
</body>

image-20220808173719122

注意:

区域的命名会影响到网格线。每个区域的起始网格线,会自动命名为区域名-start,终止网格线自动命名为区域名-end

image-20220808173956643

# 4、grid-auto-flow 属性

TIP

grid-auto-flow 属性决定了项目在容器中的排列顺序。是 “先行后列”,还是 “先列后行”

/* 先行后列 */
grid-auto-flow: row;
属性值 说明
row 默认值,即 "先行后列",即项目默认从左往右 先填满第一行,再开始放第二行,依次下。
column "先列后行",即项目先从上往下填满第一列,再开始放第二列,依次下去
row dense 某些项目指定位置以后,剩下的项目怎么自动放置。
表示 "先行后列",并且尽可能紧密填满,尽量不出现空格。
column dense 某些项目指定位置以后,剩下的项目怎么自动放置。
表示 "先列后行",并且尽量填满空格

案例

<style>
  .grid-container {
    /* 网格布局 */
    display: inline-grid;
    /* 定义3行,每行高为100px */
    grid-template-rows: repeat(3, 100px);
    /* 定义4列,第列宽为100px */
    grid-template-columns: repeat(3, 100px);
    /* 项目放置顺序,先列后行 */
    grid-auto-flow: column;
    margin: 100px;
  }
  /* 每个区域中文字效果 */
  .grid-item {
    text-align: center;
    line-height: 100px;
    font-size: 30px;
    color: red;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
</body>
row 效果 column 效果
image-20220808175400202 image-20220808175459821

提示

row densecolumn dense的效果,我们放在讲 Grid 项目属性grid-column时再来讲解

# 5、grid-auto-columns 和 grid-auto-rows 属性

TIP

在学习这两个属性前,我们先来了解两个概念

什么是显示网格?

使用grid-template-columnsgrid-template-rows指定尺寸创建出来行和列形成的网格。

什么是隐藏网格?

不是grid-template-columnsgrid-template-rows指定尺寸创建出来行和列形成的网格,而是自动布局算法创建的额外的行或列形成的网格。

  • grid-auto-columns :隐式创建的网格纵向轨道(track)的宽度。即设置隐式网格的宽度
  • grid-auto-rows:用于指定隐式创建的行轨道大小。即设置隐式网格的高度
  • grid-auto-columnsgrid-auto-rows的写法与grid-template-columnsgrid-template-rows完全相同。
  • 如果不指定grid-auto-columnsgrid-auto-rows这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽或 行高。

案例

<style>
  .grid-container {
    width: 300px;
    background-color: skyblue;
    /* 网格布局 */
    display: inline-grid;
    /* 定义2行,每行高为100px */
    grid-template-rows: repeat(2, 100px);
    /* 定义3列,列宽自动 */
    grid-template-columns: repeat(3, 100px);
    margin: 100px;
  }
  .grid-item {
    padding: 10px;
    font-size: 30px;
    color: red;
  }
  .grid-item:nth-child(n) {
    background-color: pink;
  }
  .grid-item:nth-child(2n) {
    background-color: khaki;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
</body>

image-20220809154552607

上面案例没有指定隐式网格的行高,则单元格 7-9 的高度为其内容的高度。

# (1)、grid-auto-rows 设置隐式网格高

<style>
  .grid-container {
    width: 300px;
    background-color: skyblue;
    /* 网格布局 */
    display: inline-grid;
    /* 定义2行,每行高为100px */
    grid-template-rows: repeat(2, 100px);
    /* 定义3列,列宽自动 */
    grid-template-columns: repeat(3, 100px);
    /* 隐式网格的高度 */
    grid-auto-rows: 200px;
    margin: 100px;
  }
  .grid-item {
    padding: 10px;
    font-size: 30px;
    color: red;
  }
  .grid-item:nth-child(n) {
    background-color: pink;
  }
  .grid-item:nth-child(2n) {
    background-color: khaki;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
</body>

image-20220809155018134

# (2)、grid-auto-columns 设置隐式网格宽

<style>
  .grid-container {
    width: 300px;
    background-color: skyblue;
    /* 网格布局 */
    display: inline-grid;
    /* 定义2行,每行高为100px */
    grid-template-rows: repeat(2, 100px);
    /* 定义3列,列宽自动 */
    grid-template-columns: repeat(3, 100px);
    grid-auto-flow: column;
    /* grid-auto-rows: 200px; */
    /* 设置隐式网格的列宽 */
    grid-auto-columns: 200px;
    margin: 100px;
  }
  .grid-item {
    padding: 10px;
    font-size: 30px;
    color: red;
  }
  .grid-item:nth-child(n) {
    background-color: pink;
  }
  .grid-item:nth-child(2n) {
    background-color: khaki;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
</body>

image-20220809155515400

注意:

grid-auto-rows属性和grid-auto-columns属性两者同时设置,只会有一个生效。

# 6、justify-items 属性

TIP

justify-items属性设置单元格内容的水平位置

justify-items: center;
属性值 说明
stretch (默认值)拉伸,占满单元格的整个宽度
start 与单元格最左边对齐
end 与单元格最右边对齐
center 单元格内水平对齐
<style>
  .grid-container {
    /* 网格布局 */
    display: inline-grid;
    /* 定义3行,每行高为100px */
    grid-template-rows: repeat(3, 100px);
    /* 定义3列,第列宽为100px */
    grid-template-columns: repeat(3, 100px);
    margin: 100px;
    /* 单元格里面内容对齐方式 */
    justify-items: center;
  }
  /* 每个区域中文字效果 */
  .grid-item {
    font-size: 30px;
    color: red;
  }
  .grid-item:nth-child(n) {
    background-color: skyblue;
  }
  .grid-item:nth-child(2n) {
    background-color: khaki;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
</body>
strecth start
image-20220808185956875 image-20220808185822420
end center
image-20220808190045778 image-20220808190131568

# 7、align-items 属性

TIP

align-items属性设置单元格内容的垂直对齐方式

align-item: stretch;
属性值 说明
stretch (默认值)拉伸,占满单元格的整个高度
start 与单元格最上边对齐
end 与单元格最下边对齐
center 单元格内垂直居中对齐
<style>
  .grid-container {
    /* 网格布局 */
    display: inline-grid;
    /* 定义3行,每行高为100px */
    grid-template-rows: repeat(3, 100px);
    /* 定义3列,第列宽为100px */
    grid-template-columns: repeat(3, 100px);
    margin: 100px;
    /* 单元格里面内容垂直对齐方式 */
    align-items: stretch;
  }
  /* 每个区域中文字效果 */
  .grid-item {
    font-size: 30px;
    color: red;
  }
  .grid-item:nth-child(n) {
    background-color: skyblue;
  }
  .grid-item:nth-child(2n) {
    background-color: khaki;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
</body>
stretch start
image-20220808191006195 image-20220808190844701
end center
image-20220808190936542 image-20220808190806637

# 8、 place-items 属性

TIP

place-items属性是align-items属性和justify-items属性的合并简写形式。

/*
	与单元格上面对齐,水平居中显示
*/
place-items: start center;
  • 如果省略第二个值,则相当于第二值与第一个值相等
start center center
image-20220808191514699 image-20220808191451205

# 9、justify-content 属性

TIP

justify-content属性设置整个内容区域在容器里面的水平位置

justify-content: start;
属性名 说明
start 默认值,对齐容器的左边框
end 对齐容器的右边框
center 容器内部水平居中。
stretch 单元格大小没有指定时,拉伸宽占据整个网格容器。
space-around 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。
space-between 项目与项目的间隔相等,项目与容器边框之间没有间隔。
space-evenly 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。

案例

<style>
  .grid-container {
    width: 300px;
    height: 200px;
    background-color: skyblue;
    /* 网格布局 */
    display: inline-grid;
    /* 定义3行,每行高为50px */
    grid-template-rows: repeat(3, 50px);
    /* 定义3列,列宽自动 */
    grid-template-columns: repeat(3, auto);
    margin: 100px;
    /* 内容区域在容器中的水平对齐方式 */
    justify-content: start;
  }
  .grid-item {
    padding: 10px;
    font-size: 30px;
    color: red;
  }
  .grid-item:nth-child(n) {
    background-color: pink;
  }
  .grid-item:nth-child(2n) {
    background-color: khaki;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
</body>
start end center stretch
image-20220808194726160 image-20220808194812292 image-20220808194828539 image-20220808194850991
space-around space-between space-evenly
image-20220808194923865 image-20220808194957311 image-20220808195027127

# 10、align-content 属性

TIP

align-content属性是整个内容区域的垂直位置。

属性名 说明
start 默认值,对齐容器的起始边框
end 对齐容器的结束边框
center 容器内容垂直居中。
stretch 项目高度没有指定时,项目高度会被拉伸占据整个网格容器。
space-around 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。
space-between 项目与项目的间隔相等,项目与容器边框之间没有间隔。
space-evenly 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。
start end center stretch
image-20220809150334591 image-20220809151034619 image-20220809151121313 image-20220809151312443
space-around space-between space-evenly
image-20220809151348075 image-20220809151422990 image-20220809151500287

# 11、place-content 属性

TIP

place-content属性是align-content 属性和justify-content属性的合并简写形式

place-content: space-between space-between;
<style>
  .grid-container {
    width: 300px;
    height: 200px;
    background-color: skyblue;
    /* 网格布局 */
    display: inline-grid;
    /* 定义3行,每行高为50px */
    grid-template-rows: repeat(3, 50px);
    /* 定义3列,列宽自动 */
    grid-template-columns: repeat(3, auto);
    margin: 100px;
    /* 内容区域在容器中的垂直和水平对齐方式 */
    place-content: space-between space-between;
  }
  .grid-item {
    padding: 10px;
    font-size: 30px;
    color: red;
  }
  .grid-item:nth-child(n) {
    background-color: pink;
  }
  .grid-item:nth-child(2n) {
    background-color: khaki;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
</body>

image-20220809151948616

# 12、grid-template 和 grid 属性

TIP

grid-template属性是grid-template-columnsgrid-template-rowsgrid-template-areas这三个属性的合并简写形式。

/*
	grid-template:grid-template-rows / grid-template-columns
	以下css样式,
	定义了2行, 行高分别为100px 和200px
	定义了2列,列宽分别为 50px 100px
	并没有划分区域
*/
grid-template: 100px 200px / 50px 100px;

定义行列,同时划分区域

/*
    定义行列和区域 
    3行 行高分别为 50px 100px 50px
    3列 列宽分别为 100px 100px 100px
*/
grid-template:
  "a a b" 50px
  "a a b" 100px
  "c c c" 50px / 100px 100px 100px;

案例

<style>
  .grid-container {
    width: 300px;
    background-color: skyblue;
    /* 网格布局 */
    display: inline-grid;
    /*
        	定义行列和区域 
        	3行 行高分别为 50px 100px 50px
        	3列 列宽分别为 100px 100px 100px
        */
    grid-template:
      "a a b" 50px
      "a a b" 100px
      "c c c" 50px / 100px 100px 100px;
    margin: 100px;
  }
  .grid-item {
    padding: 10px;
    font-size: 30px;
    color: red;
  }
  .grid-item:nth-child(1) {
    background-color: pink;
    /* 指定所占区域 */
    grid-area: a;
  }
  .grid-item:nth-child(2) {
    background-color: khaki;
    /* 指定所占区域 */
    grid-area: b;
  }
  .grid-item:nth-child(3) {
    background-color: skyblue;
    /* 指定所占区域 */
    grid-area: c;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
  </div>
</body>

image-20220809164835871

注:

grid属性是grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flow这六个属性的合并简写形式。

因为过于复杂,实际并不会用这种方式,具体的大家可以参考 官方教程做了解 (opens new window) 👆

# 三、Grid 项目的属性

TIP

接下来我们来学习 Grid 项目相关的属性,具体如下表格中列出的

属性 说明
grid-column-start 项目左边框所在的垂直网格线
grid-column-end 项目右边框所在的垂直网格线
grid-row-start 项目上边框所在的水平网格线
grid-row-end 项目下边框所在的水平网格线
grid-column grid-column属性是grid-column-startgrid-column-end的合并简写形式
grid-row grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
grid-area 属性指定项目放在哪一个区域。
grid-area属性还可用作grid-row-startgrid-column-startgrid-row-endgrid-column-end的合并简写形式,直接指定项目的位置。
justify-self
align-self
place-self

# 1、grid-column-start , grid-column-end , grid-row-start , grid-row-end 属性

TIP

项目的位置是可以指定的,指定方法就是通过指定项目的四个边框的位置,四个边框分别定位在哪根网格线。

属性 说明
grid-column-start 项目左边框所在的垂直网格线
grid-column-end 项目右边框所在的垂直网格线
grid-row-start 项目上边框所在的水平网格线
grid-row-end 项目下边框所在的水平网格线
  • 当项目只指定了 4 个属性中的一个,则其它未指定的会采用默认位置,并且一个项目只占一个单元格。
  • 项目的默认位置,由 grid-auto-flow 属性决定
    • 如果值为 row,则会 “先行后列” 进行排列
    • 如果值为 column,则会 “先列后行” 进行排列
    • row dense 表示 “先行后列”,并且尽可能紧密填满,尽量不出现空格。
    • column dense 表示"先列后行",并且尽量填满空格
/*
	下面代码指定项目的
	左边为第2根垂直网格线
	右边为第4根垂直网格线
	所以项目独跨2列,因为水平网格线没有指定,则会采用默认位置,独占一个单元格。
*/
.grid-item {
  grid-column-start: 2;
  grid-column-end: 4;
}

案例

<style>
  .grid-container {
    /* 网格布局 */
    display: inline-grid;
    grid-template: repeat(3, 100px) / repeat(3, 100px);
    margin: 100px;
    /* 先行后列,并尽量填满不留空隙 */
    grid-auto-flow: row dense;
  }
  .grid-item {
    padding: 10px;
    font-size: 30px;
    color: red;
  }
  .item {
    grid-column-start: 2;
    grid-column-end: 4;
    background-color: pink;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
  </div>
</body>
grid-auto-flow:row;
image-20220809172415373
grid-auto-flow:row dense
image-20220809174602746

# (1)通过指定第几个网格线来指定项目位置

<style>
  .grid-container {
    /* 网格布局 */
    display: inline-grid;
    grid-template: repeat(3, 100px) / repeat(3, 100px);
    margin: 100px;
  }
  .grid-item {
    padding: 10px;
    font-size: 30px;
    color: red;
  }
  .item1 {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    /* 背景色粉色 */
    background-color: pink;
  }
  .item2 {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    /* 背景色天蓝色 */
    background-color: skyblue;
  }
  .item3 {
    grid-row-start: 2;
    grid-row-end: 4;
    /* 背景色黄色 */
    background-color: khaki;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item item1">1</div>
    <div class="grid-item item2">2</div>
    <div class="grid-item item3">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
  </div>
</body>

image-20220809175716800

# (2) 通过网格线名字来指定项目的位置

TIP

首先需要指定网格线的名字,然后才可以通过网格线名字指定

/* 网格布局 */
display: inline-grid;
grid-template-columns: [a1] 100px [a2] 100px [a3] 100px [a4];
grid-template-rows: [c1] 100px [c2] 100px [c3] 100px [c4];

/* 通过网格线名字来指定 */
grid-column-start: a2;
grid-column-end: a4;
grid-row-start: c2;
grid-row-end: c3;

案例

<style>
  .grid-container {
    /* 网格布局 */
    display: inline-grid;
    grid-template-columns: [a1] 100px [a2] 100px [a3] 100px [a4];
    grid-template-rows: [c1] 100px [c2] 100px [c3] 100px [c4];
    margin: 100px;
  }
  .grid-item {
    padding: 10px;
    font-size: 30px;
    color: red;
  }
  .item1 {
    grid-column-start: a2;
    grid-column-end: a4;
    grid-row-start: c2;
    grid-row-end: c3;
    background-color: pink;
  }
  .item2 {
    grid-column-start: a1;
    grid-column-end: a4;
    grid-row-start: c1;
    background-color: skyblue;
  }
  .item3 {
    grid-row-start: c2;
    grid-row-end: c4;
    background-color: khaki;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item item1">1</div>
    <div class="grid-item item2">2</div>
    <div class="grid-item item3">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
  </div>
</body>

image-20220809180258353

# (3)span 关键字来指定项目位置

TIP

这四个属性的值还可以使用span关键字,表示"跨越",即左右边框(上下边框)之间跨越多少个网格。

/* 当前项目跨 3行 */
grid-row-start: span 3;

案例

<style>
  .grid-container {
    /* 网格布局 */
    display: inline-grid;
    grid-template-columns: [a1] 100px [a2] 100px [a3] 100px [a4];
    grid-template-rows: [c1] 100px [c2] 100px [c3] 100px [c4];
    margin: 100px;
  }
  .grid-item {
    padding: 10px;
    font-size: 30px;
    color: red;
  }
  .item1 {
    grid-row-start: span 2;
    background-color: pink;
  }
  .item2 {
    background-color: skyblue;
    grid-column-start: span 2;
  }
  .item3 {
    background-color: khaki;
    grid-row-start: span 2;
    grid-column-start: span 2;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item item1">1</div>
    <div class="grid-item item2">2</div>
    <div class="grid-item item3">3</div>
    <div class="grid-item">4</div>
  </div>
</body>

image-20220809181659558

# (4) auto 关键字

TIP

表示属性对网格项目的放置没有任何作用,表示自动放置,自动跨度或默认跨度为 1

grid-column-start: auto;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: auto;
<style>
  .grid-container {
    /* 网格布局 */
    display: inline-grid;
    grid-template-columns: repeat(3, 200px);
    grid-template-rows: repeat(2, 100px);
    margin: 100px;
  }
  .grid-item {
    padding: 10px;
    font-size: 18px;
    color: red;
  }
  .item1 {
    background-color: pink;
    grid-column-start: auto;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: auto;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item item1">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
  </div>
</body>

image-20220809193658471

# (5) 如果项目发生重叠,通过 z-index 属性指定项目的重叠顺序

<style>
  .grid-container {
    /* 网格布局 */
    display: inline-grid;
    grid-template-columns: [a1] 100px [a2] 100px [a3] 100px [a4];
    grid-template-rows: [c1] 100px [c2] 100px [c3] 100px [c4];
    margin: 100px;
  }
  .grid-item {
    padding: 10px;
    font-size: 30px;
    color: red;
  }
  .item1 {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 3;
    background-color: pink;
  }
  .item2 {
    background-color: skyblue;
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 4;
    /* 调整重叠的顺序 */
    z-index: 3;
  }
  .item3 {
    background-color: khaki;
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 2;
    z-index: 2;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item item1">1</div>
    <div class="grid-item item2">2</div>
    <div class="grid-item item3">3</div>
    <div class="grid-item">4</div>
  </div>
</body>

image-20220809182159771

# 2、grid-column 、grid-row 属性

TIP

  • grid-column属性是grid-column-startgrid-column-end的合并简写形式
  • grid-row属性是grid-row-start属性和grid-row-end的合并简写形式
/*
	开始的网格线为第1根垂直网格线
	结整的网格线为第3根垂直网格线
	等同于
	grid-column-start:1;
	grid-column-end:3;
*/
grid-column: 1/3;

/*
	开始的网格线为第2根水平网格线
	开始的网格线为第34根水平网格线
	等同于
	grid-row-start:2;
	grid-row-end:4;
*/
grid-row: 2/4;

/*
	开始的网格线为第1根水平网格线
	同时跨越3个网格的高度
	等同于
	grid-row-start:1;
	grid-row-end:4;
*/
grid-row: 1 / span 3;

案例

<style>
  .grid-container {
    /* 网格布局 */
    display: inline-grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    margin: 100px;
  }
  .grid-item {
    padding: 10px;
    font-size: 30px;
    color: red;
  }
  .item1 {
    background-color: pink;
    grid-row: 1 / span 3;
  }
  .item2 {
    background-color: skyblue;
    grid-column: 2 / span 2;
  }
  .item3 {
    background-color: khaki;
    grid-column: 2 / span 2;
    grid-row: 2 / span 2;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item item1">1</div>
    <div class="grid-item item2">2</div>
    <div class="grid-item item3">3</div>
  </div>
</body>

image-20220809183051207

# 3、grid-area 属性

TIP

grid-area属性指定项目放在哪一个区域。

  • 这个属性通常配合grid-template-areas属性一起来使用
/* a 表示是区域的名称 */
grid-area: a;
  • grid-area属性还可用作grid-row-startgrid-column-startgrid-row-endgrid-column-end的合并简写形式,直接指定项目的位置。

    语法

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
/*
	1:第1根水平网格线
	2:第2根垂直网格线
	3:第3根水平网格线
	4:第4根垂直网格线
*/
grid-area: 1/2/3/4;

案例

<style>
  .grid-container {
    /* 网格布局 */
    display: inline-grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    margin: 100px;
  }
  .grid-item {
    padding: 10px;
    font-size: 30px;
    color: red;
  }
  .item1 {
    background-color: pink;
    /*
            1:第1根水平网格线
            2:第2根垂直网格线
            3:第3根水平网格线
            4:第4根垂直网格线
        */
    grid-area: 1/2/3/4;
  }
  .item2 {
    background-color: skyblue;
  }
  .item3 {
    background-color: khaki;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item item1">1</div>
    <div class="grid-item item2">2</div>
    <div class="grid-item item3">3</div>
  </div>
</body>

image-20220809184129676

# grid-area 的特殊用法(栅格布局)

TIP

  • 所谓的栅格布局,你可以简单理解为,要把一个页面或容器(如 div),分成多少份
  • 然后设置其页面或容器中子元素占对应的份数
<style>
  .grid-container {
    /* 网格布局 */
    display: grid;
     /* 将容器平均分成12列 */
    grid-template-columns: repeat(12, 1fr);
    height: 100px;
    margin: 10px 0;
  }
  .grid-item {
    padding: 10px;
    font-size: 20px;
    color: red;
  }
  .grid-item:nth-child(n) {
    background-color: skyblue;
  }
  .grid-item:nth-child(2n) {
    background-color: tomato;
  }
  .col-1 {
      /* 宽为父容器1份宽 */
    grid-area: auto/auto/auto/span 1;
  }
  .col-2 {
       /* 宽为父容器2份宽 */
    grid-area: auto/auto/auto/span 2;
  }
  .col-3 {
      /* 宽为父容器3份宽 */
    grid-area: auto/auto/auto/span 3;
  }
  .col-4 {
        /* 宽为父容器4份宽 */
    grid-area: auto/auto/auto/span 4;
  }
  .col-5 {
       /* 宽为父容器5份宽 */
    grid-area: auto/auto/auto/span 5;
  }
  .col-6 {
    grid-area: auto/auto/auto/span 6;
  }
  .col-7 {
    grid-area: auto/auto/auto/span 7;
  }
  .col-8 {
    grid-area: auto/auto/auto/span 8;
  }
  .col-9 {
    grid-area: auto/auto/auto/span 9;
  }
  .col-10 {
    grid-area: auto/auto/auto/span 10;
  }
  .col-11 {
    grid-area: auto/auto/auto/span 11;
  }
  .col-12 {
    grid-area: auto/auto/auto/span 12;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item col-3">1</div>
    <div class="grid-item col-3">2</div>
    <div class="grid-item col-3">3</div>
    <div class="grid-item col-3">4</div>
  </div>
  <div class="grid-container">
    <div class="grid-item col-4">1</div>
    <div class="grid-item col-4">2</div>
    <div class="grid-item col-4">3</div>
  </div>
  <div class="grid-container">
    <div class="grid-item col-6">1</div>
    <div class="grid-item col-6">2</div>
  </div>
  <div class="grid-container">
    <div class="grid-item col-6">1</div>
    <div class="grid-item col-3">2</div>
    <div class="grid-item col-3">3</div>
  </div>
</body>

image-20220822215944694

# 4、justify-self、align-self、place-self 属性

属性名 说明
justify-self 设置单元格内容的水平位置
align-self 设置单元格内容的垂直位置
place-self align-self属性和justify-self属性的合并简写形式
如果省略第二个值,place-self属性会认为这两个值相等。

justify-self 和 align-self 属性的取值相同,都可以是以下 4 个

属性值 说明
stretch 默认值,拉伸,占满单元格的整宽或高
start (水平居左或垂直居上)
end (水平居右或垂直居下)
center 水平居中,或垂直居中
<style>
  .grid-container {
    /* 网格布局 */
    display: inline-grid;
    grid-template-columns: repeat(3, 200px);
    grid-template-rows: repeat(2, 100px);
    margin: 100px;
  }
  .grid-item {
    padding: 10px;
    font-size: 18px;
    color: red;
  }
  .item1 {
    background-color: pink;
    /* 垂直顶部 */
    align-self: start;
  }
  .item2 {
    background-color: skyblue;
    /* 垂直居中 */
    align-self: center;
  }
  .item3 {
    background-color: khaki;
    /* 垂直底部 */
    align-self: end;
  }
  .item4 {
    background-color: pink;
    /* 水平居左 */
    justify-self: start;
  }
  .item5 {
    background-color: skyblue;
    /* 水平居中 */
    justify-self: center;
  }
  .item6 {
    background-color: khaki;
    /* 水平居右 */
    justify-self: end;
  }
</style>
<body>
  <div class="grid-container">
    <div class="grid-item item1">start</div>
    <div class="grid-item item2">center</div>
    <div class="grid-item item3">end</div>
    <div class="grid-item item4">start</div>
    <div class="grid-item item5">center</div>
    <div class="grid-item item6">end</div>
  </div>
</body>

image-20220809191347188

# 四、兼容性查询方法

# 1、不同浏览器的私有前缀

私有前缀 说明
-moz- 火狐等使用 Mozilla 浏览器引擎的浏览器
-webkit- Safari, 谷歌浏览器等使用 Webkit 引擎的浏览器
-o- Opera 浏览器
-ms- IE 浏览器 、Edge 浏览器

对于私有属性的顺序要注意,标准写法要写到最后面,兼容性写法放在前面

/* 兼容性写法 */
-webkit-transform: rotate(-3deg); /* 谷歌 */
-moz-transform: rotate(-3deg); /* 火狐 */
-ms-transform: rotate(-3deg); /* Edge */
-o-transform: rotate(-3deg); /* opera */
/* 标准写法 */
transform: rotate(-3deg);

# 2、兼容性查询

TIP

查询不同 CSS 属性的兼容性,可以进入地址:https://caniuse.com/ (opens new window) 👆 查询

image-20220806215623513

# 五、专项案例训练(作业)

根据课程进度完成以下针对性案例开发,开发过程要求:

  • 利用 PS(Photoshop)与 PxCook 结合,在 PS 中的找到 PxCook-切图面板,选中想要切图的图层 或者 图层组 ,然后点击切图面板上的 标记为切图 按钮 -> 再导出到 PxCook
  • 在 PxCook 中下载对应的切图素材即可获取当前案例中的开发素材
  • 开发过程中所需的尺寸在 PxCook 中量取

以上开发开发流程是用于个人训练从切图、量取尺寸,到具体的开发过程,包括平时自学中如果没有 PSD 源文件时,PxCook 是最佳的个人开发工具。因此现在阶段推荐使用这种方式来练习

在实际企业网页开发中(更多是团队协作开发,流程如下)

  • 设计师设计好 UI 设计稿后 -> 会在 PS 中标记切图 -> 导出至蓝湖(国内企业用的多)中
  • 前端开发人员下载网页开发所需的素材 -> 在蓝湖中量取尺寸 -> 即可开发静态页面

我们把 CSS/CSS3 基础知识全部学习完之后,会有 3 大项目开发(PC 端,响应式,移动端)会按照企业真实团队协作的方式,用 3 个项目来完整的实践。

PSD 的源文件设计稿(联系助理老师获取即可)

  • 具体操作步骤讲解,在钉钉群直播回放视频(第十二课:CSS 盒子模型)中可查阅

切记

学习阶段一定要按照以上的流程学习,提前熟悉工具和整个开发步骤,企业真实项目开发就是这样的流程

# 1、Grid 网格布局(开发 360 图片展示效果)

Grid网格布局(开发360图片展示效果)

点击查看完整版视频讲解

# 2、Grid 网格布局(小米商城左侧二级滑动菜单)

Grid网格布局(小米商城左侧二级滑动菜单)

点击查看完整版视频讲解
上次更新时间: 6/8/2023, 9:23:17 PM

大厂最新技术学习分享群

大厂最新技术学习分享群

微信扫一扫进群,获取资料

X