grid常用属性 - html标签，列表，表格

首页 > 博客列表 > grid常用属性

博主信息

博文 19

粉丝 0

访问量 14824

专题推荐

更多>

属性	作用
grid	转为网格容器
grid-area	将项目放入指定的网格单元中
grid-template-columns/rows	生成行列的轨道
grid-auto-flow	行与列的排列规则
grid-auto-row/column	隐式网格的行/列的大小
gap	行列间隙
place-content	所有项目在“容器”中的对齐方式
place-items	所有项目在“网格单元”中的对齐方式
place-self	某个项目在“网格单元”中的对齐方式

1. display: grid; /*转为网格容器

2.grid-template-columns:生成三列

grid-template-rows 生成三行
.

3.grid-area：直接定义网格区域:将项目放入指定的网格单元中并使用sapn标签实现指定跨行和列

使用sapn标签实现指定跨行和列

4.grid-auto-flow:改为行的方向顺序排列

改变列的方向顺序排列

5.grid-auto-rows: 浏览器自动设置高度并把新生成的子元素放入到自动生成的网格

7.gap: 行列之间的间隙：如果两个值的参数是相同即可简写为一个！

8. place-content: 所有项目在“容器”中的对齐方式分为垂直方向和水平方向

place-content:剩余空间还可以在项目之间进行分配分为两个值垂直方向space-between space-around/水平方向space-between space-between

9.place-items: 设置项目在“网格单元”中的对齐方式

10.place-self指定设置项目中某个单元格对齐方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid布局</title>
  </head>
  <style>
    * {
      /*初始化格式*/
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container {
      width: 30em;
      height: 30em;
      width: 40em;
      height: 50em;
      color: red;
      text-align: center;
      font-weight: bolder;
      background-color: rgb(100, 237, 191);
      display: grid; /*转为网格容器*/
      grid-template-columns: 10em 10em 10em; /*生成三列轨道*/
      grid-template-rows: 10em 10em 10em; /* 生成三行轨道*/
      grid-area: 3 / span 2;
      /* 垂直方向剧中 */
      place-content: start start;
      place-content: center end;
      /* 水平方向剧中 */
      place-content: center center;
      place-content: center;
      /* 所有剩余空间还可以在项目之间进行分配  */
      place-content: space-between space-around;
      place-content: space-between space-between;
      place-content: space-between;
      /* place-items 设置项目在单元格中对齐 */
      place-items: start start;
      place-items: end end; /*右下对齐*/
      place-items: center; /*居中对齐*/
      /* grid-auto-flow: 默认是行的排列顺序 */
      /*改为列的方向顺序排列*/
      /* grid-auto-flow: column;  */
      /* grid-auto-rows: 浏览器自动设置高度并把新生成的子元素放入到自动生成的网格 */
      grid-auto-rows: 10em;
      /* gap: 行列之间的间隙 */
      /* gap: 5px 5px;
      gap: 5px; 如果两个值的参数是相同即可简写为一个 */
    }
    /*把项目放到单元格*/
    .container > .item {
      width: 6em;
      height: 6em;
      background-color: lightseagreen;
      /* grid-area: 直接定义网格区域:将项目放入指定的网格单元中 */
      /*  grid-area:3/1; grid-area:3/1;(3=三行/1=第一列)*/
      /* grid-area: 行开始 / 列开始 / 行结束 / 列结束 */
      /* 案列2. */
      /* grid-area: 1 / 2 / span 2 / span 2; */
    }
    .container > .item:nth-of-type(8) {
      background-color: rgb(241, 16, 65);
      /* 设置某个项目的对齐方式 */
      place-self: end end;
      place-self: end;
    }
  </style>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </body>
</html>