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

重复栅格的命名技巧：

  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,[r-start] 1fr [r-end]);
  20.             grid-template-columns:repeat(3,[c-start] 1fr [c-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:r-start 1;
  31.             grid-row-end:r-end 1;
  32.             grid-column-start:c-start 1;
  33.             grid-column-end:c-end 3;
  35.             grid-row-start:r-start 2;
  36.             grid-row-end:r-end 2;
  37.             grid-column-start:c-start 2;
  38.             grid-column-end:c-end 2;
  39.         }
  40.  
  41.     </style>
  42. </head>
  43. <body>
  44.     <article>
  45.         <div>1</div>
  46.     </article>
  47. </body>
  48. </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.         }
  29.         article>div:first-of-type{
  30.             /* 加上span代表偏移量，而不是结束位置 */
  31.             /* grid-column-end:span 3;
  32.             grid-row-start:2;
  33.             grid-row-end:span 1; */
  35.             grid-row-start:2;
  36.             grid-row-end:span 1;
  37.             grid-column-start:2;
  38.             grid-column-end:span 1;
  39.         }
  40.  
  41.     </style>
  42. </head>
  43. <body>
  44.     <article>
  45.         <div>1</div>
  46.     </article>
  47. </body>
  48. </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.         }
  29.         article:nth-of-type(1)>div:first-of-type{
  30.             grid-row:3/4;
  31.             grid-column:3/4;
  33.             grid-row:2/3;
  34.             grid-column:2/3;
  36.             grid-row:1/span 1;
  37.             grid-column:2/span 1;
  38.         }
  40.         article:nth-of-type(2){
  41.             width: 300px;
  42.             height:300px;
  43.             border:1px solid red;
  44.             display:grid;
  45.             grid-template-rows:repeat(2,1fr);
  46.             grid-template-columns:repeat(2,1fr);
  47.         }
  48.         article:nth-of-type(2)>div:first-of-type{
  49.             grid-row:1/3;
  50.             grid-column:1/2;
  51.         }
  52.  
  53.     </style>
  54. </head>
  55. <body>
  56.     <article>
  57.         <div>1</div>
  58.     </article>
  59.  
  60.     <article>
  61.         <div>1</div>
  62.         <div>2</div>
  63.         <div>3</div>
  64.     </article>
  65. </body>
  66. </html>

 

 

