Gird网格布局

最新推荐文章于 2024-10-13 17:00:37 发布

想看看风景

最新推荐文章于 2024-10-13 17:00:37 发布

阅读量736

点赞数 21

分类专栏：一些乱七八糟的前端知识文章标签： css 前端 html5 vscode

本文链接：https://blog.csdn.net/qq_62035394/article/details/141353360

版权

一些乱七八糟的前端知识专栏收录该内容

6 篇文章 0 订阅

订阅专栏

创作灵感

前几天在b站跟黑马学vue3的项目,发现一个未知布局, 心血来潮之下去学了一下, (毕竟贴主小趴菜之前都是用定位+浮动),

正文开始

任何一个布局都需要一个容器,所以我们先在结构部分创建一个容器

<div class="container">

</div>

在容器里面创建项目(项目必须是容器的子元素)

在容器中设置布局方式为grid

.container {
        width: 400px;
        height: 400px;
        background-color: antiquewhite;
        /* 声明Gird容器*/
        display: grid;
        /*项目在容器中的排列方式*/
        /* 默认行优先 */
        grid-auto-flow: row;
      }

/*列排列方式*/
grid-auto-flow: column;

列排列方式效果图如下

生成单元格

/* 在容器中显示的划分行与列, 生成指定数量的单元格来放置项目 */
        /* 两行三列的项目 */
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px;

假如多增加一个单元格, 导致分配不均 , 如下图

出现问题的原因以及解决办法

多出来的网格属于隐式网格 , 需要另外进行样式配置

/* 隐式网格的样式要根据排列方式来进行设置 
   上面我们用的是columns排列, 如果用的是row排列,则使用gird-auto-row属性
*/
        grid-auto-columns: 100px;

设置单元格的数量尺寸有三种方式,可以灵活混用

        /* 方法一: 固定值 */
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
        /* 重复设置: repeat(n, value) */
        grid-template-columns: repeat(3, 100px);

        /* 方法二: 百分比 */
        grid-template-columns: 20% 30% auto;
        grid-template-rows: 100px auto 100px;

        /* 方法三: 按比例, fr */
        grid-template-columns: 1fr 2fr 2fr ;
        grid-template-rows: 1fr 1fr 1fr;

        /* 方法四: 弹性设置 minmax(min, max) */
        grid-template-columns: repeat(3, minmax(50px, 100px)) ;
        grid-template-rows: repeat(3, minmax(150px, 1fr));

        /* 方法五: 自动填充 auto-fill */
        /* 类似于自适应, 一行多少个方块由系统根据屏幕宽度来确定 */
        width: auto;
        grid-template-columns: repeat(auto-fill, 100px);

通过(网格线)行号来划分单元格, 举个栗子, 就把行号当成从1开始的坐标轴去画矩形

        background-color: aqua;
        /* 设置网格线的起始编号 */
        grid-row-start: 1;
        grid-column-start: 1;
        /* 设置网格线的结束编号 */
        grid-row-end: 3;
        grid-column-end: 3;

简化版1

        background-color: aquamarine;
        grid-row: 1 / 3;
        grid-column: 3 / 5;

简化版2: 使用偏移量进行简化

        background-color: violet;
        /* span 2: 跨越2行 3+2=5 */
        /* grid-row: 3 / span 2;
        grid-column: 1 / span 2; */
        /* 如果从当前位置进行填充,可以省略当前的行/列的编号 */
        grid-row: span 2;
        grid-column: span 2;

使用命名网格线划分单元格 , 了解一下就行 , 一般没哪个前端那么闲干这种事


      .container {
        width: 400px;
        height: 400px;
        background-color: antiquewhite;
        /* 声明Gird容器*/
        display: grid;
        /* 方法一: 固定值 */
        grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end];
        grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
        
      }
      /* 填充到第2行第3列 */
      .item1 {
        background-color: aqua;
        grid-row-start: r2-start;
        grid-column-start: c3-start;
      }
      /* 占满第1行 */
      .item2 {
        background-color: aquamarine;
        grid-row: r1-start / r2-start;
        grid-column: c1-start / c3-end;
      }
      .item3 {
        background-color: violet;
      }

重复设置单元格时, 命名网格线会自动添加索引 , 了解一下就行,个人觉得使用麻烦 , 实用性不高

