search

博客列表 >gird移动布局以及常用属性,控制容器及项目和容器项目内的操作

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

卢先生
卢先生原创
2021年12月29日 22:17:44417浏览
VM和rem移动端适配布局:

代码为整套代码演示:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>vm和rem移动端适配</title>
  8.   </head>
  9.   <body>
  10.     <div class="header">头部测试移动端vw+rem适配</div>
  11.     <style>
  12.       * {
  13.         padding: 0;
  14.         margin: 0;
  15.         box-sizing: border-box;
  16.       }
  17.       /*先定义清楚浏览器自带的样式,并不让子项目溢出*/
  18.       html {
  19.         font-size: calc(100vw / 3.75);
  20.         /*根据当前窗口100vw计算字体的值,当前的窗口宽度为375px,100vw为100份,3.75等于100px.*/
  22.       }
  23.       .header {
  24.         background-color: chartreuse;
  25.         width: 2.3rem;
  26.         font-size: 0.16rem;
  27.         border: chocolate solid 1px;
  28.         display: grid;
  29.         place-content: center;
  30.         /*转回为grid布局,并居中*/
  31.       }
  33.       @media screen and (max-width: 375px) {
  34.         html {
  35.           font-size: 85px;
  36.         }
  37.         /*请看示例图2!!获取浏览器宽度,定义浏览器大小,当浏览器值在378以下时,字体固定在85px*/
  38.       }
  39.       @media screen and (min-width: 820px) {
  40.         html {
  41.         /*请看示例图3!!获取浏览器宽度,定义浏览器大小,当浏览器值在820px以上时,固定字体在180px*/
  42.           font-size: 180px;
  43.         }
  44.       }
  45.     </style>
  46.   </body>
  47. </html>
示例图例1(既范围在375PX-820PX之间):

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

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

下面是grid容器布局

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>grid容器布局</title>
  8.   </head>
  9.   <body>
  10.     <div class="body">
  11.       <div class="body_z"></div>
  12.     </div>
  13.     <style>
  14.       * {
  15.         padding: 0px;
  16.         margin: 0px;
  17.         box-sizing: border-box;
  18.       }
  19.       html {
  20.         font-size: 10px;
  21.         /*演示所以将目前的字体固定在了10px*/
  22.       }
  23.       .body {
  24.         display: grid;
  25.         /*首先转换成grid*/
  26.         background-color: olive;
  27.         width: 30em;
  28.         height: 30em;
  29.         grid-template-columns: 10em 10em 10em;
  30.         /*当前分三列,每列10em,还有两种种写法*/
  31.         /*grid-template-columns:repeat(3 , 10em)*/
  32.         /*grid-template-coimns:repear(3 , 1fr)
  33.         上面这个三列比较有意思,意思就是将当前项目平均分配3列,我的看法是这样*/
  34.         grid-template-rows: 10em 10em 10em;
  35.       }
  36.       .body > div {
  37.         grid-column: 1 / 3;
  38.         grid-row: 1 / 2;
  39.         background-color: orangered;
  40.         grid-area: 2 / 1 / 4 / 3;
  41.         /* 开始行 开始列 结束行 结束列 */
  42.       }
  43.     </style>
  44.   </body>
  45. </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 跟↑↑↑↑↑上面值一样 写法也是一样的,不过这里的意思是行的意思,不是列,上面那个是列的意思
下面是对网格子级进行操作,也就是对格子进行操作

首先建立代码:

  1. <body>
  2.     <div class="container">
  3.       <div class="item"></div>
  4.     </div>
  5.   </body>
  6.   <style>
  7.     .container {
  8.       width: 30em;
  9.       height: 30em;
  10.       background-color: lightcyan;
  12.       display: grid;
  13.       /* 显式网格 */
  14.       grid-template-columns: 10em 10em 10em;
  15.       grid-template-rows: 10em 10em 10em;
  17.       grid-template-columns: repeat(3, 10em);
  18.       grid-template-rows: repeat(3, 10em);
  20.       grid-template-columns: repeat(3, 1fr);
  21.       grid-template-rows: repeat(3, 1fr);
  22.     }
  23. /*上面是对网格的操作,就是对项目进行分格的操作*/
  24.       /*下面部分将是对网格子级进行操作*/
  25.       .body > div {
  26.         grid-column: 1 / 3;
  27.         /*上面是从第一列到第三列,就是*/
  28.         /*我的理解为选中第几列,第几行*/
  29.         grid-row: 1 / 2;
  30.         /*从第一行到第二行*/
  31.         /*请看下面的示例图1*/
  32.         background-color: orangered;
  33.         grid-area: 1 / 1 / 2 / 3;
  34.         /* 开始行 开始列 结束行 结束列  意思和上面一样,只不过用了`grid-area`参数,进行了操作,*/
  35.         /*还有一种跨行操作*/
  36.         grid-area: 1 / 1 / span 1 / span 2;
  37.         /*上面这种是一样的效果,效果是选中第一行 第一列,第一行跨1个行,第一列跨2个列,跟上面效果相同,并且也可以在grid-row和gird-column中使用*/
  38.       }
  39.       </style>
  40.   </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:

