使用网格项目属性 place-self 设置单元格内容位置

路条编程 2020-11-09

553

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

使用网格项目属性 place-self 设置单元格内容位置。

place-self 属性是 align-self 属性和 justify-self 属性的合并简写形式。语法如下所示：

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

这里顺序是 align-self 在前，justify-self 在后。

根据语法定义，举例如下所示：

<style type="text/css">
.align-item-a {
  place-self: center;
}
</style>

<style type="text/css">
.align-item-a {
  place-self: center stretch;
}
</style>

调整页面框架模块 23 样式设置为 ant-col-xl-8 ，占整个页面框架宽度的三分之一。增加一个 3 行 3 列容器，容器主新式类为 .place-self-item-main，容器内增加 9 个项目，设置样式类 .place-self-item-a .item-text 为特殊项目，使用 align-self 项目属性定义相关位置，其他项目使用默认白色背景设置。调整后的样式代码如下所示：

<style type="text/css">
     .place-self-item-main {
        grid-template-columns: 2fr 1fr 2fr;
        grid-template-rows: 90px 60px 60px;
        place-self: center;
      }
      .place-self-item-a {
        margin: 20px !important; 
        border-bottom: 0px solid  #000 !important; 
      }
</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-8">
   <div class="card">
     <div class="container place-self-item-main ">
           <div class=" grid-auto-border border-radius-top-left align-self-item-a ">
              <div class="item5 item-text border-radius">item-a</div>
           </div>
           <div class="box-no-margin grid-auto-border "></div>
           <div class="box-no-margin grid-auto-border border-radius-top-right"></div>
           <div class="box-no-margin grid-auto-border "></div>
           <div class="box-no-margin grid-auto-border "></div>
           <div class="box-no-margin grid-auto-border "></div>
           <div class="box-no-margin grid-auto-border border-radius-bottom-left"></div>                 
           <div class="box-no-margin grid-auto-border "></div>
           <div class="box-no-margin grid-auto-border border-radius-bottom-right"></div>
        </div>         
    </div>
</article>

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

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

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

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

数据库

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

使用网格项目属性 place-self 设置单元格内容位置

评论