nd-color: antiquewhite;
        /* 声明Gird容器*/
        display: grid;
        /* 方法一: 固定值 */
        grid-template-columns: repeat(3, [col-start] 100px [col-end]);
        grid-template-rows: repeat(3, [row-start] 100px [row-end]);
        
      }
      /* 占满第一行 */
      .item1 {
        background-color: aqua;
        grid-column-start: col-start 1;
        grid-column-end: span 3;
        
      }
      /* 占满最后1行 */
      .item2 {
        background-color: aquamarine;
        grid-row-start: row-start 1;
        grid-column-start: col-start 1;
        grid-column-end: col-end 3;

      }

将项目填充到默认网格区域中 , 之前的操作你可以理解为替项目画格子

.item1 {
        background-color: aqua;
        /* grid-area: 起始行 / 起始列 / 结束行 / 结束列 */
        grid-area: 1 / 1 / 2 / 5;
        /* 简化 */
        grid-area: span 1 / span 4;
      }

将项目填充到命名网格中,这个比较重要,可以说是工作中经常使用的了

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>命名网格区域</title>
    <style>
      .container {
        width: 400px;
        height: 400px;
        background-color: antiquewhite;
        /* 声明Gird容器*/
        display: grid;
        grid-template-columns: 80px auto 80px;
        grid-template-rows: 40px auto 40px;
        /* 设置容器中的命名区域 */
        grid-template-areas:
          'header header header'
          'left main right'
          'footer footer footer' 
        ; 
      }
      /* 占满第一行 */
      .item1 {
        background-color: aqua;
        /* 头部 */
        grid-area: header;
      }
      
      .item2 {
        background-color: aquamarine;
        /* 左边栏 */
        grid-area: left;
      }
      .item3 {
        background-color: cornsilk;
        /* 主体部分 */
       grid-area: main;
      }
      .item4 {
        background-color: blueviolet;
        /* 右边框 */
        grid-area: right;
      }
      .item5 {
        background-color: chocolate;
        /* 页脚 */
        grid-area: footer;
      }
    </style>
  </head>
  <body>
    <!--1.创建网格容器-->
    <div class="container">
      <!--创建项目:项目必须是容器的子元素-->
      <span class="item item1">1</span>
      <span class="item item2">2</span>
      <span class="item item3">3</span>
      <span class="item item4">4</span>
      <span class="item item5">5</span>
    </div>
  </body>
</html>

案例中的重要代码 , 我拎出来再复制一遍

       /*将区域进行命名*/
      .item1 {
        background-color: aqua;
        /* 头部 */
        grid-area: header;
      }
      
      .item2 {
        background-color: aquamarine;
        /* 左边栏 */
        grid-area: left;
      }
      .item3 {
        background-color: cornsilk;
        /* 主体部分 */
       grid-area: main;
      }
      .item4 {
        background-color: blueviolet;
        /* 右边框 */
        grid-area: right;
      }
      .item5 {
        background-color: chocolate;
        /* 页脚 */
        grid-area: footer;
      }

        /*这里是将命名区域排列好, 案例用的是"九宫格"*/                  
        grid-template-areas:
          /*几个单元格用几个命名*/
          'header header header'
          'left main right'
          'footer footer footer' 
        ;

当项目默认已填充到正确的区域中,无需设置时, 可使用"."作为占位符 , 注意点就是占位符"."之间不要忘记打空格 , 其实不简化也没事 , 简化一下只是为了代码美观

        display: grid;
        grid-template-columns: 80px auto 80px;
        grid-template-rows: 40px auto 40px;
        /* 设置容器中的命名区域 */
        grid-template-areas:
          'header header header'
          '. . .'
          'footer footer footer' 
        ; 
      }
      /* 占满第一行 */
      .item1 {
        background-color: aqua;
        /* 头部 */
        grid-area: header;
      }
      
      .item2 {
        background-color: aquamarine;
      }
      .item3 {
        background-color: cornsilk;
      }
      .item4 {
        background-color: blueviolet;
      }
      .item5 {
        background-color: chocolate;
        /* 页脚 */
        grid-area: footer;
      }

命名网格区域"线"的默认名称

区域起始行/列: "区域名称-start", 如"header-start" / "header-start"

