gird移动布局以及常用属性,控制容器及项目和容器项目内的操作 - 前端课程

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

VM和rem移动端适配布局:

代码为整套代码演示:

<!DOCTYPE html>
<html lang="zh-CN">
  <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>vm和rem移动端适配</title>
  </head>
  <body>
    <div class="header">头部测试移动端vw+rem适配</div>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      /*先定义清楚浏览器自带的样式,并不让子项目溢出*/
      html {
        font-size: calc(100vw / 3.75);
        /*根据当前窗口100vw计算字体的值,当前的窗口宽度为375px,100vw为100份,3.75等于100px.*/
      }
      .header {
        background-color: chartreuse;
        width: 2.3rem;
        font-size: 0.16rem;
        border: chocolate solid 1px;
        display: grid;
        place-content: center;
        /*转回为grid布局,并居中*/
      }
      @media screen and (max-width: 375px) {
        html {
          font-size: 85px;
        }
        /*请看示例图2!!获取浏览器宽度,定义浏览器大小,当浏览器值在378以下时,字体固定在85px*/
      }
      @media screen and (min-width: 820px) {
        html {
        /*请看示例图3!!获取浏览器宽度,定义浏览器大小,当浏览器值在820px以上时,固定字体在180px*/
          font-size: 180px;
        }
      }
    </style>
  </body>
</html>

示例图例1(既范围在375PX-820PX之间):

当屏幕缩小至375以内后,字体像素将固定在85px

示例图2:

当屏幕放大到820px以上像素时,字体像素将固定在180px,不再放大!

示例图3:

下面是grid容器布局

<!DOCTYPE html>
<html lang="zh-CN">
  <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>
  <body>
    <div class="body">
      <div class="body_z"></div>
    </div>
    <style>
      * {
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
      }
      html {
        font-size: 10px;
        /*演示所以将目前的字体固定在了10px*/
      }
      .body {
        display: grid;
        /*首先转换成grid*/
        background-color: olive;
        width: 30em;
        height: 30em;
        grid-template-columns: 10em 10em 10em;
        /*当前分三列,每列10em,还有两种种写法*/
        /*grid-template-columns:repeat(3 , 10em)*/
        /*grid-template-coimns:repear(3 , 1fr)
        上面这个三列比较有意思,意思就是将当前项目平均分配3列,我的看法是这样*/
        grid-template-rows: 10em 10em 10em;
      }
      .body > div {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
        background-color: orangered;
        grid-area: 2 / 1 / 4 / 3;
        /* 开始行 开始列 结束行 结束列 */
      }
    </style>
  </body>
</html>

grid-template-columns写法
grid-template-columns:repeat(3 , 10em)
grid-template-coimns:repeat(3 , 1fr)
grid-template-columns: 10em 10em 10em;

以上三个都为三列的写法 colums 列

grid-template-rows写法
grid-template-rows: 10em 10em 10em;
grid-template-rows: repeat(3 , 10em);
grid-template-rows: repeat(3 , 1fr);

这里`repeat(3 , 1fr)`我的理解为平均分配三分之一…不知道对错?

效果如图:

参数	值	写法
grid-template-columns	10em 10em 10em或repeat(3 , 10em)或repeat(3 , 1fr)	grid中是列的意思,写法如:grid-template-columns:repeat(3 , 10em),grid-template-coimns:repeat(3 , 1fr),grid-template-columns: 10em 10em 10em,三种写法,意思都是一样的.上面也有解释
grid-template-rows	跟↑↑↑↑↑上面值一样	写法也是一样的,不过这里的意思是行的意思,不是列,上面那个是列的意思

下面是对网格子级进行操作,也就是对格子进行操作

首先建立代码:

<body>
    <div class="container">
      <div class="item"></div>
    </div>
  </body>
  <style>
    .container {
      width: 30em;
      height: 30em;
      background-color: lightcyan;
      display: grid;
      /* 显式网格 */
      grid-template-columns: 10em 10em 10em;
      grid-template-rows: 10em 10em 10em;
      grid-template-columns: repeat(3, 10em);
      grid-template-rows: repeat(3, 10em);
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
    }
/*上面是对网格的操作,就是对项目进行分格的操作*/
      /*下面部分将是对网格子级进行操作*/
      .body > div {
        grid-column: 1 / 3;
        /*上面是从第一列到第三列,就是*/
        /*我的理解为选中第几列,第几行*/
        grid-row: 1 / 2;
        /*从第一行到第二行*/
        /*请看下面的示例图1*/
        background-color: orangered;
        grid-area: 1 / 1 / 2 / 3;
        /* 开始行 开始列 结束行 结束列  意思和上面一样,只不过用了`grid-area`参数,进行了操作,*/
        /*还有一种跨行操作*/
        grid-area: 1 / 1 / span 1 / span 2;
        /*上面这种是一样的效果,效果是选中第一行 第一列,第一行跨1个行,第一列跨2个列,跟上面效果相同,并且也可以在grid-row和gird-column中使用*/
      }
      </style>
  </body>

参数	写法	说明
grid-column	grid-column: 1 / 3;或grid-column: 1 / span 2;	列,grid-column: 1 / 3;意思是选中第一列到第三列,第二个grid-column: 1 / span 2;意思是,从第一列,跨到第二列,注意,这个参数出现一般会跟着grid-row参数
grid-row	grid-row: 1 / 2;或grid-row: 1 / span 2;	行,行的意思,grid-row: 1 / 2;意思是选中从第一行到第二行,或者grid-row: 1 / span 2;选中从第一行到跨2行,也是一般需要配合grid-column来使用
grid-area	grid-area: 1 / 1 / 2 / 3;或grid-area: 1 / 1 / span 2 / span 3;	相对厉害一些,把上面的给集合了,可以一起操作,意思开始行开始列结束行结束列

