grid的基础知识

什么是Grid

基于行与列的二维空间布局

网格容器；

有若干个矩形网格单元构成；
使用属性display:grid就是网格容器；
默认是块元素在span中设置dispaly：grid其本身的行内元素会成为块元素

网格单元

单元格|网格区域

网格项目

网格容器中的子元素就是网格项目；
默认生成1行N列的容器（N就是项目的数量）

网格轨道

由多个网格单元组成
轨道就是行和列
设置列数量grid-template-columns :
设置轨道的行高 grid-template-rows :

轨道间距

容器中轨道之间的间距；
轨道间距 gap ： 水平 垂直；

实例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>grid实现三行两列的布局</title>
  6.   <style type="text/css">
  7.   .container{
  8.     display: grid;
  9.     /*设置三行*/
  10.     grid-template-rows:2em 2em 2em;
  11.     /*设置两列*/
  12.     grid-template-columns:10em 10em;
  13.     border:1px solid #000;
  14.   }
  15.   span{
  16.     border: 1px solid #ccc;
  17.     background-color: red;
  18.   }
  19.   </style>
  20. </head>
  21. <body>
  22.   <div class="container">
  23.   <span>item1</span>
  24.    <span>item2</span>
  25.     <span>item3</span>
  26.      <span>item4</span>
  27.       <span>item5</span>
  28.       <span>item5</span>
  29.   </div>
  30. </body>
  31. </html>

网格单元尺寸单位：fr(相对单位，一般用于移动端的布局)

设置轨道列宽的可以使用fr 响应式

fr与auto的区别

auto默认是适应，fr可以实现对应的倍数等
比如3行2列时 中间一列是左右俩列的2倍宽，auto就无法实现，fr可以实现：grid-template-columns: 1fr 2fr 1fr;

实例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>grid实现三行两列的布局</title>
  6.   <style type="text/css">
  7.   .container{
  8.     display: grid;
  9.     /*设置三行*/
  10.     grid-template-rows:2em 2em 2em;
  11.     /*设置两列*/
  12.     grid-template-columns:1fr 2fr 1fr;
  13.     border:1px solid #000;
  14.   }
  15.   span{
  16.     border: 1px solid #ccc;
  17.     background-color: red;
  18.   }
  20.   </style>
  21. </head>
  22. <body>
  23.   <div class="container">
  24.   <span>item1</span>
  25.    <span>item2</span>
  26.     <span>item3</span>
  27.      <span>item4</span>
  28.       <span>item5</span>
  29.       <span>item6</span>
  30.   </div>
  31. </body>
  32. </html>

fr和%的区别

%无法计算列边距，会出现内容超出，如果使用%,则需要关闭gap间距；
%可以与fr共存，计算方式：总宽度-%的宽度，将剩下的分配给fr

总结：auto 、fr 、%都是相对单位，都可以触发自动计算，尽量不要同时出现。

fr与其他单位混合：em、px等

px、em是固定值，计算时要减去固定值，将剩下的空间在fr之间分配；
grid-template-columns: 1em 2fr 3fr;

设置网格单元尺寸的常用函数

repeat()
重复：grid-template-columns: 1em 1em 1em;可以写成grid-template-columns: repeat(3,1em);
混合使用grid-template-columns: repeat(3,1fr) 2fr; 1fr 1fr 1fr 2fr;
minmax()最大最小值，grid-template-columns: 1fr minmax(5em,10fr) 1fr;
适用于局部响应式；超过了最大值页面不会收缩了，如果没有这个值这页面会无限收缩，不符合布局要求。

隐式轨道

声明的网格单元数量与网格项目不匹配时，多余的网格单元称为隐式轨道
隐式轨道也是可以控制的；
控制排列方式：grid-auto-flow: row|columns;
行优先时使用grid-auto-rows设置行高
列优先时使用grid-auto-columns设置列宽
总结映射关系：行优先grid-auto-flow：row对应grid-auto-rows
列优先grid-auto-flow:columns对应grid-auto-columns

网格项目的显示顺序

