search

博客列表 >grid项目对齐示例并用grid模拟bootstrap/layui的12列栅格布局组件

grid项目对齐示例并用grid模拟bootstrap/layui的12列栅格布局组件

景云
景云原创
2021年02月21日 15:12:21641浏览

grid项目对齐/重构圣杯布局

  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>grid项目对齐/重构圣杯布局</title>
  7.     <style>
  8.         /* grid项目对齐 */
  9.         .container{
  10.             height: 25em;
  11.             display: grid;
  12.             grid-template-columns: repeat(3,10em);
  13.             grid-template-rows: repeat(2,5em);
  14.             grid-auto-rows: 5em;
  15.             border: 1px solid gray;
  16.             gap: .5em;
  17.             /* 1.设置容器中的“所有项目”在网格单元中的对齐方式
  18.             place-item:垂直方向 水平方向;
  19.              */
  20.             place-items: start center;/* 垂直居上 水平居中 */
  21.             place-items: normal center;/*垂直居上 水平居中 ,start相当于默认值，使用normal等效，也可以用auto*/
  22.             place-items: center center;/* 垂直 水平都居中 */
  23.             place-items: center;/*当两个值一致时，可省略一个*/
  24.             place-items: stretch;/* 拉伸（只有取消项目的固定尺寸才可以看到效果） */
  25.             /* /* 3.设置项目在网格容器中的对齐方式
  26.                 只有所有项目在容器中存在剩余空间时对齐才有必要且有意义
  27.              */
  28.                 /* 3.1 将所有项目作为一个整体在容器中对齐 */
  29.             place-content: center center;
  30.                 /* 3.2 将所有项目打散成独立个体在容器中设置对齐方式 */
  31.             place-content: space-between;/* 两端对齐 */
  32.             place-content: space-around;/* 分散对齐 */
  34.         }
  35.         .item{
  36.             /* width: 5em;
  37.             height: 3em; */
  38.             border: 1px solid rgb(201, 128, 183);
  39.             background-color: aqua;
  40.         }
  41.         /* 2.place-self:设置容器中某一个项目在网格单元中的对齐方式,这个属性必须用在项目上 */
  42.         .container>.item:nth-of-type(5){
  43.             /* background-color: blueviolet; */
  44.             /* place-self: center center;使用规则如place-item */
  45.         }
  47. /*----------------------------------------------------------------------------------*/
  48.         /* 使用命名式的网格区域来重构圣杯布局 */
  49.         body *{
  50.             border: 1px solid aqua;
  51.         }
  52.         body{
  53.             border: 1px solid aqua;
  54.             display: grid;
  55.             grid-template-columns: 15em minmax(50vw ,auto) 15em;
  56.             grid-template-rows: 3em minmax(80vh ,auto) 3em;
  57.             gap: 0.5em;
  58.             /* 设置命名网格区域在轨道中的显示位置 */
  59.             grid-template-areas: 
  60.             "header header header"
  61.             "left main right"
  62.             "footer footer footer";
  63.             /* 可以简化为：
  64.             .为占位符 */
  65.             grid-template-areas: 
  66.             "header header header"
  67.             ". main ."
  68.             "footer footer footer";
  69.         }
  70.         header{
  71.             grid-area: header;
  72.         }
  73.         footer{
  74.             grid-area: footer;
  75.         }
  76.         main{
  77.             grid-area: main;
  78.         }
  79.         /* 简化写法时此2不需要写了 */
  80.         /* main.left{
  81.             grid-area: left;
  82.         }
  83.         main.right{
  84.             grid-area: right;
  85.         } */
  86.     </style>
  87. </head>
  88. <body>
  89.     <!-- 使用命名式的网格区域来重构圣杯布局  -->
  90.     <header>header</header>
  91.     <main>main</main>
  92.     <aside class="left">left</aside>
  93.     <aside class="right">right</aside>
  94.     <footer>footer</footer>
  95. <!-- ------------------------------------------------------------------------------ -->
  96.     <!-- grid项目对齐 -->
  97.     <!-- <div class="container">
  98.         <div class="item">item1</div>
  99.         <div class="item">item2</div>
  100.         <div class="item">item3</div>
  101.         <div class="item">item4</div>
  102.         <div class="item">item5</div>
  103.         <div class="item">item6</div>
  104.         <div class="item">item7</div>
  105.         <div class="item">item8</div>
  106.         <div class="item">item9</div>
  107.     </div> -->
  110. </body>
  111. </html>

2.grid小实例：模拟bootstrap/layui的12列栅格布局组件

2.1 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.     <title>模拟bootstrap/layui的12列栅格布局组件</title>
  7.     <link rel="stylesheet" href="grid.css">
  8. </head>
  9. <body>
  10.     <!-- 栅格布局分为两步
  11.         先创建一个行，然后在行中进行列的划分
  12.     -->
  13.     <div class="container">
  14.         <div class="row">
  15.             <!-- 一等份 -->
  16.             <span class="item col-12">
  17.                 col-12
  18.             </span>
  19.         </div>
  20.         <div class="row">
  21.             <!-- 2等份 -->
  22.             <span class="item col-6">
  23.                 col-6
  24.             </span>
  25.             <span class="item col-6">
  26.                 col-6
  27.             </span>
  28.         </div>
  29.         <div class="row">
  30.             <!-- 3等份 -->
  31.             <span class="item col-4">
  32.                 col-4
  33.             </span>
  34.             <span class="item col-4">
  35.                 col-4
  36.             </span>
  37.             <span class="item col-4">
  38.                 col-4
  39.             </span>
  40.         </div>
  41.     </div>
  43.     <!-- 一个简单的实例 -->
  44.     <div class="container" style="margin-top: 3em;">
  45.         <!-- 头部 -->
  46.         <div class="row">
  47.             <div class="item col-12 header">header</div>
  48.         </div>
  49.         <!-- 正文 -->
  50.         <div class="row">
  51.             <div class="item col-2 left">left</div>
  52.             <div class="item col-8 main">main</div>
  53.             <div class="item col-2 right">right</div>
  54.         </div>
  55.         <!-- 底部 -->
  56.         <div class="row">
  57.             <div class="item col-12 footer">footer</div>
  58.         </div>
  59.     </div>
  60. </body>
  61. </html>

2.2css样式表

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }
  6. body {
  7.   width: 100vw;
  8.   height: 100vh;
  9.   display: grid;
  10.   place-content: center;
  11. }
  12. .container {
  13.   min-width: 80vw;
  14.   display: grid;
  15.   gap: 0.5em;
  16. }
  17. .container > .row {
  18.   display: grid;
  19.   grid-template-columns: repeat(12, 1fr);
  20.   min-height: 3em;
  21.   gap: 0.5em;
  22. }
  23. .container > .row > .item {
  24.   padding: 1em;
  25.   text-align: center;
  26.   border: 1px solid black;
  27. }
  28. .col-12 {
  29.   grid-area: auto / span 12;
  30. }
  31. .col-8 {
  32.   grid-area: auto / span 8;
  33. }
  34. .col-6 {
  35.   grid-area: auto / span 6;
  36. }
  37. .col-4 {
  38.   grid-area: auto / span 4;
  39. }
  40. .col-2 {
  41.   grid-area: auto / span 2;
  42. }
上一条：vue学习之路（路由）下一条：0129-数组的排序, 数组的合并, 数组成员的统计
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多