区域结束行/列: "区域名称-end", 如"header-end" / "header-end"

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>命名网格区域"线"的默认名称</title>
    <style>
      .container {
        width: 400px;
        height: 400px;
        background-color: antiquewhite;
        /* 声明Gird容器*/
        display: grid;
        grid-template-columns: 80px auto 80px;
        grid-template-rows: 40px auto 40px;
        /* 设置容器中的命名区域 */
        grid-template-areas:
          'header header header'
          '. . .'
          'footer footer footer' 
        ; 
      }
      /* 占满第一行 */
      .item1 {
        background-color: aqua;
        /* grid-area: 命名区域起始行 / 起始列 / 结束行 / 结束列; */
        grid-area: header-start / header-start / header-end / header-end;
        /* 偏移量进行简化 */
        grid-area: header-start / span 3;
      }
      
      .item2 {
        background-color: aquamarine;
      }
      .item3 {
        background-color: cornsilk;
      }
      .item4 {
        background-color: blueviolet;
      }
      .item5 {
        background-color: chocolate;
        grid-area: footer-start / footer-start / footer-end / footer-end;
      }
    </style>
  </head>
  <body>
    <!--1.创建网格容器-->
    <div class="container">
      <!--创建项目:项目必须是容器的子元素-->
      <span class="item item1">1</span>
      <span class="item item2">2</span>
      <span class="item item3">3</span>
      <span class="item item4">4</span>
      <span class="item item5">5</span>
    </div>
  </body>
</html>

主要代码

/*header区域*/
grid-area: header-start / header-start / header-end / header-end;

/*footer区域*/
grid-area: footer-start / footer-start / footer-end / footer-end;

效果图同上

所有项目在容器中的对齐方式

