Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS中Grid布局的属性认识
Blogger Information
Blog 18
fans 0
comment 0
visits 13300
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
CSS中Grid布局的属性认识
马晓宁
Original
518 people have browsed it

1.grid 布局

grid是 css 中的一种新的布局方式，对盒子和盒子内容的位置及尺寸有很强的控制能力。与 flex 不同，flex 着重于单轴，而 grid 适应于多轴。

2. 基本概念

设置 display: grid; 的元素称为容器，它的直接子元素称为项目，但注意子孙元素不是项目。

grid line：网格线，构成 grid 布局的结构，分为水平和竖直两种。

grid track：两条相邻网格线之间的空间，可以认为是一行或者一列。

grid cell：两条相邻行和相邻列之间分割线组成的空间，是 grid 布局中的一个单元。

grid area：四条网格线包裹的全部空间，任意数量的 grid cell 组成一个 grid area。

3. 容器属性

grid-template 系列
grid-template-columns
grid-template-rows
grid-template-areas
grid-gap 系列
grid-column-gap
grid-row-gap
place-items 系列
justify-items
align-items
place-content 系列
justify-content
align-content
grid 系列
grid-auto-columns
grid-auto-rows
grid-auto-flow

4.示例1

  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.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         /* 设置项目在网格中的填充方案, 默认行优先 */
  17.         grid-auto-flow: row;
  18.         /* grid-auto-flow: column; */
  19.         /* 显式地划分行与列, 三列二行 */
  20.         grid-template-columns: 100px 100px 100px;
  21.         grid-template-rows: 100px 100px;
  22.         /* 对于放置不下的项目,会隐式生成单元格 */
  23.         grid-auto-rows: auto;
  24.         grid-auto-rows: 150px;
  25.       }
  27.       .item {
  28.         background-color: lightblue;
  29.         font-size: 2rem;
  30.       }
  31.     </style>
  32.   </head>
  33.   <body>
  34.     <div class="container">
  35.       <div class="item item1">1</div>
  36.       <div class="item item2">2</div>
  37.       <div class="item item3">3</div>
  38.       <div class="item item4">4</div>
  39.       <div class="item item5">5</div>
  40.       <div class="item item6">6</div>
  41.       <div class="item item7">7</div>
  42.     </div>
  43.   </body>
  44. </html>

示例2

  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>设置单元格的数量与大小</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  17.         /* 固定值 */
  18.         grid-template-columns: 100px 100px 100px;
  19.         grid-template-rows: 100px 100px 100px;
  21.         /* 百分比 */
  22.         grid-template-columns: 20% 30% auto;
  23.         grid-template-rows: 100px auto 100px;
  25.         /* 比例 */
  26.         grid-template-columns: 1fr 2fr 2fr;
  27.         grid-template-rows: 1fr auto 2fr;
  29.         /* 重复设置 */
  30.         grid-template-columns: repeat(3, 100px);
  31.         grid-template-rows: repeat(3, 100px);
  33.         /* 按分组来设置: (50px-100px) */
  34.         /* 50px 100px 50px 100px */
  35.         grid-template-columns: repeat(2, 50px 100px);
  37.         /* 弹性 */
  38.         grid-template-columns: repeat(2, minmax(50px, 100px));
  39.         grid-template-rows: repeat(3, minmax(150px, 1fr));
  41.         /* 自动填充 */
  42.         grid-template-columns: repeat(auto-fill, 100px);
  43.         grid-template-rows: repeat(auto-fill, 100px);
  44.       }
  46.       .item {
  47.         background-color: lightblue;
  48.         font-size: 2rem;
  49.       }
  50.     </style>
  51.   </head>
  52.   <body>
  53.     <div class="container">
  54.       <div class="item item1">1</div>
  55.       <div class="item item2">2</div>
  56.       <div class="item item3">3</div>
  57.       <div class="item item4">4</div>
  58.       <div class="item item5">5</div>
  59.       <div class="item item6">6</div>
  60.       <div class="item item7">7</div>
  61.     </div>
  62.   </body>
  63. </html>

示例3

  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>使用默认的网格线来划分单元格</title>
  7.     <style>
  8.       .container {
  9.         /* 容器大小 */
  10.         width: 400px;
  11.         height: 400px;
  12.         background-color: wheat;
  14.         /* 创建grid容器 */
  15.         display: grid;
  16.         grid-template-columns: repeat(4, 1fr);
  17.         grid-template-rows: repeat(4, 1fr);
  18.       }
  20.       .item {
  21.         font-size: 2rem;
  22.       }
  23.       .item.item1 {
  24.         background-color: lightgreen;
  26.         grid-row-start: 1;
  27.         grid-row-end: 3;
  28.         grid-column-start: 1;
  29.         grid-column-end: 3;
  31.         /* grid-row-start: -1;
  32.         grid-row-end: -3;
  33.         grid-column-start: -1;
  34.         grid-column-end: -3; */
  36.         /* grid-row-start: 2;
  37.         grid-row-end: 4;
  38.         grid-column-start: 2;
  39.         grid-column-end: 4;
  41.         grid-row-start: 1;
  42.         grid-row-end: -1;
  43.         grid-column-start: 1;
  44.         grid-column-end: -1; */
  45.       }
  47.       /* 简写 */
  48.       .item.item2 {
  49.         background-color: lightpink;
  50.         /* grid-row-start: 1;
  51.         grid-row-end: 3;
  52.         grid-column-start: 3;
  53.         grid-column-end: 5; */
  55.         grid-row: 1 / 3;
  56.         grid-column: 3 / 5;
  57.       }
  59.       /* 使用偏移量来简化, 将第三个移动到左下角 */
  60.       .item.item3 {
  61.         background-color: yellow;
  62.         /*grid-row-start: 3;
  63.         grid-row-end: span 2;
  64.         grid-column-start: 1;
  65.         grid-column-end: span 2; */
  67.         grid-row: 3 / span 2;
  68.         grid-column: 1 / span 2;
  69.       }
  71.       .item.item4 {
  72.         background-color: lightgrey;
  73.         /* grid-row-start: 3; */
  74.         grid-row-end: span 2;
  75.         /* grid-column-start: 3; */
  76.         grid-column-end: span 2;
  77.       }
  78.     </style>
  79.   </head>
  80.   <body>
  81.     <div class="container">
  82.       <div class="item item1">1</div>
  83.       <div class="item item2">2</div>
  84.       <div class="item item3">3</div>
  85.       <div class="item item4">4</div>
  86.     </div>
  87.   </body>
  88. </html>

5.总结

Grid，真的布局神器。Css在引入Flex布局和Grid布局两个模块后，才真正有了布局的概念。Flex负责一维布局，Grid负责二维布局，两个布局都非常强大，但属性是真的很多。我是有点记不过来了。还是需要多多加强练习啊。

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