Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS - grid 布局图解
Blogger Information
Blog 47
fans 1
comment 0
visits 53065
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
1165 people have browsed it

CSS grid 布局

1. 创建一个 grid 布局

1.1 display:grid 声明这是一个 grid 布局

1.2 设置单元格数量及尺寸

  • grid-template-rows: ...

    设置 grid 布局的行数及行高

  • grid-template-columns:...

    设置列数与列宽

    以行为例

1.2.1 三行就写三个行高 grid-template-rows:50px 50px 50px ; 有几行就写几个

1.2.2 当然这个地方可以使用循环数组去写grid-template-rows:repeat(3,50px)

  • repeat 里的第一个值为循环次数，跟后面的值用逗号的分离。

  • repeat 可以循环多个值repeat(2, 50px 100px)

    这样生成四个表格 第一个 50px 第二个 100px 第三个 50px 第四个 100px

1.2.3 用百分比设置

比如当前网格容器宽高为 400px

  • grid-template-rows: 20% 30% 50%

    即 当前行高第一行为容器高度的 20% （400*0.2=80px）

1.2.4 用比例设置

  • grid-template-rows:1fr 2fr 3fr

    行高为 1:2:3 将容器总高度分为六份 第一行占一份 第二行占两份
    即 400/6*1 为第一行高度

1.2.5 使用 auto

  • grid-template-rows:50px auto 50px;

让浏览器自己去计算值 第一行第三行给出固定值，第二行设置为当前容器剩余高度

1.2.6 弹性尺寸

  • grid-template-rows:repeat(2,minmiax(50px , 100px))

    行高最大为 100px 最小为 50px

1.2.7 自动填充

  • grid-template-rows:repeat(auto-fill,100)

    高度设置 100，然后按照从左到右从上到下的方式填充满当前容器

1.3 grid-auto-flow: 设置 grid 布局的排列方式

  • grid-auto-flow:row;水平排列
  • grid-auto-flow:column;垂直排列

