前端 CSS 经典：grid 栅格布局

前言：Grid 布局是将容器划分成"行"和"列"，产生单元格，然后将"项目"分配给划分好的单元格，因为有行和列，可以看作是二维布局。

一 术语

1. 容器

采用网格布局的区域，也就是外层盒子。

2. 项目

容器包裹的一级子元素，不包含二级及其以下的子元素。当容器使用了 grid 布局，项目的 float，display 等设置都将失效。

3. 单元格

通过容器设置行列属性，切割出来的单元格。单元格不等于项目，打个比方，容器相当于一个房子，单元格相当于在房子里划分出的一个个房间，项目相当于房间里的家具等东西。

二 容器属性

demo 默认样式，未设置 grid 属性。

<template>
  <div class="container">
    <span v-for="i in 10" :class="`item${i}`">{{ i }}</span>
  </div>
</template>

<style lang="scss" scoped>
  .container {
    background: green;
    span {
      border: 1px solid;
    }
  }
</style>

1. display

设置网格布局

1.1 display: grid

项目宽度填充整行

.container {
  background: green;
  display: grid;
  span {
    border: 1px solid;
  }
}

1.2 display: inline-grid

项目宽度根据内容撑宽。

.container {
  background: green;
  display: inline-grid;
  span {
    border: 1px solid;
  }
}

2. grid-template-columns

划分容器列和列宽，可以单独或混合使用：绝对值 px，百分比 %，比例 fr，关键字 auto，函数 minmax，函数 repeat，函数 fit-content

2.1 绝对值 px

例：设置 3 列，每列宽 300px

.container {
  background: green;
  display: grid;
  grid-template-columns: 300px 300px 300px;
  span {
    border: 1px solid;
  }
}

2.2 百分比 %

例：设置 3 列，每列宽 33.33 %

.container {
  background: green;
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  span {
    border: 1px solid;
  }
}

2.3 比例 fr

总宽度除以总的 fr，得到每份 fr 所占宽度，然后分给设置的列宽，例：设置 3 列，第 2 列是第 1 列的 1 倍，第 3 列是第 1 列的 3 倍

.container {
  background: green;
  display: grid;
  grid-template-columns: 1fr 2fr 3fr;
  span {
    border: 1px solid;
  }
}

2.4 关键字 auto

宽度自适应，例：设置 3 列，第 1 列 100px，第 3 列 100px，第 2 列宽度自适应

.container {
  background: green;
  display: grid;
  grid-template-columns: 100px auto 100px;
  span {
    border: 1px solid;
  }
}

2.5 函数 minmax

minmax(min, max)，用于产生一个长度范围，例：设置 3 列，第 2 列 自适应宽度在 100px 到 300px 之间，第 1 列和第 3 列宽度为 300px。

.container {
  background: green;
  display: grid;
  grid-template-columns: 300px minmax(100px, 300px) 300px;
  span {
    border: 1px solid;
  }
}

2.6 函数 repeat

repeat(n, content)，n 代表重复次数，可以是数字代表几次，可以 auto-fill 自动填充满，content 代表重复内容。例：设置 3 列，每列 1fr。

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  span {
    border: 1px solid;
  }
}

例：设置每列 100px，每行自动填充最多的 100px 列

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  span {
    border: 1px solid;
  }
}

2.7 函数 fit-content

fit-content(length)，当内容小于 length，以内容为准，如果大于 length 以 leng 为长度，例：设置 3 列，每列最大宽度 200px，当小于 200px，以内容撑开宽度。

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(3, fit-content(200px));
  span {
    border: 1px solid;
  }
}

3. grid-template-rows

划分容器行和行高，属性同 grid-template-columns 一致，比例 fr 略有不同。如果不设置项目高度，1fr 代表的高度就是项目高度，如果设置有项目设置了高度，那就以该项目的高度除以该项目所分的 fr 算出 1fr 的大小。例：设置列宽 200px，自动铺满列，不设置项目高度，第 1 行 2fr，第 2 行 2fr，第 3 行 3fr。

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: 1fr 2fr 3fr;
  span {
    border: 1px solid;
  }
}

