网格布局的重要内容

最新推荐文章于 2024-10-10 11:15:29 发布

于楚凡

最新推荐文章于 2024-10-10 11:15:29 发布

阅读量164

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/Ycf1106/article/details/125944221

版权

本文详细介绍了CSS Grid布局，包括容器和项目的概念，如何定义行和列，使用grid-template-columns和grid-template-rows，以及百分比、auto、fr、minmax等单位的应用。还讲解了grid-gap、place-items、justify-content和align-content等属性用于控制间距和对齐，以及如何通过grid-template-areas指定区域和合并单元格。

摘要由CSDN通过智能技术生成

grid布局（网格布局）
可以将网页分为网格，然后利用这些网格组合出各种的布局
1、容器和项目

行列单元格网格线

容器的几个重要属性：
1、display
值： grid 块级 inline-grid 行内开启网格布局
2、定义行和列
grid-template-columns:指定列的宽度
grid-template-rows：行的高度

值得设置方式：
1、grid-template-rows: 200px 200px 200px;
grid-template-columns: 200px 200px 200px;
2、百分数
3、auto 浏览器自己决定
grid-template-rows: 10% auto 60%px;
grid-template-columns: 200px 200px 200px;
4、repeat（）接收两个参数第一次是重复的次数第二个是重复的值