开发bootstrap栅格系统：

  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.         .container{
  15.             width:1020px;
  16.             margin:0 auto;
  17.         }
  18.         .row{
  19.             display:grid;
  20.             grid-template-columns:repeat(12,1fr);
  21.         }
  22.         .col-1{
  23.             grid-column-end:span 1;
  24.         }
  25.         .col-2{
  26.             grid-column-end:span 2;
  27.         }
  28.         .col-3{
  29.             grid-column-end:span 3;
  30.         }
  31.         .col-4{
  32.             grid-column-end:span 4;
  33.         }
  34.         .col-5{
  35.             grid-column-end:span 5;
  36.         }
  37.         .col-6{
  38.             grid-column-end:span 6;
  39.         }
  40.         [class^='col-']{
  41.             background:pink;
  42.             border:1px solid pink;
  43.             padding:10px;
  44.             box-sizing:border-box;
  45.             background-clip:content-box;
  46.         }
  47.     </style>
  48. </head>
  49. <body>
  50.     <article class="container">
  51.         <div class="row">
  52.             <div class="col-1"></div>
  53.             <div class="col-6"></div>
  54.             <div class="col-5"></div>
  55.         </div>
  56.     </article>
  57. </body>
  58. </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{
  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.             background:pink;
  24.             /* 行的开始/列的开始/行的结束/列的结束 */
  25.             grid-area:2/2/2/2;
  27.             grid-area:3/2/3/2;
  28.         }
  29.         
  30.     </style>
  31. </head>
  32. <body>
  33.     <article>
  34.         <div></div>
  35.     </article>
  36. </body>
  37. </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{
  15.             width:300px;
  16.             height:300px;
  17.             border:1px solid red;
  18.             display:grid;
  19.             grid-template-rows:repeat(3,[r] 1fr);
  20.             grid-template-columns:repeat(3,[c] 1fr);
  21.         }
  22.         div{
  23.             background:pink;
  24.             /* 行的开始/列的开始/行的结束/列的结束 */
  25.             grid-area:r 2/c 2/r 3/c 3;
  26.         }
  27.         
  28.     </style>
  29. </head>
  30. <body>
  31.     <article>
  32.         <div></div>
  33.     </article>
  34. </body>
  35. </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{
  15.             width:100vwx;
  16.             height:100vh;
  18.             display:grid;
  19.             grid-template-rows:60px 1fr 60px;
  20.             grid-template-columns:60px 1fr;
  21.             grid-template-areas:"header header"
  22.             "nav main"
  23.             "footer footer";
  24.         }
  25.         article *{
  26.             border:1px solid pink;
  27.             background:pink;
  28.             padding:10px;
  29.             box-sizing:content-box;
  30.             background-clip:content-box;
  31.         }
  32.         header{
  33.             grid-area:header;
  34.         }
  35.         nav{
  36.             grid-area:nav;
  37.         }
  38.         main{
  39.             grid-area:main;
  40.         }
  41.         footer{
  42.             grid-area:footer;
  43.         }
  44.         
  45.     </style>
  46. </head>
  47. <body>
  48.     <article>
  49.         <header></header>
  50.         <nav></nav>
  51.         <main></main>
  52.         <footer></footer>
  53.     </article>
  54. </body>
  55. </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{
  15.             width:100vwx;
  16.             height:100vh;
  18.             display:grid;
  19.             grid-template-rows:60px 1fr 60px;
  20.             grid-template-columns:60px 1fr;
  21.             grid-template-areas:"header header"
  22.             "nav main"
  23.             "footer footer";
  24.         }
  25.         article *{
  26.             border:1px solid pink;
  27.             background:pink;
  28.             padding:10px;
  29.             box-sizing:content-box;
  30.             background-clip:content-box;
  31.         }
  32.         header{
  33.             grid-area:header-start/header-start/main-end/main-end;
  34.         }
  35.         footer{
  36.             grid-area:footer;
  37.         }
  38.         
  39.     </style>
  40. </head>
  41. <body>
  42.     <article>
  43.         <header></header>
  44.         <footer></footer>
  45.     </article>
  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{
  15.             width:100vwx;
  16.             height:100vh;
  18.             display:grid;
  19.             grid-template-rows:60px 1fr 60px;
  20.             grid-template-columns:60px 1fr;
  21.             grid-template-areas:"logo header"
  22.             "nav main"
  23.             "footer footer";
  24.         }
  25.         article *{
  26.             border:1px solid pink;
  27.             background:pink;
  28.             padding:10px;
  29.             box-sizing:content-box;
  30.             background-clip:content-box;
  31.         }
  32.         header{
  33.             grid-area:logo-start/logo-start/nav-end/logo-end;
  35.             grid-area:header-end/main-start/main-end/main-end;
  36.         }
  37.         footer{
  38.             grid-area:footer;
  39.         }
  40.         
  41.     </style>
  42. </head>
  43. <body>
  44.     <article>
  45.         <header></header>
  46.         <footer></footer>
  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{
  15.             width:100vwx;
  16.             height:100vh;
  18.             display:grid;
  19.             grid-template-rows:60px 1fr 60px;
  20.             grid-template-columns:60px 1fr;
  21.             grid-template-areas:". ."
  22.             ". ."
  23.             "footer footer";
  24.         }
  25.         article *{
  26.             border:1px solid pink;
  27.             background:pink;
  28.             padding:10px;
  29.             box-sizing:content-box;
  30.             background-clip:content-box;
  31.         }
  32.         footer{
  33.             grid-area:footer;
  34.         }
  35.         
  36.     </style>
  37. </head>
  38. <body>
  39.     <article>
  40.         <div>logo</div>
  41.         <div>nav</div>
  42.         <div>aside</div>
  43.         <div>main</div>
  44.         <footer>footer</footer>
  45.     </article>
  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{
  15.             width:300px;
  16.             height:300px;
  18.             display:grid;
  19.             grid-template-rows:repeat(3,1fr);
  20.             grid-template-columns:repeat(3,1fr);
  21.  
  22.             /* 默认行排列 */
  23.             grid-auto-flow:row;
  24.             /* 列排列 */
  25.             grid-auto-flow:column;
  26.         }
  27.         div{
  28.             border:1px solid pink;
  29.             background:pink;
  30.             padding:10px;
  31.             box-sizing:content-box;
  32.             background-clip:content-box;
  33.         }
  34.         
  35.     </style>
  36. </head>
  37. <body>
  38.     <article>
  39.         <div>1</div>
  40.         <div>2</div>
  41.         <div>3</div>
  42.         <div>4</div>
  43.         <div>5</div>
  44.         <div>6</div>
  45.         <div>7</div>
  46.         <div>8</div>
  47.         <div>9</div>
  48.     </article>
  49. </body>
  50. </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{
  15.             width:300px;
  16.             height:300px;
  18.             display:grid;
  19.             grid-template-rows:repeat(3,1fr);
  20.             grid-template-columns:repeat(3,1fr);
  21.  
  22.             /* dense 后面的元素会自动把空间填满 */
  23.             grid-auto-flow:row dense;
  24.         }
  25.         div{
  26.             border:1px solid pink;
  27.             background:pink;
  28.             padding:10px;
  29.             box-sizing:content-box;
  30.             background-clip:content-box;
  31.         }
  32.         div:first-child{
  33.             grid-column:span 2;
  34.         }
  35.         div:nth-child(2){
  36.             grid-column:2/span 1;
  37.         }
  38.         
  39.     </style>
  40. </head>
  41. <body>
  42.     <article>
  43.         <div>1</div>
  44.         <div>2</div>
  45.         <div>3</div>
  46.         <div>4</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{
  15.             width:300px;
  16.             height:100px;
  17.             border:1px solid red;
  19.             display:grid;
  20.             grid-template-columns:repeat(4,50px);
  21.             justify-content:space-evenly;
  22.             align-content:center;
  23.         }
  24.         div{
  25.             border:1px solid pink;
  26.             background:pink;
  27.             padding:10px;
  28.             box-sizing:border-box;
  29.             background-clip:content-box;
  30.             height:50px;
  31.         }
  32.         
  33.     </style>
  34. </head>
  35. <body>
  36.     <article>
  37.         <div>1</div>
  38.         <div>2</div>
  39.         <div>3</div>
  40.         <div>4</div>
  41.     </article>
  42. </body>
  43. </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{
  15.             width:300px;
  16.             height:75px;
  17.             border:1px solid red;
  19.             display:grid;
  20.             grid-template-columns:repeat(4,75px);
  22.             justify-items:start;
  23.             align-items:start;
  25.             justify-items:end;
  26.             align-items:end;
  27.  
  28.             /* 默认就是拉伸效果，如果元素设置过宽高则无效 */
  29.             justify-items:stretch;
  30.             align-items:stretch;
  32.             justify-items:center;
  33.             align-items:center;
  34.         }
  35.         div{
  36.             border:1px solid pink;
  37.             background:pink;
  38.             padding:10px;
  39.             box-sizing:border-box;
  40.             background-clip:content-box;
  41.         }
  42.         
  43.     </style>
  44. </head>
  45. <body>
  46.     <article>
  47.         <div>1</div>
  48.         <div>2</div>
  49.         <div>3</div>
  50.         <div>4</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{
  15.             width:300px;
  16.             height:75px;
  17.             border:1px solid red;
  19.             display:grid;
  20.             grid-template-columns:repeat(4,75px);
  22.             justify-items:start;
  23.             align-items:start;
  25.             justify-items:end;
  26.             align-items:end;
  27.  
  28.             /* 默认就是拉伸效果，如果元素设置过宽高则无效 */
  29.             justify-items:stretch;
  30.             align-items:stretch;
  32.             justify-items:center;
  33.             align-items:center;
  34.         }
  35.         div{
  36.             border:1px solid pink;
  37.             background:pink;
  38.             padding:10px;
  39.             box-sizing:border-box;
  40.             background-clip:content-box;
  41.         }
  42.         div:first-child{
  43.             justify-self:start;
  44.             align-self:start;
  46.             justify-self:end;
  47.             align-self:end;
  49.             justify-self:center;
  50.             align-self:end;
  52.             justify-self:stretch;
  53.             align-self:stretch;
  54.         }
  55.         
  56.     </style>
  57. </head>
  58. <body>
  59.     <article>
  60.         <div>1</div>
  61.         <div>2</div>
  62.         <div>3</div>
  63.         <div>4</div>
  64.     </article>
  65. </body>
  66. </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{
  15.             width:300px;
  16.             height:75px;
  17.             border:1px solid red;
  19.             display:grid;
  20.             grid-template-columns:repeat(4,60px);
  22.             justify-content:space-evenly;
  23.             align-content:center;
  24.  
  25.             /* 简写，先align-content，再justify-content */
  26.             place-content:center space-evenly;
  27.         }
  28.         div{
  29.             border:1px solid pink;
  30.             background:pink;
  31.             padding:10px;
  32.             box-sizing:border-box;
  33.             background-clip:content-box;
  34.             height:50px;
  35.         }
  36.         div:first-child{
  37.         }
  38.         
  39.     </style>
  40. </head>
  41. <body>
  42.     <article>
  43.         <div>1</div>
  44.         <div>2</div>
  45.         <div>3</div>
  46.         <div>4</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{
  15.             width:300px;
  16.             height:75px;
  17.             border:1px solid red;
  19.             display:grid;
  20.             grid-template-columns:repeat(4,75px);
  22.             justify-items:start;
  23.             align-items:center;
  25.             place-items:center end;
  26.         }
  27.         div{
  28.             border:1px solid pink;
  29.             background:pink;
  30.             padding:10px;
  31.             box-sizing:border-box;
  32.             background-clip:content-box;
  33.         }
  34.         div:first-child{
  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.     </article>
  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{
  15.             width:300px;
  16.             height:75px;
  17.             border:1px solid red;
  19.             display:grid;
  20.             grid-template-columns:repeat(4,75px);
  22.             justify-items:start;
  23.             align-items:center;
  25.             place-items:center end;
  26.         }
  27.         div{
  28.             border:1px solid pink;
  29.             background:pink;
  30.             padding:10px;
  31.             box-sizing:border-box;
  32.             background-clip:content-box;
  33.         }
  34.         div:first-child{
  35.             justify-self:end;
  36.             align-self:end;
  38.             place-self:start center;
  39.         }
  40.         
  41.     </style>
  42. </head>
  43. <body>
  44.     <article>
  45.         <div>1</div>
  46.         <div>2</div>
  47.         <div>3</div>
  48.         <div>4</div>
  49.     </article>
  50. </body>
  51. </html>

 

 

注意：align控制交叉轴，justify控制主轴；

-content 控制栅格

-items 控制栅格里的所有元素

-self 控制栅格里的某个元素

原文链接：http://www.cnblogs.com/chenyingying0/p/13951624.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号