经验首页 前端设计 程序设计 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. }
  29. article:nth-of-type(2){
  30. width: 300px;
  31. height:300px;
  32. border:1px solid red;
  33. display:grid;
  34. grid-template-rows:50% 50%;
  35. grid-template-columns:20% 20% 20% 20% 20%;
  36. }
  37. article>section{
  38. padding:10px;
  39. background:pink;
  40. border:1px solid pink;
  41. background-clip:content-box;
  42. box-sizing:border-box;
  43. }
  44. </style>
  45. </head>
  46. <body>
  47. <article>
  48. <div>1</div>
  49. <div>2</div>
  50. <div>3</div>
  51. <div>4</div>
  52. <div>5</div>
  53. <div>6</div>
  54. <div>7</div>
  55. <div>8</div>
  56. <div>9</div>
  57. </article>
  58.  
  59. <hr>
  60. <article>
  61. <section>1</section>
  62. <section>2</section>
  63. <section>3</section>
  64. <section>4</section>
  65. <section>5</section>
  66. <section>6</section>
  67. <section>7</section>
  68. <section>8</section>
  69. <section>9</section>
  70. <section>10</section>
  71. </article>
  72.  
  73. </body>
  74. </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. }
  29. article:nth-of-type(2){
  30. width: 300px;
  31. height:100px;
  32. border:1px solid red;
  33. display:grid;
  34. /* grid-template-rows:50% 50%;
  35. grid-template-columns:20% 20% 20% 20% 20%; */
  36.  
  37. /* repeat(分几格,每格占百分之多少) */
  38. grid-template-rows:repeat(2,50%);
  39. grid-template-columns:repeat(5,20%);
  40. }
  41. article>section{
  42. padding:10px;
  43. background:pink;
  44. border:1px solid pink;
  45. background-clip:content-box;
  46. box-sizing:border-box;
  47. }
  48. article:nth-of-type(3){
  49. width: 300px;
  50. height:100px;
  51. border:1px solid red;
  52. display:grid;
  53. /* 第一行高100px,第二行高50px。重复2遍 */
  54. grid-template-rows:repeat(2,100px 50px);
  55. grid-template-columns:repeat(5,20%);
  56. }
  57. </style>
  58. </head>
  59. <body>
  60. <article>
  61. <div>1</div>
  62. <div>2</div>
  63. <div>3</div>
  64. <div>4</div>
  65. <div>5</div>
  66. <div>6</div>
  67. <div>7</div>
  68. <div>8</div>
  69. <div>9</div>
  70. </article>
  71.  
  72. <hr>
  73.  
  74. <article>
  75. <section>1</section>
  76. <section>2</section>
  77. <section>3</section>
  78. <section>4</section>
  79. <section>5</section>
  80. <section>6</section>
  81. <section>7</section>
  82. <section>8</section>
  83. <section>9</section>
  84. <section>10</section>
  85. </article>
  86.  
  87. <hr>
  88.  
  89. <article>
  90. <section>1</section>
  91. <section>2</section>
  92. <section>3</section>
  93. <section>4</section>
  94. <section>5</section>
  95. <section>6</section>
  96. <section>7</section>
  97. <section>8</section>
  98. <section>9</section>
  99. <section>10</section>
  100. <section>11</section>
  101. <section>12</section>
  102. <section>13</section>
  103. <section>14</section>
  104. <section>15</section>
  105. <section>16</section>
  106. <section>17</section>
  107. <section>18</section>
  108. <section>19</section>
  109. <section>20</section>
  110.  
  111. </article>
  112.  
  113. </body>
  114. </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;
  28. grid-row-start:1;
  29. grid-row-end:2;
  30. grid-column-start:1;
  31. grid-column-end:4;
  32. grid-row-start:2;
  33. grid-row-end:3;
  34. grid-column-start:1;
  35. grid-column-end:2;
  36. grid-row-start:2;
  37. grid-row-end:3;
  38. grid-column-start:2;
  39. grid-column-end:3;
  40. }
  41.  
  42. </style>
  43. </head>
  44. <body>
  45. <article>
  46. <div>1</div>
  47. </article>
  48. </body>
  49. </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

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

本站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号