Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 使用grid实现layui/bootstrap中的12列栅格布局组件
Blogger Information
Blog 13
fans 1
comment 0
visits 9914
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实现layui/bootstrap中的12列栅格布局组件
大宇
Original
1105 people have browsed it

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

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