search

博客列表 >使用grid实现layui/bootstrap中的12列栅格布局组件

使用grid实现layui/bootstrap中的12列栅格布局组件

大宇
大宇原创
2021年03月30日 14:52:581109浏览

grid.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <link rel="stylesheet" href="grid.css" />
  8.     <title>layui/bootstrap中的12列栅格布局组件</title>
  9.   </head>
  10.   <body>
  11.     <!-- 先写一行，在行中定义列 -->
  12.     <!-- 一等份 -->
  13.     <div class="container">
  14.       <div class="row">
  15.         <span class="item col-12">12列</span>
  16.       </div>
  17.       <!-- 二等分 -->
  18.       <div class="row">
  19.         <span class="item col-6">6列</span>
  20.         <span class="item col-6">6列</span>
  21.       </div>
  22.       <!-- 三等份 -->
  23.       <div class="row">
  24.         <span class="item col-4">4列</span>
  25.         <span class="item col-4">4列</span>
  26.         <span class="item col-4">4列</span>
  27.       </div>
  28.       <!-- 二等分:2:10 -->
  29.       <div class="row">
  30.         <span class="item col-2">2列</span>
  31.         <span class="item col-10">10列</span>
  32.       </div>
  33.     </div>
  34.   </body>
  35. </html>

grid.css

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  7. body {
  8.   width: 100vw;
  9.   height: 100vh;
  10.   display: grid;
  11.   place-content: center;
  12. }
  13. .container {
  14.   min-width: 80vw;
  15.   display: grid;
  16.   gap: 0.5em;
  17. }
  18. .container > .row {
  19.   display: grid;
  20.   /* 任何一行都是由12列组成 */
  21.   grid-template-columns: repeat(12, 1fr);
  22.   min-height: 3em;
  23.   gap: 0.5em;
  24. }
  25. .container > .row > .item {
  26.   padding: 1em;
  27.   border: 1px solid;
  28. }
  29. .col-12 {
  30.   grid-area: auto / span 12;
  31. }
  32. .col-11 {
  33.   grid-area: auto / span 11;
  34. }
  35. .col-10 {
  36.   grid-area: auto / span 10;
  37. }
  38. .col-9 {
  39.   grid-area: auto / span 9;
  40. }
  41. .col-8 {
  42.   grid-area: auto / span 8;
  43. }
  44. .col-7 {
  45.   grid-area: auto / span 7;
  46. }
  47. .col-6 {
  48.   grid-area: auto / span 6;
  49. }
  50. .col-5 {
  51.   grid-area: auto / span 5;
  52. }
  53. .col-4 {
  54.   grid-area: auto / span 4;
  55. }
  56. .col-3 {
  57.   grid-area: auto / span 3;
  58. }
  59. .col-2 {
  60.   grid-area: auto / span 2;
  61. }
  62. .col-1 {
  63.   grid-area: auto / span 1;
  64. }

效果：