例：设置列宽 200px，自动铺满列，设置项目 item5 高度 200 px，第 1 行 2fr，第 2 行 2fr，第 3 行 3fr。

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: 1fr 2fr 3fr;
  span {
    border: 1px solid;
  }
  .item5 {
    height: 200px;
  }
}

4. grid-template-areas

区域命名，区域命名形成区域一定要是矩形区域，无论是 L，凹，凸都是无效属性值。可以配合 grid-template-rows、grid-template-columns 使用。例：设置 3 列每列 100px，3 行每行 100px，通过区域命名实现如图布局。

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  grid-template-areas:
    "left top top"
    "left middle right"
    "bottom bottom right";
  span {
    border: 1px solid;
  }
  .item1 {
    grid-area: left;
  }
  .item2 {
    grid-area: top;
  }
  .item3 {
    grid-area: middle;
  }
  .item4 {
    grid-area: right;
  }
  .item5 {
    grid-area: bottom;
  }
}

5. grid-template

是 grid-template-columns、grid-template-rows 这 2 个属性的合并简写形式。

grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);

// 简写
grid-template: repeat(3, 100px) / repeat(3, 100px);

6. column-gap

列间距，支持数值和百分比。例：设置列间距为 20px。

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  column-gap: 20px;
  span {
    border: 1px solid;
  }
}

7. row-gap

行间距，支持数值和百分比。例：设置行间距 10px。

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  row-gap: 10px;
  span {
    border: 1px solid;
  }
}

8. grid-gap

行间距和列间距简写，grid-gap: 行间距，列间距，如果第二个值省略，默认两个值相等。例：设置行间距，列间距都为 20px。

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-gap: 20px;
  span {
    border: 1px solid;
  }
}

9. grid-auto-flow

定义栅格元素的排列规则：row、column、row dense、column dense。

9.1 row

默认水平顺序排列

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  grid-auto-flow: column;
  span {
    border: 1px solid;
  }
}

9.2 column

垂直顺序排序

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  grid-auto-flow: column;
  span {
    border: 1px solid;
  }
}

10. justify-items

单元格内容水平位置设置：stretch、start、end、center

10.1 stretch

默认单元格内容水平填充单元格

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-items: stretch;
  span {
    border: 1px solid;
  }
}

10.2 start

单元格内容水平靠右

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-items: start;
  span {
    border: 1px solid;
  }
}

10.3 end

单元格内容水平靠左

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-items: end;
  span {
    border: 1px solid;
  }
}

10.4 center

单元格内容水平居中

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-items: center;
  span {
    border: 1px solid;
  }
}

11. align-items

单元格内容垂直位置：stretch、start、end、center

11.1 stretch

单元格内容垂直填充

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  align-items: stretch;
  span {
    border: 1px solid;
  }
}

11.2 start

单元格内容垂直靠上

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  align-items: start;
  span {
    border: 1px solid;
  }
}

11.3 end

单元格内容垂直靠下

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  align-items: end;
  span {
    border: 1px solid;
  }
}

11.4 center

单元格内容垂直居中

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  align-items: center;
  span {
    border: 1px solid;
  }
}

12. place-items

是 align-items 属性和 justify-items 属性的合并简写形式。如果省略第二个值，则浏览器认为与第一个值相等。例：设置单元格内容垂直和水平居中

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  place-items: center;
  span {
    border: 1px solid;
  }
}

13. justify-content

容器内容水平位置：start、end、center、stretch、space-around、space-between、space-evenly

13.1 start

默认容器内容水平靠左

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-content: start;
  span {
    border: 1px solid;
  }
}

13.2 end

例：设置容器内容水平靠右

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-content: end;
  span {
    border: 1px solid;
  }
}

13.3 center

例：设置容器内容水平居中

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-content: center;
  span {
    border: 1px solid;
  }
}

13.4 space-around

例：设置容器内容水平平均分布，项目间距是项目距离容器边框的两倍

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-content: space-around;
  span {
    border: 1px solid;
  }
}

