search

博客列表 >CSS - grid 布局图解

CSS - grid 布局图解

晴天
晴天原创
2020年04月14日 17:44:131166浏览

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 并不难理解。
重点在于多练，多敲几遍，所谓‘书读百遍，其意自见’。

上一条：PHP解密-zym加密 带乱码调试过程下一条：html基础知识学习利用grid网格布局简短代码实现圣杯布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多