对于grid的应用
demo1.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.     <!-- font-awesome -->
  7.     <link
  8.       rel="stylesheet"
  9.       href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.css"
  10.     />
  11.     <link rel="stylesheet" href="style.css" />
  12.     <title>Document</title>
  13.   </head>
  14.   <body>
  15.     <!-- 个人卡片容器，居中卡片 -->
  16.     <div class="wrapper">
  17.       <!-- 个人卡片 -->
  18.       <div class="profile-card">
  19.         <!-- 卡片内容，导航，个人简介和工作经历 -->
  20.         <div class="content">
  21.           <!-- 导航 -->
  22.           <nav id="nav-menu">
  23.             <a class="active" href="#" data-rel="about-me-section">个人简介</a>
  24.             <a href="#" data-rel="work-exp-section">工作经历</a>
  25.             <!-- 当前选中菜单的指示条 -->
  26.             <div class="indicator"></div>
  27.           </nav>
  28.           <!-- 关于我部分 -->
  29.           <section class="about-me-section active-section">
  30.             <!-- 名字和身份信息 -->
  31.             <div class="personal-info">
  32.               <div class="title">
  33.                 <h1>大宇</h1>
  34.                 <p>学习php的弟弟一个</p>
  35.               </div>
  36.               <!-- 关注按钮 -->
  37.               <button class="follow-btn">
  38.                 <i class="fas fa-plus"></i>关注
  39.               </button>
  40.             </div>
  41.             <!-- 个人简介的内容 -->
  42.             <div class="about-me">
  43.               <p>
  44.                 我是xx，我是一名学习php的菜鸟一枚，毕业于xxxxxxxxxx学院，php小老弟一枚。目前在php中文网学习。擅长
  45.                 html css js php mysql等单词的拼写。
  46.               </p>
  47.             </div>
  48.             <!-- 社交图标 -->
  49.             <footer>
  50.               <ul>
  51.                 <li>
  52.                   <a href="#"><i class="fab fa-weixin"></i></a>
  53.                 </li>
  54.                 <li>
  55.                   <a href="#"><i class="fab fa-weibo"></i></a>
  56.                 </li>
  57.                 <li>
  58.                   <a href="#"><i class="fab fa-github"></i></a>
  59.                 </li>
  60.                 <li>
  61.                   <a href="#"><i class="fab fa-linkedin"></i></a>
  62.                 </li>
  63.               </ul>
  64.             </footer>
  65.           </section>
  66.           <!-- 工作经历部分 -->
  67.           <section class="work-exp-section">
  68.             <!-- 工作经历容器 -->
  69.             <div class="work-exps">
  70.               <!-- 每条工作经历 -->
  71.               <div class="work-exp-item">
  72.                 <!-- 职位 -->
  73.                 <div class="position">前端工程师</div>
  74.                 <!-- 分隔线 -->
  75.                 <div class="seperator"></div>
  76.                 <!-- 公司信息 -->
  77.                 <div class="work-info">
  78.                   <!-- 工作时间 -->
  79.                   <div class="time">
  80.                     2018.07 ~ 2019.08 <i class="far fa-calendar"></i>
  81.                   </div>
  82.                   <!-- 公司名称 -->
  83.                   <div class="company">北京某某互联网金融公司</div>
  84.                 </div>
  85.               </div>
  86.               <div class="work-exp-item">
  87.                 <div class="position">软件工程师</div>
  88.                 <div class="seperator"></div>
  89.                 <div class="work-info">
  90.                   <div class="time">
  91.                     2013.07 ~ 2016.07 <i class="far fa-calendar"></i>
  92.                   </div>
  93.                   <div class="company">北京某美国信息技术公司</div>
  94.                 </div>
  95.               </div>
  96.               <div class="work-exp-item">
  97.                 <div class="position">软件工程师</div>
  98.                 <div class="seperator"></div>
  99.                 <div class="work-info">
  100.                   <div class="time">
  101.                     2010.07 ~ 2010.12 <i class="far fa-calendar"></i>
  102.                   </div>
  103.                   <div class="company">北京某大软件有限公司</div>
  104.                 </div>
  105.               </div>
  106.             </div>
  107.           </section>
  108.         </div>
  109.         <!-- 头像 -->
  110.         <aside class="profile-image"><img src="me.jpeg" alt="我" /></aside>
  111.       </div>
  112.     </div>
  113.   </body>
  114. </html>