13.5 space-between

例：设置容器内容水平平均分布，靠近容器边框项目紧贴容器，其余水平项目平均间距

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-content: space-between;
  span {
    border: 1px solid;
  }
}

13.6 space-evenly

例：设置容器内容水平平均分布，项目间距和项目距离容器边框间距相等

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 200px);
  justify-content: space-evenly;
  span {
    border: 1px solid;
  }
}

14. align-content

容器内容垂直位置：start、end、center、stretch、space-around、space-between、space-evenly，同 justify-content 属性一致。一般需要给容器设置固定高度。align-content 属性才有效。例：设置容器内容垂直居中

.container {
  height: 500px;
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 100px);
  align-content: center;
  span {
    border: 1px solid;
  }
}

15. place-content

是 align-content 属性和 justify-content 属性的合并简写形式。如果省略第二个值，浏览器就会假定第二个值等于第一个值。例：设置容器内容水平居中，垂直居中。

.container {
  height: 500px;
  background: green;
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-template-rows: repeat(3, 100px);
  place-content: center;
  span {
    border: 1px solid;
  }
}

三 项目属性

1. grid-column-start、grid-column-end、grid-column、grid-row-start、grid-row-end、grid-row、grid-area

grid-column-start: number; 左边框垂直网格线

grid-column-end: number; 右边框垂直网格线

grid-column: grid-column-start / grid-column-end; 左、右边框垂直网格线简写

grid-row-start: number; 上边框垂直网格线

grid-row-end: number; 下边框垂直网格线

grid-row: grid-column-start / grid-column-end; 左、右边框垂直网格线简写

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end; 上、左、下、右边框垂直网格线简写

number 值默认从 1 开始依次递增。

例：设置一个 3 列每列宽 200px，3 行每行高 200px，让内容为 1 的项目居中。

.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 200px);
  span {
    border: 1px solid;
  }
  .item1 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    background: red;
  }
}

// grid-column、grid-row 简写
.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 200px);
  span {
    border: 1px solid;
  }
  .item1 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background: red;
  }
}

// grid-area 简写
.container {
  background: green;
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 200px);
  span {
    border: 1px solid;
  }
  .item1 {
    grid-area: 2 / 2 / 3 / 3;
    background: red;
  }
}

2. justify-self

单元格内容的水平位置，同 justify-items 但只作用于单个项目。赋值：start、end、center、stretch。

3. align-self

单元格内容的垂直位置，同 align-items 但只作用于单个项目。赋值：start、end、center、stretch。

4. place-self

justify-self 和 align-self 简写，同 place-items 但只作用于单个项目。只有一个值时，第二个值默认与第一个值相同。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/492730.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【机器学习之旅】概念启程、步骤前行、分类掌握与实践落地

【机器学习之旅】概念启程、步骤前行、分类掌握与实践落地

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;机器学习 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、交流进…
阅读更多...
六、保持长期高效的七个法则(二)Rules for Staying Productive Long-Term(2)

六、保持长期高效的七个法则(二)Rules for Staying Productive Long-Term(2)

Rule #5 - If your work changes, your system should too. 准则五&#xff1a;如果你的工作变了&#xff0c;你的系统也应该改变。 For some, work will be consistent enough to not need major changes.You simply stick to the same system and you’ll get the results y…
阅读更多...
高精密基准源 国产替代 REF191 ADR4520 ADR420 ADR430 ADR440 REF5020 MAX6126

高精密基准源 国产替代 REF191 ADR4520 ADR420 ADR430 ADR440 REF5020 MAX6126

高精密基准源 国产替代 REF191 ADR4520 ADR420 ADR430 ADR440 REF5020 MAX6126 ADR03 REF03 REF192 AD580 AD780 ADR441 ADR4525 ADR431 ADR421 REF5025ADR423 ADR433 ADR443 ADR4530 REF193 AD780 ADR06 REF5030ADR434 ADR444 ADR4540 REF198 REF5040ADR425 ADR435 ADR445 AD…
阅读更多...
成功推出全新生成式AI的四大原则

