css 中最强大的布局方式 — Grid 布局（下）-五八三

续集开始

接上回 css 中最强大的布局方式 — Grid 布局（上）说道，在本章将继续 Grid 排布顺序的相关属性，介绍网格区域内整个容器区域的排版以及网格单元内元素的对齐方式。

网格容器排布

在CSS Grid布局中，justify-content 属性和 align-content 属性用于设置网格容器内所有网格行或列的水平和垂直对齐方式，而 place-content 属性则是这两个属性的缩写形式。

水平位置： justify-content

垂直位置：align-content

place-content 可以同时设置 justify-content 和 align-content属性的值

它们可以接受以下值，用于设置网格项目在网格容器的对齐方式

start: 对齐容器的起始边框，网格行或列位于网格容器的左/顶部。
end: 对齐容器的结束边框，网格行或列位于网格容器的右/底部。
center: 网格行或列位于网格容器的中心。
stretch: 没有指定项目大小时，网格行或列被拉伸以占据整个网格容器。
space-between: 项目与项目的间隔相等，项目与容器边框之间没有间隔
space-around – 项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
space-evenly – 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

示例代码：

<div class="container">

  <div class="item one">Item one</div>

  <div class="item two">Item two</div>

  <div class="item third">Item third</div>

  <div class="item one">Item four</div>

  <div class="item two">Item five</div>

  <div class="item third">Item six</div>

</div>



.container {
    display: grid;

    width: 1000px;

    height: 400px;

    border: 1px solid #000;

    grid-template-columns: 180px 200px 300px;

    grid-template-rows: 100px 100px ;

    row-gap: 10px;

    column-gap: 10px;

    justify-content: center;

    align-content: center;

  }

  .item {

    width: 200px;
    padding: 10px;

    height: 80px;
    line-height: 80px;
  }
  .one {
    background-color: #c9eccb;
  }
  .two {
    background-color: #c7e7e9;
  }
  .third {
    background-color: #b2ede2;
  }

为了能够更快速的看到网格的排布效果，我们也可以在控制台进行预设，观察不同对齐方式的展示效果。

在这里我们可以看到所有的排布方式及其设置的对齐方式，帮助我们快速找到想要实现的页面效果,，

当前垂直方向上设置为 space-around 的每个项目两侧的间隔相等

水平位置设置为 space-between

单元格内容排布

在CSS Grid布局中，justify-items 属性和 align-items 属性用于设置所有网格单元格内的水平和垂直对齐方式，而 place-items 属性则是这两个属性的缩写形式。

justify-items 属性设置单元格内容的水平位置（左中右），
align-items 属性设置单元格的垂直位置（上中下）
place-items属性用于同时设置justify-items和align-items属性的值

他们都有共同的属性值，用于设置单元格内的垂直对齐方式

start: 网格项目位于网格容器的顶部。
end: 网格项目位于网格容器的底部。
center: 网格项目位于网格容器的中心。
stretch: 网格项目被拉伸以填充整个网格单元格。
baseline: 网格项目基线对齐。

可以使用一下案例进行单元格内的效果调试

<div class="container">

  <div class="item one">Item one</div>

  <div class="item two">Item two</div>

  <div class="item third">Item third</div>

  <div class="item one">Item four</div>

  <div class="item two">Item five</div>

  <div class="item third">Item six</div>

</div>



 .container {
    display: grid;

    width: 1000px;

    height: 400px;

    border: 1px solid #000;

    grid-template-columns: 180px 200px 300px;

    grid-template-rows: 100px 100px ;

    row-gap: 10px;

    column-gap: 10px;

    justify-content: center;

    align-content: center;

  }

  .item {

    width: 155px;
    padding: 10px;

    
  }
  .one {
    background-color: #c9eccb;
  }
  .two {
    background-color: #c7e7e9;
  }
  .third {
    background-color: #b2ede2;
  }

图片[1]-css 中最强大的布局方式 — Grid 布局（下）-五八三
此时未设置 align-items 单元格内容的高度被默认拉伸。

根据不同的对齐方式展示不同的效果

此时水平和垂直方向上的位置都为 end ，所以单元格内的内容向右下角对齐。

还有更多的单元格内容的排布效果可以自己亲自动手尝试一下哦?

隐式和显示网格

先来看看什么是隐式和显示网格

在CSS Grid布局中，有两种类型的网格：隐式网格和显示网格。

显示网格：使用 grid-template-rows 和 grid-template-columns 属性定义网格行和列时，创建的是显式网格。如果在显式网格之外有其他网格项，那么这些网格项将放置在隐式网格上。
隐式网格：在网格容器内放置了超出网格数量的元素，所占的位置为隐式网格，grid-auto-columns 和 grid-auto-rows 用于设置隐式网格上的网格单元格的大小。

当使用 grid-template-areas 属性定义网格布局时，将创建显式和隐式网格。

显式网格由 grid-template-areas 中定义的网格区域组成，而隐式网格则由未被定义为区域的网格单元格组成。

如果不设置隐式网格的属性，那么多余的元素会按照容器剩余的宽高显示

多余的行，其行高按照内容高度，其宽度按照之前网格的列宽
多余的列，其内容高度按照原行高，其宽度按照 auto 属性自动占据容器剩下的部分，最小为内容宽度

项目属性

这里再补充几个项目上用到的属性，可以用于调整项目的区域实现跨行或跨列的效果：

grid-column-start 和grid-column-end属性用于设置网格项目跨越的列数
grid-row-start 和 grid-row-end 属性用于设置网格项目跨越的行数
grid-column 是 grid-column-start、grid-column-end 的缩写
grid-row 是 grid-row-start和grid-row-end 的缩写
grid-area 用于同时设置网格项目的行、列和跨度，一般与 grid-template-areas 搭配使用。
justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个项目
align-self 属性设置单元格内容的垂直位置（上中下），跟 align-items 属性的用法完全一致，也是只作用于单个项目

响应式实现

最后用一个案例来给 Grid 布局做个总结

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
  <div class="grid-item">Item 7</div>
  <div class="grid-item">Item 8</div>
  <div class="grid-item">Item 9</div>
</div>

.grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-gap: 20px;
    }

    .grid-item {
      background-color: #caedbb;
      padding: 20px;
      text-align: center;
    }

    @media screen and (max-width: 768px) {
      .grid-container {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      }
    }

    @media screen and (max-width: 480px) {
      .grid-container {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        grid-gap: 10px;
      }
    }