style.css

  1. @import url("https://fonts.googleapis.com/css?family=Raleway&display=swap");
  3. :root {
  4.   /* 主蓝色，按钮，社交图标 */
  5.   --primary-color: #71b3dd;
  6.   /* 主蓝色，深，导航 */
  7.   --primary-dark-color: #4489b5;
  8.   --text-color-gray: #8b979f;
  9.   --text-color-light-gray: #c1c7cb;
  10.   --text-color-dark-gray: #5a6f7c;
  11. }
  13. * {
  14.   margin: 0;
  15.   padding: 0;
  16.   font-size: 14px;
  17.   box-sizing: border-box;
  18.   font-family: "Raleway", "PingFang SC", "Microsoft Yahei", sans-serif;
  19. }
  21. .wrapper {
  22.   /* 栅格布局，居中卡片 */
  23.   display: grid;
  24.   align-items: center;
  25.   justify-content: center;
  26.   height: 100vh;
  27. }
  29. .profile-card {
  30.   display: grid;
  31.   /* 12格栅格 */
  32.   grid-template-columns: repeat(12, 1fr);
  33.   /* 每个列之间的空隙是12px */
  34.   column-gap: 12px;
  35.   /* 卡片总宽度为627px */
  36.   width: 627px;
  37.   /* 卡片总高度为374px */
  38.   height: 374px;
  39.   box-shadow: 0px 0px 22px 3px rgba(0, 0, 0, 0.18);
  40. }
  42. .profile-image {
  43.   /* 图片占5列 */
  44.   grid-column: 8 / 13;
  45.   max-width: 238px;
  46.   height: 100%;
  47.   /* 隐藏图片超出区域 */
  48.   overflow: hidden;
  49.   /* 垂直为靠上对齐 */
  50.   align-self: start;
  51.   /* 水平为靠右对齐 */
  52.   justify-self: end;
  53. }
  55. .profile-image img {
  56.   /* 图片放大，然后只显示一部分 */
  57.   width: 210%;
  58.   transform: translate(-205px, -280px);
  59.   object-fit: cover;
  60. }
  62. .content {
  63.   /* 左边内容占7列 */
  64.   grid-column: 1 / 8;
  65.   padding: 38px 28px 20px 33px;
  66.   position: relative;
  67. }
  69. nav {
  70.   margin-bottom: 24px;
  71.   display: flex;
  72.   position: relative;
  73. }
  75. nav a {
  76.   color: var(--text-color-gray);
  77.   text-decoration: none;
  78. }
  80. nav a.active {
  81.   color: var(--primary-dark-color);
  82. }
  84. nav a:not(:last-child) {
  85.   margin-right: 40px;
  86. }
  88. nav .indicator {
  89.   height: 2px;
  90.   background: var(--primary-dark-color);
  91.   bottom: -7px;
  92.   left: 0;
  93.   position: absolute;
  94.   transition: 0.4s;
  95. }
  97. .content section {
  98.   /* 堆叠个人简介和工作经历部分 */
  99.   position: absolute;
  100.   /* 默认都不显示  */
  101.   opacity: 0;
  102.   /* 淡出淡入效果 */
  103.   transition: 0.3s ease-out;
  104. }
  106. .content section.active-section {
  107.   /* 显示active-section */
  108.   opacity: 1;
  109. }
  111. /* 名字、身份与关注按钮左右布局，各占一列，子栅格不受父栅格影响，是个全新的栅格布局 */
  112. .personal-info {
  113.   display: grid;
  114.   grid-template-columns: 1fr 1fr;
  115. }
  116. /* 名字 */
  117. .title h1 {
  118.   font-size: 2em;
  119.   font-weight: 500;
  120. }
  121. /* 身份 */
  122. .title p {
  123.   color: var(--text-color-gray);
  124.   font-size: 1em;
  125.   margin: 6px 0 18px 0;
  126. }
  128. /* 关注按钮 */
  129. .follow-btn {
  130.   justify-self: end;
  131.   height: 30px;
  132.   background: var(--primary-color);
  133.   border: none;
  134.   color: white;
  135.   padding: 0 27px;
  136.   border-radius: 4px;
  137.   display: flex;
  138.   align-items: center;
  139.   justify-content: center;
  140.   line-height: 30px;
  141. }
  143. /* 关注按钮的加号 */
  144. .follow-btn .fas {
  145.   font-size: 10px;
  146.   margin-right: 6px;
  147. }
  149. /* 关于我部分 */
  150. .about-me {
  151.   color: var(--text-color-dark-gray);
  152.   font-weight: 300;
  153.   text-align: justify;
  154. }
  156. /* 社交按钮部分 */
  157. footer {
  158.   margin-top: 70px;
  159. }
  161. footer ul {
  162.   display: flex;
  163. }
  165. footer ul li {
  166.   list-style: none;
  167. }
  169. footer ul li:not(:last-child) {
  170.   margin-right: 30px;
  171. }
  173. footer .fab {
  174.   color: var(--primary-color);
  175.   font-size: 24px;
  176. }
  177. /* ********************************* */
  179. /* 工作经历，一共3条工作经历，所以创建了3行栅格布局 */
  180. .work-exps {
  181.   color: var(--text-color-gray);
  182.   display: grid;
  183.   grid-template-rows: repeat(3, minmax(80px, auto));
  184. }
  186. /* 每个工作经历为三列栅格布局，分别为职位，分隔线、公司名和工作时间部分 */
  187. .work-exp-item {
  188.   display: grid;
  189.   /* 列之间的比例 */
  190.   grid-template-columns: 5fr 1fr 7fr;
  191.   align-items: center;
  192.   justify-content: center;
  193. }
  195. /* 职位 */
  196. .position {
  197.   font-size: 18px;
  198.   font-weight: 500;
  199. }
  200. /* 分隔线 */
  201. .seperator {
  202.   height: 43px;
  203.   /* width: 1px; */
  204.   border-left: 2px dotted #eaeff2;
  205. }
  207. /* 工作时间 */
  208. .time {
  209.   color: var(--text-color-light-gray);
  210. }
  212. /* 公司 */
  213. .company {
  214.   font-size: 14px;
  215.   color: var(--text-color-dark-gray);
  216.   margin-top: 9px;
  217. }

效果：

这个是看了b站一个视频跟着写的。
这是视频链接：https://www.bilibili.com/video/BV1m741167V5?from=search&seid=1080097720873864678

上一条：Grid布局中的栅格布局下一条：实现一个迷你的MVC小框架
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议