成功推出全新生成式AI的四大原则

生成式AI有望从根本上打开一扇新世界机遇的大门&#xff0c;以满足各行各业的客户需求。从提供个性化回复的对话式聊天机器人&#xff0c;到各种应用的代码&#xff0c;再到营销传播的目标内容&#xff0c;生成式AI正在彻底改变企业的运作方式。为竞相提供卓越的客户体验&#…
阅读更多...
分布式系统的发展史

分布式系统的发展史

目录 &#x1f433;今日良言&#xff1a;且视他人之疑目如盏盏鬼火&#xff0c;大胆地去走自己的夜路 &#x1f407;一、常见概念 &#x1f407;二、发展史 今日良言&#xff1a;且视他人之疑目如盏盏鬼火&#xff0c;大胆地去走自己的夜路 一、常见概念 在正式介绍分布式系…
阅读更多...
16、OpenFeign和Sentinel集成实现fallback服务降级

16、OpenFeign和Sentinel集成实现fallback服务降级

注&#xff1a;本篇文章主要参考周阳老师讲解的cloud进行整理的&#xff01; 1、需求说明 cloudalibaba-consumer-nacos-order83 通过OpenFeign调用 cloudalibaba-provider-payment9001 1、 83 通过OpenFeign调用 9001微服务&#xff0c;正常访问OK 2、 83 通过OpenFeign调用 …
阅读更多...
推特社交机器人分类

推特社交机器人分类

机器人有不同的种类。 cresci-17数据集中的三种不同的机器人类:传统垃圾机器人、社交垃圾机器人和假追随者。 传统的垃圾邮件机器人会生成大量推广产品的内容&#xff0c;并且可以通过频繁使用的形容词来检测; 社交垃圾邮件倾向于攻击或支持政治候选人&#xff0c;因此情绪是一…
阅读更多...
centos配置natapp 自动配置

centos配置natapp 自动配置

步骤 下载客户端 赋值权限 启动测试是否可用配置natapp.service 设置自动启动 natapp.service 配置的文件夹需要跟 natapp的路径一致 下载配置文件 centos 这里 我用的 natapp_autostart-master\natapp_autostart-master\systemd 文件夹下的 natapp.service 上传natapp到服…
阅读更多...
深入解析大语言模型显存占用：训练与推理

深入解析大语言模型显存占用：训练与推理

深入解析大语言模型显存占用&#xff1a;训练与推理 文章脉络 估算模型保存大小 估算模型在训练时占用显存的大小 全量参数训练 PEFT训练 估算模型在推理时占用显存的大小 总结 对于NLP领域的从业者和研究人员来说&#xff0c;有没有遇到过这样一个场景&#xff0c;你的…
阅读更多...
小白一次过软考高级（信息系统项目管理师）秘籍，请收藏！！！

小白一次过软考高级（信息系统项目管理师）秘籍，请收藏！！！

作为一位软考老司机&#xff0c;我觉得我还是有资格说一说的。 我的考试成绩&#xff1a; 高级软考考试基础信息&#xff1a; 考试科目&#xff1a;总共分为3科&#xff0c;综合知识、案例分析、论文 成绩&#xff1a;满分75分&#xff0c;45分及格&#xff0c;需同时通过3科…
阅读更多...
抽象类和接口（1）（抽象类部分）

抽象类和接口（1）（抽象类部分）

❤️❤️前言 hellohello~&#xff0c;大家好&#x1f495;&#x1f495;&#xff0c;这里是E绵绵呀✋✋ &#xff0c;如果觉得这篇文章还不错的话还请点赞❤️❤️收藏&#x1f49e; &#x1f49e; 关注&#x1f4a5;&#x1f4a5;&#xff0c;如果发现这篇文章有问题的话&…
阅读更多...
初步接触C++

初步接触C++