示例图1:

对网格对项目及在项目之前,在容器中分配,这一节课有点混,看不太懂了,操作了一遍也不太懂,需要回来复习

先写参数吧:

参数	值	说明
grid-auto-rows	10em;100px等	对隐式网格操作,看到rows应该就知道吧,行设置10em,看示例图1
grid-auto-flow	row/column	隐式网格的排列方向,row横向,column纵向,看示例图2,
gap	1em,10px	对网格交叉部分增加一个间隙,看示例图3,
place-content	start,end,center	可以同时使用两个值或1个值,,示例place-content: start start;默认位置,place-content: end end;右下位置,示例图4中有提示,place-content: end center;横向轴居中,
place-content	space-between,space-around space-evenly	目前不会用
place-items	start,center,end,	对每个单元格的控制,例如place-items: start end;意思是,往右上角走一下,每个单元格内的项目,将往右上角走一下,看示例5
place-self	start,center,end,	一般是控制某个单元格内的项目进行操作,看示例6

示例图1:
超出部分无任何操作时

超出部分增加grid-auto-rows: 10em;时

示例图2:默认横向改为纵向

示例图3:

示例图4:

示例5:

示例6:

下面为完整代码:

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid网格</title>
  </head>
  <body>
    <div class="header">
      <div class="div tbody">1</div>
      <div class="div tbody">2</div>
      <div class="div tbody">3</div>
      <div class="div tbody">4</div>
      <div class="div tbody">5</div>
      <div class="div tbody">6</div>
      <div class="div tbody">7</div>
      <div class="div tbody">8</div>
      <div class="div tbody">9</div>
      <div class="div tbody">超出部分</div>
      <div class="div tbody">超出部分</div>
    </div>
    <style>
      * {
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
      }
      .header {
        display: grid;
        background-color: green;
        /* width: 30em; */
        height: 30em;
        /* 下面的意思是显式网格 三列 每列10个em宽度 */
        grid-template-columns: 10em 10em 10em;
        /* 下面的意思是 显式网格 三行 每行10个em宽度 */
        grid-template-rows: 10em 10em 10em;
        /* 下面的意思是隐式网格 给10个em */
        /* 隐式列自动与前面的列宽对齐,不用设置,除非改变行列排序规则 */
        grid-auto-rows: 10em;
        /* 示例图1中，下面开始写，让隐式网格的内容改变位置，到右面去吧 */
        /* grid-auto-flow: column; */
        /* 示例图2中，给他隐式列的位置10个em */
        /* grid-auto-columns: 10em; */
        /* 哎~，位置给我回来 */
        /* grid-auto-flow: row; */
        gap: 10px;
        /* 示例图3中， 每个 10个间隙,让方块有一定的间隙 */
        /* gap: 10px 20px; */
        /* 横向间隙10个px,列的方向,间隙20个px */
        /* place-content: start start; */
        /* 根据同学的意思,默认就是左上 左上 */
        /* start是默认的对齐方式 */
        /* place-content: end end; */
        min-height: 50em;
        /* 这里看不出来,就给他一个高让我们看看,min-height: 50em; */
        /* 根据同学提示的,就是结束,结束,结束的位置 */
        /* 所有的方格,右对齐 */
        /* place-content: end center; */
        /* 第二位同学给我解答的意思是x轴跟Y轴起始位置为star,中间为center,结束位置是end */
        /* 同学帮我理解的意思,是end是结束, center结束位置,是在项目中居中 */
        /* 刚才的方格对齐居中不是很好看,加一个min-height测试效果 */
        /* place-content: center; */
        /* 所有项目在容器中居中 */
        /* 下面是根据项目分配 */
        place-content: space-between space-around;
        /* place-content: space-around space-evenly; */
        /* 项目左均匀对齐 */
        /* place-content: space-between; */
        /* 项目左右分散对齐 */
        /* 项目分散分配 */
        /* 所有项目在"单元格"中的对齐方式 */
        /* 限定项目大小, 必须要小于单元格空间,对齐才有意义 */
        /* place-items: start end; */
        /* 看示例5 */
        /* place-items: center center; */
        /* place-items: center; */
      }
      .header > div {
        /* grid-column: 1 /3; */
        /* 从第一列到第三列 */
        /* grid-row: 3 / 4; */
        /* 从第三行到第四行 */
        background-color: thistle;
        /* 行开始 第三行，列开始，第一列 行结束 第四行 列结束 第四列 */
        /* grid-area: 3 / 1 / 4 / 4; */
        width: 3em;
        height: 3em;
        /* 上面给项目设置一个大小 */
      }
      .header > .div:nth-of-type(8) {
        background-color: lightgreen;
        place-self: end;
        /* 还可以为某个项目单独设置单元格内对齐方式,如把第8个放到右下角 */
      }
    </style>
  </body>
</html>

欣赏项目(老师写的圣杯项目)

先图后代码:

代码部分:

<!DOCTYPE html>
<html lang="zh-CN">
  <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>
  <body>
    <header>页眉</header>
    <aside>左侧</aside>
    <main>内容区</main>
    <aside>右侧</aside>
    <footer>页脚</footer>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      body * {
        background-color: violet;
      }
      body {
        display: grid;
        gap: 0.3em;
        /* 三列二行 */
        grid-template-columns: 200px minmax(400px, 1fr) 200px;
        grid-template-rows: 3em minmax(calc(100vh - 6em - 0.6em), 1fr) 3em;
        place-content: center;
      }
      /* 下面只需要设置页眉和页脚跨三列就可以了 */
      header,
      footer {
        grid-column-end: span 3;
      }
    </style>
  </body>
</html>