下面为完整代码:
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>grid网格</title>
  7.   </head>
  9.   <body>
  10.     <div class="header">
  11.       <div class="div tbody">1</div>
  12.       <div class="div tbody">2</div>
  13.       <div class="div tbody">3</div>
  14.       <div class="div tbody">4</div>
  15.       <div class="div tbody">5</div>
  16.       <div class="div tbody">6</div>
  17.       <div class="div tbody">7</div>
  18.       <div class="div tbody">8</div>
  19.       <div class="div tbody">9</div>
  20.       <div class="div tbody">超出部分</div>
  21.       <div class="div tbody">超出部分</div>
  22.     </div>
  23.     <style>
  24.       * {
  25.         padding: 0px;
  26.         margin: 0px;
  27.         box-sizing: border-box;
  28.       }
  30.       .header {
  31.         display: grid;
  32.         background-color: green;
  33.         /* width: 30em; */
  34.         height: 30em;
  35.         /* 下面的意思是显式网格 三列 每列10个em宽度 */
  36.         grid-template-columns: 10em 10em 10em;
  37.         /* 下面的意思是 显式网格 三行 每行10个em宽度 */
  38.         grid-template-rows: 10em 10em 10em;
  39.         /* 下面的意思是隐式网格 给10个em */
  40.         /* 隐式列自动与前面的列宽对齐,不用设置,除非改变行列排序规则 */
  41.         grid-auto-rows: 10em;
  42.         /* 示例图1中，下面开始写，让隐式网格的内容改变位置，到右面去吧 */
  43.         /* grid-auto-flow: column; */
  44.         /* 示例图2中，给他隐式列的位置10个em */
  45.         /* grid-auto-columns: 10em; */
  46.         /* 哎~，位置给我回来 */
  47.         /* grid-auto-flow: row; */
  48.         gap: 10px;
  49.         /* 示例图3中， 每个 10个间隙,让方块有一定的间隙 */
  50.         /* gap: 10px 20px; */
  51.         /* 横向间隙10个px,列的方向,间隙20个px */
  52.         /* place-content: start start; */
  53.         /* 根据同学的意思,默认就是左上 左上 */
  54.         /* start是默认的对齐方式 */
  55.         /* place-content: end end; */
  56.         min-height: 50em;
  57.         /* 这里看不出来,就给他一个高让我们看看,min-height: 50em; */
  58.         /* 根据同学提示的,就是结束,结束,结束的位置 */
  59.         /* 所有的方格,右对齐 */
  60.         /* place-content: end center; */
  61.         /* 第二位同学给我解答的意思是x轴跟Y轴起始位置为star,中间为center,结束位置是end */
  62.         /* 同学帮我理解的意思,是end是结束, center结束位置,是在项目中居中 */
  63.         /* 刚才的方格对齐居中不是很好看,加一个min-height测试效果 */
  64.         /* place-content: center; */
  65.         /* 所有项目在容器中居中 */
  66.         /* 下面是根据项目分配 */
  67.         place-content: space-between space-around;
  68.         /* place-content: space-around space-evenly; */
  69.         /* 项目左均匀对齐 */
  70.         /* place-content: space-between; */
  71.         /* 项目左右分散对齐 */
  72.         /* 项目分散分配 */
  73.         /* 所有项目在"单元格"中的对齐方式 */
  74.         /* 限定项目大小, 必须要小于单元格空间,对齐才有意义 */
  75.         /* place-items: start end; */
  76.         /* 看示例5 */
  77.         /* place-items: center center; */
  78.         /* place-items: center; */
  79.       }
  81.       .header > div {
  82.         /* grid-column: 1 /3; */
  83.         /* 从第一列到第三列 */
  84.         /* grid-row: 3 / 4; */
  85.         /* 从第三行到第四行 */
  86.         background-color: thistle;
  87.         /* 行开始 第三行，列开始，第一列 行结束 第四行 列结束 第四列 */
  88.         /* grid-area: 3 / 1 / 4 / 4; */
  89.         width: 3em;
  90.         height: 3em;
  91.         /* 上面给项目设置一个大小 */
  92.       }
  94.       .header > .div:nth-of-type(8) {
  95.         background-color: lightgreen;
  96.         place-self: end;
  97.         /* 还可以为某个项目单独设置单元格内对齐方式,如把第8个放到右下角 */
  98.       }
  99.     </style>
  100.   </body>
  101. </html>

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

先图后代码:

代码部分:
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>grid小案例: 页面布局(圣杯)</title>
  8.   </head>
  9.   <body>
  10.     <header>页眉</header>
  11.     <aside>左侧</aside>
  12.     <main>内容区</main>
  13.     <aside>右侧</aside>
  14.     <footer>页脚</footer>
  16.     <style>
  17.       * {
  18.         padding: 0;
  19.         margin: 0;
  20.         box-sizing: border-box;
  21.       }
  22.       body * {
  23.         background-color: violet;
  24.       }
  26.       body {
  27.         display: grid;
  28.         gap: 0.3em;
  29.         /* 三列二行 */
  30.         grid-template-columns: 200px minmax(400px, 1fr) 200px;
  31.         grid-template-rows: 3em minmax(calc(100vh - 6em - 0.6em), 1fr) 3em;
  32.         place-content: center;
  33.       }
  35.       /* 下面只需要设置页眉和页脚跨三列就可以了 */
  36.       header,
  37.       footer {
  38.         grid-column-end: span 3;
  39.       }
  40.     </style>
  41.   </body>
  42. </html>
上一条：媒体查询、定位、Flex布局下一条：快速实现支付宝支付及验签
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多