CSS Grid 网格布局：「13」使用 place-items 属性设置水平垂直对齐网格所有项目

路条编程 2020-10-28

3054

欢迎关注路条编程网站，通过学习 CSS Grid 网格布局这一系列文章，你将会逐步掌握网格布局的容器和项目、行和列、单元格、网络线等相关的知识。

使用 place-items 属性设置水平垂直对齐网格所有项目。

place-items 是设置 align-items 和 justify-items 的简写形式，语法如下所示：

<style type="text/css">
.container {
    place-items: <align-items> <justify-items>?;
}
</style>

<align-items> <justify-items>：第一个值设置 align-items 属性，第二个值设置 justify-items 属性。如果省略第二个值，则将第一个值同时分配给这两个属性。

注意：除 Edge 之外的所有主流浏览器都支持 place-items 简写属性。因此，如果有兼容性顾虑，建议还是分开设置这两个属性。

属性值：

auto 实际的值继承父自元素的 justify-items 值，除非该元素没有父元素或是用了绝对定位。在这些示例中，auto 表示 normal 。

normal 的效果取决于我们使用哪种布局方式：

在块级布局中，normal 和 start 一样。

在绝对定位布局中，关键字在被替换的绝对定位元素上的行为类似于 start，在所有其他绝对定位的元素上表现类似 stretch。

在 flexbox 布局中，此关键字没有意义，因为该属性被忽略。

在 grid 布局中，此关键字和 stretch 的行为相似，但是具有宽高比和固有尺寸的元素行为和 start 相似。

调整页面框架模块 11 ，增加一个 3 行 3 列容器，容器中包含 9 个项目。本示例使用水平及垂直布局方式，容器主样式类为 .grid-gap-main .place-items-auto-normal ，定义 3 列宽度分别为 100px、50px、100px, 定义 3 行高度分别为 80px、auto

、80px。列间距为 10px, 行间距为 15px。调整后的样式代码如下所示：

<style type="text/css">
    .place-items-auto-normal {
        place-items: auto normal;
    }
</style>

调整 html 代码如下所示：

<article class="article  ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-12 ant-col-lg-12 ant-col-xl-6">
   <div class="card"> 
      <div class="container grid-gap-main place-items-auto-normal">
          <div class="box item1">1</div>
          <div class="box item2">2</div>
          <div class="box item3">3</div>
          <div class="box item4">4</div>
          <div class="box item5">5</div>
          <div class="box item6">6</div>
          <div class="box item7">7</div>
          <div class="box item8">8</div>
          <div class="box item9">9</div>
      </div>
  </div>
</article>

保存页面代码，预览页面，整体效果图如下所示：

重要提示：示例效果预览，请访问 https://www.icoderoad.com , 完整代码查看及下载，请访问 https://github.com/icoderoad/demo。

今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。

作者：路条编程（转载请获本公众号授权，并注明作者与出处）

数据库

文章转载自路条编程，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

CSS Grid 网格布局：「13」使用 place-items 属性设置水平垂直对齐网格所有项目

评论