Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 实战利用grid响应式布局和12栅格布局模板
Blogger Information
Blog 145
fans 7
comment 7
visits 164555
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
实战利用grid响应式布局和12栅格布局模板
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
1111 people have browsed it

一、我的相册案例（grid响应式布局）

1、代码部分：

  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.     <title>我的相册</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.         /* box-sizing: border-box; */
  12.       }
  13.       a {
  14.         text-decoration: none;
  15.         color: #6e6e6e;
  16.       }
  17.       body {
  18.         width: 98vw;
  19.         height: 99vh;
  20.         background-color: #80ffff;
  21.       }
  22.       .container > div img {
  23.         width: 180px;
  24.         height: 240px;
  25.       }
  26.       .container > div > a > img:hover {
  27.         width: 185px;
  28.       }
  29.       .container {
  30.         /* width: 100vw; */
  31.         /* height: 100vh; */
  32.         display: grid;
  33.         grid-template-columns: repeat(auto-fill, 280px);
  34.         grid-template-rows: repeat(auto-fill, 300px);
  35.         gap: 20px 10px;
  36.         grid-auto-rows: 300px;
  37.         justify-content: space-evenly;
  38.         align-content: space-evenly;
  39.       }
  40.       .container div {
  41.         padding: 20px auto;
  42.         box-sizing: border-box;
  43.         background-color: #eee;
  44.         display: flex;
  45.         flex-flow: column nowrap;
  46.         justify-content: space-evenly;
  47.         align-items: center;
  48.         border-radius: 10%;
  49.       }
  50.       .container > div:hover {
  51.         background-color: #f3f19e;
  52.         box-shadow: 0 0 10px #717171;
  53.       }
  54.       h1 {
  55.         text-align: center;
  56.         margin: 20px;
  57.         text-shadow: 2px 2px 1px #302f2f;
  58.       }
  59.     </style>
  60.   </head>
  61.   <body>
  62.     <h1>我的相册</h1>
  63.     <div class="container">
  64.       <div>
  65.         <a href=""><img src="images/798.png" alt="" /></a>
  66.         <a href="">富豫369</a>
  67.       </div>
  68.       <div>
  69.         <a href=""><img src="images/798.png" alt="" /></a>
  70.         <a href="">富豫369</a>
  71.       </div>
  72.       <div>
  73.         <a href=""><img src="images/798.png" alt="" /></a>
  74.         <a href="">富豫369</a>
  75.       </div>
  76.       <div>
  77.         <a href=""><img src="images/798.png" alt="" /></a>
  78.         <a href="">富豫369</a>
  79.       </div>
  80.       <div>
  81.         <a href=""><img src="images/798.png" alt="" /></a>
  82.         <a href="">富豫369</a>
  83.       </div>
  84.       <div>
  85.         <a href=""><img src="images/798.png" alt="" /></a>
  86.         <a href="">富豫369</a>
  87.       </div>
  88.       <div>
  89.         <a href=""><img src="images/798.png" alt="" /></a>
  90.         <a href="">富豫369</a>
  91.       </div>
  92.       <div>
  93.         <a href=""><img src="images/798.png" alt="" /></a>
  94.         <a href="">富豫369</a>
  95.       </div>
  96.       <div>
  97.         <a href=""><img src="images/798.png" alt="" /></a>
  98.         <a href="">富豫369</a>
  99.       </div>
  100.       <div>
  101.         <a href=""><img src="images/798.png" alt="" /></a>
  102.         <a href="">富豫369</a>
  103.       </div>
  104.       <div>
  105.         <a href=""><img src="images/798.png" alt="" /></a>
  106.         <a href="">富豫369</a>
  107.       </div>
  108.       <div>
  109.         <a href=""><img src="images/798.png" alt="" /></a>
  110.         <a href="">富豫369</a>
  111.       </div>
  112.       <div>
  113.         <a href=""><img src="images/798.png" alt="" /></a>
  114.         <a href="">富豫369</a>
  115.       </div>
  116.       <div>
  117.         <a href=""><img src="images/798.png" alt="" /></a>
  118.         <a href="">富豫369</a>
  119.       </div>
  120.       <div>
  121.         <a href=""><img src="images/798.png" alt="" /></a>
  122.         <a href="">富豫369</a>
  123.       </div>
  124.       <div>
  125.         <a href=""><img src="images/798.png" alt="" /></a>
  126.         <a href="">富豫369</a>
  127.       </div>
  128.       <div>
  129.         <a href=""><img src="images/798.png" alt="" /></a>
  130.         <a href="">富豫369</a>
  131.       </div>
  132.       <div>
  133.         <a href=""><img src="images/798.png" alt="" /></a>
  134.         <a href="">富豫369</a>
  135.       </div>
  136.       <div>
  137.         <a href=""><img src="images/798.png" alt="" /></a>
  138.         <a href="">富豫369</a>
  139.       </div>
  140.       <div>
  141.         <a href=""><img src="images/798.png" alt="" /></a>
  142.         <a href="">富豫369</a>
  143.       </div>
  144.     </div>
  145.   </body>
  146. </html>