justify-content: 设置所有项目在容器中水平方向的对齐方式
align-content: 设置所有项目在容器中垂直方向的对齐方式
place-content:上面两个属性的简写, place-content: 垂直对齐方式水平对齐方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>所有项目在容器中的对齐方式</title>
    <style>
      .container {
        width: 400px;
        height: 400px;
        background-color: antiquewhite;
        /* 声明Gird容器*/
        display: grid;
        grid-template-columns: repeat(3, 50px);
        grid-template-rows: repeat(3, 50px);

        /* 当容器中有剩余空间的时候, 对所有的项目设置对齐方式才有意义 */
        /* 水平对齐方式 */
        justify-content: start;
        /* 垂直方向对齐方式*/
        align-content: start;

        /* 水平居中, 垂直靠底部 */
        justify-content: center;
        align-content: end;

        /* 容器的剩余空间在项目的行与列之间的分配方案 */
        /* 水平两端对齐: 首尾项目贴边, 中间项目空间相等 */
        justify-content: space-between;
        /* 水平分散对齐: 每个项目左右两侧空间相等 */
        justify-content: space-around;
        /* 水平平均对齐: 每个项目之间的空间完全相等*/
        justify-content: space-evenly;

        /* 垂直方向两端对齐 */
        align-content: space-between;
        /* 垂直方向分散对齐 */
        align-content: space-around;
        /* 垂直方向平均对齐 */
        align-content: space-evenly;

        /* 水平垂直默认是拉伸, 拉伸是不固定大小 , 铺满容器*/
        justify-content: stretch;
        align-content: stretch;

        /* 为了跟flex布局的属性相区别,建议使用他们的简写语法 */
        /* place-content: 垂直对齐方式  水平对齐方式 */
        /* 垂直与水平相同 , 可以只有一个值 */
        place-content: center;
      }
      .item {
        background-color: aquamarine;
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <!--1.创建网格容器-->
    <div class="container">
      <!--创建项目:项目必须是容器的子元素-->
      <span class="item item1">1</span>
      <span class="item item2">2</span>
      <span class="item item3">3</span>
      <span class="item item4">4</span>
      <span class="item item5">5</span>
      <span class="item item6">6</span>
      <span class="item item7">7</span>
      <span class="item item8">8</span>
      <span class="item item9">9</span>
    </div>
  </body>
</html>

所有项目在单元格 / 网格区域中的对齐方式

justify-items: 设置所有项目在单元格/网格区域中水平方向的对齐方式
align-items: 设置所有项目在单元格/网格区域中垂直方向的对齐方式
place-items:上面两个属性的简写, place-items: 垂直对齐方式水平对齐方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>所有项目在单元格中的对齐方式</title>
    <style>
      .container {
        width: 400px;
        height: 400px;
        background-color: antiquewhite;
        /* 声明Gird容器*/
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        /* 设置项目在单元格中的水平对齐方式 */
        justify-items: stretch;
         /* 设置项目在单元格中的垂直对齐方式 */
         align-items: stretch;

         /* 水平居左  垂直居中*/
         justify-items: start;
         align-items: center;

         /* 水平居右  垂直居下*/
         justify-items: end;
         align-items: end;

         /* 水平垂直居中 简写*/
         /* place-items: 垂直方向 水平方向 */
         place-items: center;
      }
      .item {
        width: 50px;
        height: 50px;
        background-color: aquamarine;
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <!--1.创建网格容器-->
    <div class="container">
      <!--创建项目:项目必须是容器的子元素-->
      <span class="item item1">1</span>
      <span class="item item2">2</span>
      <span class="item item3">3</span>
      <span class="item item4">4</span>
      <span class="item item5">5</span>
      <span class="item item6">6</span>
      <span class="item item7">7</span>
      <span class="item item8">8</span>
      <span class="item item9">9</span>
    </div>
  </body>
</html>

所有项目在网格区域中的对齐方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>所有项目在网格区域中的对齐方式</title>
    <style>
      .container {
        width: 400px;
        height: 400px;
        background-color: antiquewhite;
        /* 声明Gird容器*/
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        /* 所在项目在单元格/网格区域中的对齐方式 */
        /* 水平垂直居中 */
        place-items: center;
       
      }
      .item {
        width: 50px;
        height: 50px;
        background-color: aquamarine;
        font-size: 2rem;
      }
      .item1 {
        /* 跨三行, 占据最左一列 */
        grid-row-end: span 3;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <!--1.创建网格容器-->
    <div class="container">
      <!--创建项目:项目必须是容器的子元素-->
      <span class="item item1">1</span>
      <span class="item item2">2</span>
    </div>
  </body>
</html>

设置某一项目在单元格/网格区域中的对齐方式

justify-self: 设置某一项目在容器中水平方向的对齐方式
align-self: 设置某一项目在容器中垂直方向的对齐方式
place-self:上面两个属性的简写, place-self: 垂直对齐方式水平对齐方式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>设置某一项目在单元格/网格区域中的对齐方式</title>
    <style>
      .container {
        width: 400px;
        height: 400px;
        background-color: antiquewhite;
        /* 声明Gird容器*/
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        /* 所在项目在单元格/网格区域中的对齐方式 */
        /* 水平垂直居中 */
        place-items: center;
       
      }
      .item {
        width: 50px;
        height: 50px;
        background-color: aquamarine;
        font-size: 2rem;
      }
      .item1 {
        /* 跨三行, 占据最左一列 */
        grid-row-end: span 3;
        background-color: aqua;
        /* 设置某一项目在单元格/区域中的对齐方式 */
        /* 左下角 */
        justify-self: start;
        align-self: end;

        /* 简写: 右上角 */
        /* palce-self: 垂直  水平 */
        place-self: start end;
      }
    </style>
  </head>
  <body>
    <!--1.创建网格容器-->
    <div class="container">
      <!--创建项目:项目必须是容器的子元素-->
      <span class="item item1">1</span>
      <span class="item item2">2</span>
    </div>
  </body>
</html>

设置容器中行与列之间的间距

gap: 行间距列间距

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>设置容器中行与列之间的间距</title>
    <style>
      .container {
        width: 400px;
        height: 400px;
        background-color: antiquewhite;
        /* 声明Gird容器*/
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        /* Grid布局提供的属性 */
        grid-row-gap: 5px;
        grid-column-gap: 5px;
        /* 简写: 不同的行列间距 */
        row-gap: 10px;
        column-gap: 2px;
        /* 推荐 gap: 行间距 列间距 */
        gap: 15px  5px;
        gap: 5px;

      }
      .item {
        background-color: aquamarine;
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <!--1.创建网格容器-->
    <div class="container">
      <span class="item item1">1</span>
      <span class="item item2">2</span>
      <span class="item item3">3</span>
      <span class="item item4">4</span>
      <span class="item item5">5</span>
      <span class="item item6">6</span>
      <span class="item item7">7</span>
      <span class="item item8">8</span>
      <span class="item item9">9</span>
    </div>
  </body>
</html>

总结

学习视频来自B站php中文网<让布局像5G一样快【CSS Grid网格布局】> , 后续可能会了解一下flex布局与gird布局的区别 , flex布局我也不太熟悉 , 学习笔记会上传压缩包 , 有需要的友友们可以留言

补充额外学到的杂七杂八的知识

vscode编译器内置了Emmet插件, 利用Emmet语法可以快速写代码(下一篇文章进行补充)
在编译器的setting.json文件中进行"liveServer.settings.CustomBrowser": "chrome"配置,可以更改live serve运行的默认浏览器(我这边默认浏览器配置的是谷歌), live serve可以在vscode进行安装, live serve用着还是挺好的, 有兴趣的小伙伴们可以自己去研究一下哈哈
vscode中的快捷注释: 单行注释: ctrl + /, 多行注释: alt + shift + a (取消多行注释也是这个)