hello&#xff0c;各位小伙伴&#xff0c;本篇文章跟大家一起学习C&#xff0c;感谢大家对我上一篇的支持&#xff0c;如有什么问题&#xff0c;还请多多指教 &#xff01; 文章目录 初步区别C语言和C命名空间1.命名空间的定义2.命名空间的使用 C的输入输出缺省参数1.缺省参数…
阅读更多...
Python Flask-Mail实现邮件发送

Python Flask-Mail实现邮件发送

一、邮件发送的扩展 关于如何找到flask发送邮件的插件&#xff1f;&#xff0c;上一篇已经分享了如何找到第三方插件&#xff0c;也找到了插件flask-mail的使用文档&#xff0c;那我们就来实战吧 二、根据文档&#xff0c;总结发送邮件的流程 从文档中可以总结出发送邮件的步…
阅读更多...
【进程控制】谈谈进程终止的三种状态

【进程控制】谈谈进程终止的三种状态

文章目录 进程终止退出码信号信号术语 进程常见的退出方法exit函数与_exit函数的区别对比exit和_exit函数对于缓冲区的处理 进程终止 进程终止&#xff0c;也就是进程运行结束。结束有两种含义&#xff0c;一种是“正常”结束&#xff0c;带有结果&#xff0c;即代码运行完毕。…
阅读更多...
第十三届蓝桥杯省赛C++ A组 Java A组/研究生组《推导部分和》（C++）

第十三届蓝桥杯省赛C++ A组 Java A组/研究生组《推导部分和》（C++）

【题目描述】 【输入格式】 【输出格式】 【数据范围】 【输入样例】 5 3 3 1 5 15 4 5 9 2 3 5 1 5 1 3 1 2 【输出样例】 15 6 UNKNOWN 【思路】 题解来源&#xff1a;AcWing 4651. $\Huge\color{gold}{推导部分和}$ - AcWing 【代码】 #include<bits/stdc.h> #define…
阅读更多...
使用itext-core生成PDF

使用itext-core生成PDF

1、添加引用依赖包 <dependency><groupId>com.itextpdf</groupId><artifactId>itext-core</artifactId><version>8.0.3</version><type>pom</type></dependency> 2、上代码 package com.student.demo.pdf;impor…
阅读更多...
C# 登录界面代码

C# 登录界面代码

背景 MVVM 是一种软件架构模式&#xff0c;用于创建用户界面。它将用户界面&#xff08;View&#xff09;、业务逻辑&#xff08;ViewModel&#xff09;和数据模型&#xff08;Model&#xff09;分离开来&#xff0c;以提高代码的可维护性和可测试性。 MainWindow 类是 View&a…
阅读更多...
红胖子创业第三年总结：保守稳定客户，技术业务认可，口碑业务增长，国内创业真相，减少外协占比，投入研发产品，寻求资本渠道，享受快乐自由

红胖子创业第三年总结：保守稳定客户，技术业务认可，口碑业务增长，国内创业真相，减少外协占比，投入研发产品，寻求资本渠道，享受快乐自由

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/137067698 各位读者&#xff0c;知识无穷而人力有穷&#xff0c;要么改需求&#xff0c;要么找专业人士&#xff0c;要么自己研究 红胖子网络科技博…
阅读更多...
计算机网络01-20

计算机网络01-20

计算机网络01-20 以下是本文参考的资料 欢迎大家查收原版 本版本仅作个人笔记使用1、OSI 的七层模型分别是&#xff1f;各自的功能是什么&#xff1f;2、说一下一次完整的HTTP请求过程包括哪些内容&#xff1f;孤单小弟 —— HTTP真实地址查询 —— DNS指南好帮手 —— 协议栈可…
阅读更多...
Java八股文（Elasticsearch）

Java八股文（Elasticsearch）

Java八股文のElasticsearch Elasticsearch Elasticsearch 什么是Elasticsearch&#xff1f; Elasticsearch是一个开源的分布式搜索和分析引擎&#xff0c;用于实时存储、搜索和分析大规模数据集。 Elasticsearch的主要特点是什么&#xff1f; Elasticsearch的主要特点包括&…
阅读更多...
最新文章

Copyright @ 2022~2023