初学第十章:grid常用属性与实例演示

本文阅读 3 分钟
首页 前端,CSS3 正文

grid常用属性与实例演示

  • 创建一个网格布局常用的三部

    1. 定义一个grid网格容器使用display:grid;
    2. 画网格(划分网格单元)grid-template-rows创建行/grid-template-columns创建列
    3. 将项目放置到对应的网格单元中 grid-row定义行开始行结束grid-column定义列开始列结束
  • 常用属性如下:
属性名描述
容器属性display:grid创建一个grid容器
容器属性grid-template-columns/rows划分网格 生成几行几列使用 生成的是显示网格
项目属性grid-column/row将某一个项目放置在哪个单元格area是简写
项目属性grid-area定义网格区域可以理解为合并单元格值:行开始/列开始/行结束/列结束
容器属性grid-auto-flow定义项目的排列顺序默认是行优先
容器属性grid-auto-row/column定义隐式网格的行列的大小隐式网格就是不在用户默认定义的显示网格内
gap定义每个行列之间的间隙大小类似于外边距
place-content定义项目在容器中的对齐方式
place-items定义项目在网格单元中的对齐方式
place-self定义某个项目在网格单元中的对齐方式

实例演示

  1. grid-column/row使用方式

l5kfgfh5.png

2.grid-auto-flow使用方式

l5kfogfl.png

3.grid-auto-rows/columns使用方式

l5kft20t.png

4.grid-area使用方式

l5kgc97j.png

5.gap使用方式

l5kgf3i8.png

6.place-content使用方式

属性:值1是垂直方式 值2是水平方式 start end center space-between space-around

l5kgilk5.png

7.place-items使用方式

l5kgwk0w.png

如果需要设置所有项目在容器中为居中 并且在网格单元中也是居中可以这样

l5kgz3c1.png

8.place-self的使用方式

l5kh30as.png

<!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>
    <style>
      .content {
        width: 40em;
        height: 40em;
        background-color: lightcoral;
        /*创建容器*/
        display: grid;
        /*定义一个四行四列宽高度为8em的网格*/
        grid-template-columns: repeat(4, 8em);
        grid-template-rows: repeat(4, 8em);
        /*更换排列方式默认是row*/
        /* grid-auto-flow: column; */
        /* grid-auto-rows: 8em;
        grid-auto-columns: 8em; */
        /*垂直方式 水平方式*/
        /* 注意必须要有剩余空间 */
        place-content: center;
        /* gap: 10px; */
        place-items: center;
      }
      .itme,
      .itme2,
      .itme3,
      .itme4,
      .itme5 {
        /*将单元格进行合并*/
        width: 6em;
        height: 6em;
        /* grid-area: 2 / 2 / span 2 / span 2; */
        /*将网格放在右下角位置*/
        /*行开始/行结束*/
        /* grid-row: 4/5;
        grid-column: 4/5; */
        /* 简写如下 */
        /*行开始/列开始/行结束/列结束*/
        /* grid-area: 4 / 4 / 5 / 5; */
        background-color: aqua;
      }
      .itme5 {
        place-self: end;
      }
      /* .itme5 {
        /* grid-area: 3 /3;
        grid-column: 2 / span 2;
      } */
    </style>
  </head>
  <body>
    <div class="content">
      <div class="itme">1</div>
      <div class="itme2">2</div>
      <div class="itme3">3</div>
      <div class="itme4">4</div>
      <div class="itme5">5</div>
    </div>
  </body>
</html>
本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.hui-xiang.cn/archives/94.html
-- 展开阅读全文 --
初学第九章: flex必知术语/flex容器的必知属性以及项目上的必知属性/用flex完成导航条
« 上一篇 07-13
初学第十一章:用grid和flex布局完成php中文网首页上半部分
下一篇 » 07-15