简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > grid项目对齐示例并用grid模拟bootstrap/layui的12列栅格布局组件
Blogger Information
Blog 40
fans 0
comment 1
visits 34280
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项目对齐示例并用grid模拟bootstrap/layui的12列栅格布局组件
景云
Original
630 people have browsed it

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. }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：图呢
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！