grid网格布局

冯彦祖

已于 2023-08-02 10:46:25 修改

阅读量191

点赞数 1

文章标签：前端 css

于 2023-01-03 10:10:37 首次发布

本文链接：https://blog.csdn.net/weixin_70573795/article/details/128528424

版权

该文章展示了如何利用CSS的Grid布局属性来创建一个基本的网格系统，包括设置grid-template-columns定义列宽，使用grid-gap设置单元格间距，以及通过grid-area和grid-row-start等属性来定位和调整特定元素的大小。示例代码是一个用于展示员工信息的表格布局。

摘要由CSDN通过智能技术生成

使用grid实现基本的网格布局

display ：grid 开启网格布局；

grid-template-columns ：1fr 1.5fr 设置网格行的宽度、数量；

grid-row-gap: 1px; 设置列的间隙；

grid-column-gap: 1px; 设置行的间隙；

grid-area ：4/2/5/7

grid-row-start、grid-column-start、grid-row-end、grid-column-end

单独设置某项盒子的大小：从第n行线开始 / 从第n列线开始 / 从第n行线结束 / 从第n列线结束

    <div class="grid">
      <div class="check">入职时间</div>
      <div></div>
      <div>试用期</div>
      <div></div>
      <div>转正日期</div>
      <div></div>
      <div class="check">聘用形式</div>
      <div></div>
      <div>用工类型</div>
      <div></div>
      <div class="check">用工单位</div>
      <div></div>
      <div>部门</div>
      <div></div>
      <div>职务</div>
      <div></div>
      <div class="check">职位</div>
      <div></div>
      <div>工作地点</div>
      <div class="max-grid"></div>
    </div>

    .grid {
      display: grid;
      grid-template-columns: 1fr 1.5fr 1fr 1.5fr 1fr 1.5fr;
      grid-row-gap: 1px;
      grid-column-gap: 1px;
      border-radius: 2px;
      border: 1px solid rgba(0, 0, 0, 0.15);
      background-color: rgba(0, 0, 0, 0.15);
      div {
        height: 45px;
        padding: 12px 0 0 24px;
        background-color: #fff;
        color: rgba(0, 0, 0, 0.65);
        &:nth-child(2n + 1) {
          font-weight: 500;
          color: rgba(0, 0, 0, 0.85);
          background-color: #fafafa;
        }
      }
    }
    .max-grid {
      grid-area: 4/2/5/7;
    }