默认是按照书写顺序排列，可以自定义排序；
行号，列号：从左上角开始(1,1)递增；
属性grid-area: 行起始编号 / 列起始编号 /行结束编号 /列结束编号；
grid-area 参数不同意义不同
1、值中有span
单值：跨越的行数
双值：跨的行与列数，如果只想设置列数，就必须设置行数（auto）；
2、值中有span和编号
双值：没有span 默认跨一行一列，
三值：省略了列结束编号或跨的数量，此时前面的值可以使用auto

实例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>grid实现三行两列的布局</title>
  6.   <style type="text/css">
  7.          .container {
  8.             display: grid;
  9.             border: 1px solid #ccc;
  10.             /* 轨道列宽 */
  11.             grid-template-columns: repeat(3, 1fr);
  12.             /*等同*/
  13.             /*grid-template-columns:1fr 1fr 1fr;*/
  14.             /* 行高 */
  15.             grid-template-rows: 2em 2em;
  16.             /* 间距表示水平垂直都是0.2em的间距*/
  17.             gap: .2em;
  18.         }
  19.         .item {
  20.             background-color: aquamarine;
  21.             border: 1px solid #ccc;
  22.         }
  23.         .item:nth-of-type(5) {
  24.             background-color: bisque;
  25.             /*1/1表示是元素原来的位置而2/2表示是设置之后的位置*/
  26.             grid-area: 1 / 1 / 2 / 2;
  27.             /* 跨一行时可以简写 */
  28.             grid-area: 1 / 1;
  29.         }
  30.         .item:first-of-type {
  31.             background-color: brown;
  32.             /*表示跨一行三列*/
  33.             grid-area: span 1 /span 3;
  34.         }
  36.   </style>
  37. </head>
  38. <body>
  39.   <div class="container">
  40.   <span>item1</span>
  41.    <span>item2</span>
  42.     <span>item3</span>
  43.      <span>item4</span>
  44.       <span>item5</span>
  45.       <span>item6</span>
  46.   </div>
  47. </body>
  48. </html>

grid实现圣杯布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>grid实现圣杯布局</title>
  6.   <style type="text/css">
  7.           body {
  8.             display: grid;
  9.             grid-template-columns: 15em minmax(50vh, auto) 15em;
  10.             grid-template-rows: 3em minmax(80vh, auto) 3em;
  11.             gap: 0.5em;
  12.         }
  13.         body *{
  14.             border: 1px solid #ccc;
  15.         }
  16.         footer,
  17.         header {
  18.             /*跨一行三列*/ 
  19.            grid-area: auto /span 3;
  20.            grid-area: span 1 /span 3;
  21.         }
  22.         main {
  23.             grid-area: 2 / 2;
  24.         }
  25.         </style>
  26. </head>
  27. <body>
  28. <header>header</header>
  29. <!-- 圣杯布局规定了主体优先 -->
  30.     <main>main</main>
  31.     <aside class="left">left</aside>
  32.     <aside class="right">right</aside>
  33.     <footer>footer</footer>
  34.     </body>
  35. </html>

更多相关文章

  1. 苹果Mac如何设置允许任何来源应用程序安装？
  2. python连接redis存储
  3. 210329 CSS 媒体查询 grid布局
  4. Jupyter Notebook主题设置
  5. flex项目的三个属性及商城页眉页脚布局
  6. 苹果电脑如何开启显示器减弱动态效果设置？
  7. 关于OpenGL游戏全屏模式的设置
  8. VsCode常用设置，新手必备！
  9. 实现全托管，腾讯云服务网格的架构演进

随机推荐

  1. Android ViewPager 左右滑动-3
  2. Android 缩放图片
  3. "tabhost requires a tabwidget with id.
  4. Android(安卓)获取系统日期时间并且不断
  5. 获取Android版本信息和电话信息
  6. android listView实现单选
  7. android触屏手势识别全解析
  8. Android 获取系统权限的代码
  9. Difference of px, dp, dip and sp in an
  10. CheckBox自定义