2、运行结果：
http://www.zhongyequan.com/php/myphoto.html

二、12栅格布局：

1、代码：

  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.     <title>12栅格布局</title>
  7.     <style>
  8.       * {
  9.         margin: 0;
  10.         padding: 0;
  11.       }
  12.       body {
  13.         height: 100vh;
  14.         width: 100vw;
  15.         display: flex;
  16.         flex-flow: column nowrap;
  17.         justify-content: center;
  18.         /* align-content: center; */
  19.       }
  20.       .container {
  21.         min-width: 1000px;
  22.         margin: 3px auto;
  23.         display: grid;
  24.         grid-template-columns: repeat(12, 1fr);
  25.         column-gap: 5px;
  26.       }
  27.       .cell {
  28.         width: 100%;
  29.         min-height: 40px;
  30.         background-color: #3e3e;
  31.         text-align: center;
  32.         line-height: 40px;
  33.         outline: 1px solid red;
  34.       }
  35.       .col-12 {
  36.         grid-column: span 12;
  37.       }
  38.       .col-11 {
  39.         grid-column: span 11;
  40.       }
  41.       .col-10 {
  42.         grid-column: span 10;
  43.       }
  44.       .col-9 {
  45.         grid-column: span 9;
  46.       }
  47.       .col-8 {
  48.         grid-column: span 8;
  49.       }
  50.       .col-7 {
  51.         grid-column: span 7;
  52.       }
  53.       .col-6 {
  54.         grid-column: span 6;
  55.       }
  56.       .col-5 {
  57.         grid-column: span 5;
  58.       }
  59.       .col-4 {
  60.         grid-column: span 4;
  61.       }
  62.       .col-3 {
  63.         grid-column: span 3;
  64.       }
  65.       .col-2 {
  66.         grid-column: span 2;
  67.       }
  68.       .col-1 {
  69.         grid-column: span 1;
  70.       }
  71.     </style>
  72.   </head>
  73.   <body>
  74.     <div class="container">
  75.       <div class="cell col-4">
  76.         4
  77.       </div>
  78.       <div class="cell col-8">
  79.         8
  80.       </div>
  81.     </div>
  83.     <div class="container">
  84.       <div class="cell col-2">
  85.         2
  86.       </div>
  87.       <div class="cell col-1">
  88.         1
  89.       </div>
  90.     </div>
  91.     <div class="container">
  92.       <div class="cell col-1">
  93.         1
  94.       </div>
  95.       <div class="cell col-2">
  96.         2
  97.       </div>
  98.       <div class="cell col-3">
  99.         <span>3</span>
  100.       </div>
  101.       <div class="cell col-4">
  102.         4
  103.       </div>
  104.     </div>
  105.   </body>
  106. </html>

2、代码运行效果：

三、总结：

1、利用grid布局响应式网站（我的相册）：
重点在于：

  1. /*栅格项目的自动填充*/
  2. grid-template-columns: repeat(auto-fill, 280px);
  3. grid-template-rows: repeat(auto-fill, 300px);
  4. gap: 20px 10px;
  5. /*设置隐式栅格的高度*/
  6. grid-auto-rows: 300px;

2、calc() 函数用于动态计算长度值。

  • 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
  • 任何长度值都可以使用calc()函数进行计算；
  • calc()函数支持 “+”, “-“, “*”, “/“ 运算；
  • calc()函数使用标准的数学运算优先级规则；

3、12栅格布局重点在于grid网格域的布局：span 3偏移单元格的，设个多个不同的类样式，来控制项目在12个单元格上的布局；

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：css博大精深
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post