经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
未来的CSS3布局方式 ，GRID 栅格系统 -cyy
来源：cnblogs　　作者：陈莺莺呀　　时间：2020/11/10 10:51:08　　对本文有异议

声明栅格系统的容器：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         article{
  15.             width: 300px;
  16.             height:300px;
  17.             border:1px solid red;
  18.             display:grid;
  19.             grid-template-rows:repeat(3,1fr);
  20.             grid-template-columns:repeat(3,1fr);
  21.         }
  22.         div{
  23.             width:100px;
  24.             height:100px;
  25.             padding:10px;
  26.             background:pink;
  27.             border:1px solid pink;
  28.             background-clip:content-box;
  29.             box-sizing:border-box;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <article>
  35.         <div>1</div>
  36.         <div>2</div>
  37.         <div>3</div>
  38.         <div>4</div>
  39.         <div>5</div>
  40.         <div>6</div>
  41.         <div>7</div>
  42.         <div>8</div>
  43.         <div>9</div>
  44.     </article>
  45.  
  46. </body>
  47. </html>

 

 

栅格绘制基础知识:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         article:nth-of-type(1){
  15.             width: 300px;
  16.             height:300px;
  17.             border:1px solid red;
  18.             display:grid;
  19.             grid-template-rows:100px 100px 100px;
  20.             grid-template-columns:100px 100px 100px;
  21.         }
  22.         article>div{
  23.             padding:10px;
  24.             background:pink;
  25.             border:1px solid pink;
  26.             background-clip:content-box;
  27.             box-sizing:border-box;
  28.         }
  30.         article:nth-of-type(2){
  31.             width: 300px;
  32.             height:300px;
  33.             border:1px solid red;
  34.             display:grid;
  35.             grid-template-rows:50% 50%;
  36.             grid-template-columns:20% 20% 20% 20% 20%;
  37.         }
  38.         article>section{
  39.             padding:10px;
  40.             background:pink;
  41.             border:1px solid pink;
  42.             background-clip:content-box;
  43.             box-sizing:border-box;
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <article>
  49.         <div>1</div>
  50.         <div>2</div>
  51.         <div>3</div>
  52.         <div>4</div>
  53.         <div>5</div>
  54.         <div>6</div>
  55.         <div>7</div>
  56.         <div>8</div>
  57.         <div>9</div>
  58.     </article>
  59.  
  60.     <hr>
  61.     
  62.     <article>
  63.         <section>1</section>
  64.         <section>2</section>
  65.         <section>3</section>
  66.         <section>4</section>
  67.         <section>5</section>
  68.         <section>6</section>
  69.         <section>7</section>
  70.         <section>8</section>
  71.         <section>9</section>
  72.         <section>10</section>
  73.     </article>
  74.  
  75. </body>
  76. </html>

 

 

重复绘制栅格结构：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         article:nth-of-type(1){
  15.             width: 300px;
  16.             height:300px;
  17.             border:1px solid red;
  18.             display:grid;
  19.             grid-template-rows:100px 100px 100px;
  20.             grid-template-columns:100px 100px 100px;
  21.         }
  22.         article>div{
  23.             padding:10px;
  24.             background:pink;
  25.             border:1px solid pink;
  26.             background-clip:content-box;
  27.             box-sizing:border-box;
  28.         }
  30.         article:nth-of-type(2){
  31.             width: 300px;
  32.             height:100px;
  33.             border:1px solid red;
  34.             display:grid;
  35.             /* grid-template-rows:50% 50%;
  36.             grid-template-columns:20% 20% 20% 20% 20%; */
  37.  
  38.             /* repeat(分几格，每格占百分之多少) */
  39.             grid-template-rows:repeat(2,50%);
  40.             grid-template-columns:repeat(5,20%);
  41.         }
  42.         article>section{
  43.             padding:10px;
  44.             background:pink;
  45.             border:1px solid pink;
  46.             background-clip:content-box;
  47.             box-sizing:border-box;
  48.         }
  50.         article:nth-of-type(3){
  51.             width: 300px;
  52.             height:100px;
  53.             border:1px solid red;
  54.             display:grid;
  55.             /* 第一行高100px，第二行高50px。重复2遍 */
  56.             grid-template-rows:repeat(2,100px 50px);
  57.             grid-template-columns:repeat(5,20%);
  58.         }
  59.     </style>
  60. </head>
  61. <body>
  62.     <article>
  63.         <div>1</div>
  64.         <div>2</div>
  65.         <div>3</div>
  66.         <div>4</div>
  67.         <div>5</div>
  68.         <div>6</div>
  69.         <div>7</div>
  70.         <div>8</div>
  71.         <div>9</div>
  72.     </article>
  73.  
  74.     <hr>
  75.  
  76.     <article>
  77.         <section>1</section>
  78.         <section>2</section>
  79.         <section>3</section>
  80.         <section>4</section>
  81.         <section>5</section>
  82.         <section>6</section>
  83.         <section>7</section>
  84.         <section>8</section>
  85.         <section>9</section>
  86.         <section>10</section>
  87.     </article>
  88.  
  89.     <hr>
  90.  
  91.     <article>
  92.         <section>1</section>
  93.         <section>2</section>
  94.         <section>3</section>
  95.         <section>4</section>
  96.         <section>5</section>
  97.         <section>6</section>
  98.         <section>7</section>
  99.         <section>8</section>
  100.         <section>9</section>
  101.         <section>10</section>
  102.         <section>11</section>
  103.         <section>12</section>
  104.         <section>13</section>
  105.         <section>14</section>
  106.         <section>15</section>
  107.         <section>16</section>
  108.         <section>17</section>
  109.         <section>18</section>
  110.         <section>19</section>
  111.         <section>20</section>
  112.  
  113.     </article>
  114.  
  115. </body>
  116. </html>

 

 

自动填充与按比例划分栅格：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         article:nth-of-type(1){
  15.             width: 300px;
  16.             height:300px;
  17.             border:1px solid red;
  18.             display:grid;
  19.             /* 自动填充 */
  20.             grid-template-rows:repeat(auto-fill,100px);
  21.             grid-template-columns:repeat(auto-fill,100px);
  22.             /* 等比例分成3份 */
  23.             grid-template-rows:repeat(3,1fr);
  24.             grid-template-columns:repeat(3,1fr);
  25.             /* 按比例划分 */
  26.             grid-template-rows:1fr 2fr 3fr;
  27.             grid-template-columns:1fr 2fr 1fr;
  28.         }
  29.         article>div{
  30.             padding:10px;
  31.             background:pink;
  32.             border:1px solid pink;
  33.             background-clip:content-box;
  34.             box-sizing:border-box;
  35.         }
  36.  
  37.     </style>
  38. </head>
  39. <body>
  40.     <article>
  41.         <div>1</div>
  42.         <div>2</div>
  43.         <div>3</div>
  44.         <div>4</div>
  45.         <div>5</div>
  46.         <div>6</div>
  47.         <div>7</div>
  48.         <div>8</div>
  49.         <div>9</div>
  50.     </article>
  51. </body>
  52. </html>

 

 

minmax控制尺寸波动范围：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         article:nth-of-type(1){
  15.             width: 300px;
  16.             height:300px;
  17.             border:1px solid red;
  18.             display:grid;
  19.             grid-template-rows:repeat(2,minmax(50px,100px));
  20.             grid-template-columns:repeat(5,1fr);
  21.         }
  22.         article>div{
  23.             padding:10px;
  24.             background:pink;
  25.             border:1px solid pink;
  26.             background-clip:content-box;
  27.             box-sizing:border-box;
  28.         }
  29.  
  30.     </style>
  31. </head>
  32. <body>
  33.     <article>
  34.         <div>1</div>
  35.         <div>2</div>
  36.         <div>3</div>
  37.         <div>4</div>
  38.         <div>5</div>
  39.         <div>6</div>
  40.         <div>7</div>
  41.         <div>8</div>
  42.         <div>9</div>
  43.         <div>10</div>
  44.     </article>
  45. </body>
  46. </html>

 

 

用栅格间距控制留白：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         article:nth-of-type(1){
  15.             width: 300px;
  16.             height:300px;
  17.             border:1px solid red;
  18.             display:grid;
  19.             grid-template-rows:repeat(2,1fr);
  20.             grid-template-columns:repeat(5,1fr);
  21.             /* 行间距 */
  22.             row-gap:10px;
  23.             /* 列间距 */
  24.             column-gap:10px;
  25.              /* 行列间距 */
  26.              gap:10px;
  27.              gap:20px 10px;
  28.         }
  29.         article>div{
  30.             /* padding:10px; */
  31.             background:pink;
  32.             border:1px solid pink;
  33.             background-clip:content-box;
  34.             box-sizing:border-box;
  35.         }
  36.  
  37.     </style>
  38. </head>
  39. <body>
  40.     <article>
  41.         <div>1</div>
  42.         <div>2</div>
  43.         <div>3</div>
  44.         <div>4</div>
  45.         <div>5</div>
  46.         <div>6</div>
  47.         <div>7</div>
  48.         <div>8</div>
  49.         <div>9</div>
  50.         <div>10</div>
  51.     </article>
  52. </body>
  53. </html>

 

 根据栅格线的编号放置元素：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         article:nth-of-type(1){
  15.             width: 300px;
  16.             height:300px;
  17.             border:1px solid red;
  18.             display:grid;
  19.             grid-template-rows:repeat(3,1fr);
  20.             grid-template-columns:repeat(3,1fr);
  21.         }
  22.         article>div{
  23.             padding:10px;
  24.             background:pink;
  25.             border:1px solid pink;
  26.             background-clip:content-box;
  27.             box-sizing:border-box;
  29.             grid-row-start:1;
  30.             grid-row-end:2;
  31.             grid-column-start:1;
  32.             grid-column-end:4;
  34.             grid-row-start:2;
  35.             grid-row-end:3;
  36.             grid-column-start:1;
  37.             grid-column-end:2;
  39.             grid-row-start:2;
  40.             grid-row-end:3;
  41.             grid-column-start:2;
  42.             grid-column-end:3;
  43.         }
  44.  
  45.     </style>
  46. </head>
  47. <body>
  48.     <article>
  49.         <div>1</div>
  50.     </article>
  51. </body>
  52. </html>

 

注意：形状只能是矩形，不能是不规则图形

 

小米界面不规则元素布局：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         article:nth-of-type(1){
  15.             width: 300px;
  16.             height:300px;
  17.             border:1px solid red;
  18.             display:grid;
  19.             grid-template-rows:repeat(2,1fr);
  20.             grid-template-columns:repeat(2,1fr);
  21.         }
  22.         article>div{
  23.             padding:10px;
  24.             background:pink;
  25.             border:1px solid pink;
  26.             background-clip:content-box;
  27.             box-sizing:border-box;
  28.         }
  29.         article>div:first-of-type{
  30.             grid-row-start:1;
  31.             grid-row-end:3;
  32.             grid-column-start:1;
  33.             grid-column-end:2;
  34.         }
  35.  
  36.     </style>
  37. </head>
  38. <body>
  39.     <article>
  40.         <div>1</div>
  41.         <div>2</div>
  42.         <div>3</div>
  43.     </article>
  44. </body>
  45. </html>

 

 

栅格固定命名放置元素：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="keywords" content="关键词1，关键词2，关键词3">
  7.     <meta name="description" content="网站描述bla bla">
  8.     <title>网站标题</title>
  9.     <style>
  10.         *{
  11.             margin:0;
  12.             padding:0;
  13.         }
  14.         article:nth-of-type(1){
  15.             width: 300px;
  16.             height:300px;
  17.             border:1px solid red;
  18.             display:grid;
  19.             grid-template-rows:[r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
  20.             grid-template-columns:[c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end];
  21.         }
  22.         article>div{
  23.             padding:10px;
  24.             background:pink;
  25.             border:1px solid pink;
  26.             background-clip:content-box;
  27.             box-sizing:border-box;
  28.         }
  29.         article>div:first-of-type{
  30.             grid-row-start:r1-start;
  31.             grid-row-end:r1-end;
  32.             grid-column-start:c2-start;
  33.             grid-column-end:c2-end;
  34.         }
  35.  
  36.     </style>
  37. </head>
  38. <body>
  39.     <article>
  40.         <div>1</div>
  41.     </article>
  42. </body>
  43. </html>

 

原文链接：http://www.cnblogs.com/chenyingying0/p/13951068.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号