简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >实战利用grid响应式布局和12栅格布局模板

实战利用grid响应式布局和12栅格布局模板

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰原创
2020年04月15日 23:09:121108浏览

一、我的相册案例（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个单元格上的布局；

上一条：CSS3：grid布局基础知识下一条：2020年4月9日作业--flex 弹性布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多