Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid网格布局主要的属性详解
Blogger Information
Blog 25
fans 1
comment 0
visits 12987
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网格布局主要的属性详解
xueblog9的进阶之旅
Original
702 people have browsed it

grid 网格布局详解

网格布局主要的 9 个属性

属性 参考值 定义解释
display grid 声明为 grid 盒子
grid-template-columns/rows 列数/行数 划网格定义例/行数，repeat(重复次数，重复值)
gird-auto-flow column/row 默认行优先，定义交叉轴/主轴方向上排列
grid-auto-rows/columns 宽高大小 定义隐藏网格的宽高，应用场景在项目数量大于网格数量时
grid-area 行列 格式：开始行/开始列/结束行(可 span 指定)/结束列(可 span 指定),用于网格合并操作，span 指定跨越的网格数
gap 行列间距 格式顺序：行间距 列间距，间距相等时可省略一个
place-content start,end,center 父盒子的剩余空间在子盒子中的分配方式，计算好父盒子与子盒子大小（加上 gap）之后，一般用不到
place-items start,end,center 项目在网格中的分布方式，一般采用 center，居中显示
place-self start,end,center 控制单个项目的在网格中的分布方式

实例

源码

  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>grid</title>
  9. </head>
  10. <body>
  11.     <div class="boxda">
  12.         <div class="box">子盒子1</div>
  13.         <div class="box">子盒子2</div>
  14.         <div class="box">子盒子3</div>
  15.         <div class="box">子盒子4</div>
  16.         <div class="box">子盒子5</div>
  17.         <div class="box">子盒子6</div>
  18.         <div class="box">子盒子7</div>
  19.         <div class="box">子盒子8</div>
  20.         <div class="box">子盒子9</div>
  21.         <div class="box">子盒子10</div>
  22.     </div>
  23.     <style>
  24.         * {
  25.             font-size: 14px;
  26.             margin: 0; 
  27.             padding: 0;
  28.             box-sizing: border-box;
  29.         }
  30.         /* 划分格子，子盒子自动排列到格子中 */
  31.         body .boxda {
  32.             display: grid;
  33.             width: 640px;
  34.             height: 660px;
  35.             border: 1px solid #999;
  36.             grid-template-columns: repeat(3,100px);
  37.             grid-template-rows: repeat(3,100px);
  38.             /* 自动为多出来的子盒子添加高宽，
  39.             grid-auto-flow:row/column
  40.             (横竖排列方式决定，自动生成的宽高的选项) */
  41.             /* grid-auto-columns:  200px; */
  42.             grid-auto-rows: 100px;
  43.             place-content: space-evenly;
  44.             place-items: center;
  45.             /* gap:20px; gap使用需要计算好父盒子与子盒子的宽高，这边为了演示 
  46.             place-content,故注释掉了gap*/
  47.         }
  49.         body .boxda .box {
  50.             border: 1px solid #888;
  51.             width: 80px;
  52.             height: 80px;
  53.             text-decoration: #999;
  54.         }
  56.         body .boxda .box:nth-of-type(9) {
  57.             /* span指定跨越数量之间必须带空格 */
  58.             grid-area: 3 / 3 / span 2 / span 1;
  59.             place-self: center end;
  60.         }
  61.     </style>
  62. </body>
  63. </html>
Correcting teacher：PHPzPHPz

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