1.4 创建一个 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>Document</title>
  7.     <style>
  8.       .container {
  9.         width: 400px;
  10.         height: 400px;
  11.         background-color: wheat;
  12.         /*声明这是一个grid布局*/
  13.         display: grid;
  14.         /*设置布局排列方式为水平排列*/
  15.         grid-auto-flow: row;
  16.         /*创建一个四行四列的grid布局*/
  17.         /*四行 每行100px*/
  18.         grid-template-rows: repeat(4, 100px);
  19.         /*四列 每列100px*/
  20.         grid-template-columns: repeat(4, 100px);
  21.       }
  22.       .item {
  23.         background-color: lightgreen;
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <div class="container">
  29.       <div class="item item1">1</div>
  30.       <div class="item item2">2</div>
  31.       <div class="item item3">3</div>
  32.       <div class="item item4">4</div>
  33.       <div class="item item5">5</div>
  34.       <div class="item item6">6</div>
  35.       <div class="item item7">7</div>
  36.     </div>
  37.   </body>
  38. </html>

效果图

QQ截图20200414145753.png

2. 将项目填充到单元格中

2.1 使用默认网格线划分单元格

  • 默认从左上角开始，从左到右，从上到下，依次从 1 开始编号

  • 如果从右下角开始，从右到左，从下到上，依次从-1 开始编号

  • 根据网格线将项目放到网格线形成的封闭矩形区域中

  1. .item.item1 {
  2.   /* 将项目一填充到指定单元格中 */
  3.   background-color: lightsalmon;
  4.   /* 起始行线 */
  5.   grid-row-start: 2;
  6.   /* 结束行线 */
  7.   grid-row-end: 4;
  8.   /* 起始列线 */
  9.   grid-column-start: 2;
  10.   /* 结束列线 */
  11.   grid-column-end: 4;
  12. }

效果图

QQ截图20200414151230.png

2.2 使用命名网格线

  • 使用语义化的名称替代容器自动生成的数字网格线编号
  • 同一条网格线可以有多个别名
  1. .container {
  2.   width: 400px;
  3.   height: 400px;
  4.   background-color: wheat;
  5.   display: grid;
  6.   grid-auto-flow: row;
  7.   /* 命名网格线 */
  8.   grid-template-rows: [r1-start]100px[r1-end r2-start]100px[r2-end r3-start]100px[r3-end r4-start]100px[r4-end];
  9.   grid-template-columns: [c1-start]100px[c1-end c2-start]100px[c2-end c3-start]100px[c3-end c4-start]100px[c4-end];
  10. }
  11. .item {
  12.   background-color: lightgreen;
  13. }
  14. /* 设置开始结束点 */
  15. .item.item1 {
  16.   background-color: violet;
  17.   grid-row-start: r2-start;
  18.   grid-row-end: r4-start;
  19.   grid-column-start: c3-start;
  20.   grid-column-end: c4-start;
  21. }

效果图

QQ截图20200414154831.png

此方法不常用，知道就好

3. 网格区域

  • 一个以上的单元格形成的矩形块称为网格区域
    • 网格区域一定是一个矩形块

3.1 默认网格区域

设置项目属性grid-area
语法grid-area:row-start/column-start/row-end/column-end;

行开始/列开始/行结束/列结束

当项目从当前位置开始时 可以简化掉 行开始 列开始

  1. /* 设置网格区域 */
  2. .item.item1 {
  3.   background-color: violet;
  4.   grid-area: span 2 / span 2;
  5. }

效果图

QQ截图20200414161259.png

3.2 命名网格区域

  • 可以为每个网格区域设置一个语义化的名称

  • 具有名称的网格区域成为命名区域

  • 名称相同的网格区域会合并，形成更大的区域空间

  • 项目设置区域名称后，会自动填充到对应的命名区域中

  1. .container {
  2.   width: 400px;
  3.   height: 400px;
  4.   background-color: wheat;
  5.   display: grid;
  6.   grid-auto-flow: row;
  7.   grid-template-rows: 40px 1fr 40px;
  8.   grid-template-columns: 80px 1fr 80px;
  9.   /* 设置命名网格区域，相同名称的会合并 */
  10.   grid-template-areas: "header header header" "left main right" "footer footer footer";
  11. }
  12. .item {
  13.   background-color: lightgreen;
  14. }
  15. /* 命名网格区域 */
  16. .item.item1 {
  17.   background-color: violet;
  18.   grid-area: header;
  19. }
  20. .item.item2 {
  21.   background-color: wheat;
  22.   grid-area: left;
  23. }
  24. .item.item3 {
  25.   background-color: lavender;
  26.   grid-area: main;
  27. }
  28. .item.item4 {
  29.   background-color: lawngreen;
  30.   grid-area: right;
  31. }
  32. .item.item5 {
  33.   background-color: lightcyan;
  34.   grid-area: footer;
  35. }

效果图

QQ截图20200414163352.png

3.2.1 网格区域占位符

  • 当项目默认已经填充到正确区域中，无需设置时可使用”.” 作为占位符
  1. .container {
  2.   width: 400px;
  3.   height: 400px;
  4.   background-color: wheat;
  5.   display: grid;
  6.   grid-auto-flow: row;
  7.   grid-template-rows: 40px 1fr 40px;
  8.   grid-template-columns: 80px 1fr 80px;
  9.   /* 设置命名网格区域，相同名称的会合并 */
  10.   grid-template-areas: "header header header" ". . ." "footer footer footer";
  11. }
  12. .item {
  13.   background-color: lightgreen;
  14. }
  15. /* 命名网格区域 */
  16. .item.item1 {
  17.   background-color: violet;
  18.   grid-area: header;
  19. }
  20. .item.item2 {
  21.   background-color: wheat;
  22.   /* grid-area: left; */
  23. }
  24. .item.item3 {
  25.   background-color: lavender;
  26.   /* grid-area: main; */
  27. }
  28. .item.item4 {
  29.   background-color: lawngreen;
  30.   /* grid-area: right; */
  31. }
  32. .item.item5 {
  33.   background-color: lightcyan;
  34.   grid-area: footer;
  35. }

效果与上面相同

3.3 设置单元格在容器中多个对齐方式

  • justify-content: 设置所有项目在容器中水平方向的对齐方式
  • align-content: 设置所有项目在容器中垂直方向的对齐方式
  • place-content: 上面二个属性的简写, place-content: 垂直对齐方式 水平对齐方式
    • 当两个值相同时可以只写一个
属性值 描述
start 起始线对齐
end 终止线对齐
center 中线对齐
space-around 分散对齐
space-between 两端对齐
space-evenly 平均对齐 
  1. .container {
  2.   width: 400px;
  3.   height: 400px;
  4.   background-color: wheat;
  5.   display: grid;
  6.   grid-auto-flow: row;
  7.   grid-template-rows: repeat(3, 100px);
  8.   grid-template-columns: repeat(3, 100px);
  9.   /* justify-content: space-evenly;
  10.         align-content: space-evenly; */
  11.   /* 当两个值相同时 只写一个 */
  12.   place-content: space-evenly;
  13. }

效果图

QQ截图20200414170628.png

3.4 设置所有项目在网格区域中的对齐方式

  • justify-items: 设置所有项目在单元格/网格区域中水平方向的对齐方式
  • align-items: 设置所有项目在单元格/网格区域中垂直方向的对齐方式
  • place-items: 上面二个属性的简写, place-items: 垂直对齐方式 水平对齐方式
    • 当两个值相同时可以只写一个
属性值 描述
start 起始线
end 终止线
center 中线
stretch 默认值 拉伸 
  1. .container {
  2.   width: 400px;
  3.   height: 400px;
  4.   background-color: wheat;
  5.   display: grid;
  6.   grid-auto-flow: row;
  7.   grid-template-rows: repeat(3, 100px);
  8.   grid-template-columns: repeat(3, 100px);
  10.   /* justify-items: center; */
  11.   /* align-items: center; */
  13.   /* 两个值相同只写一个 */
  14.   place-items: center;
  15. }
  16. .item {
  17.   background-color: lightgreen;
  18.   /* 项目给个宽高 */
  19.   height: 50px;
  20.   width: 50px;
  21. }

3.5 设置某个项目在单元格中的对齐方式

  • justify-self: 设置某个项目在单元格/网格区域中水平方向的对齐方式
  • align-self: 设置某个项目在单元格/网格区域中垂直方向的对齐方式
  • place-self: 上面二个属性的简写, place-self: 垂直对齐方式 水平对齐方式
  1. .item.item5 {
  2.   place-self: start;
  3. }

效果图

QQ截图20200414172549.png

3.6 设置容器中行与列之间的间距/间隙

  • column-gap: 列间距
  • row-gap: 行间距
  • gap: 行间距 列间距: 简写
  • gap: 值: 行与列相等,可只写一个值
  1. .container {
  2.   width: 400px;
  3.   height: 400px;
  4.   background-color: wheat;
  5.   display: grid;
  6.   grid-auto-flow: row;
  7.   grid-template-rows: repeat(3, 100px);
  8.   grid-template-columns: repeat(3, 100px);
  9.   /* 设置行列间距 */
  10.   gap: 10px;
  11. }

效果图

QQ截图20200414173024.png

4.总结

grid属性跟flex属性很像，相当于 flex 的扩展，flex 一维，grid 二维。理解了 flex 后，grid 并不难理解。
重点在于多练，多敲几遍，所谓‘书读百遍，其意自见’。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：flex,grid看起来像, 其实完全是二种思维方式, 掌握了flex, 也不一定能完全掌握grid, 多写多用才能掌握
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