Grid 网格布局

最新推荐文章于 2024-05-18 11:09:56 发布
最新推荐文章于 2024-05-18 11:09:56 发布
阅读量925 收藏 21
点赞数 27
分类专栏： 编程干货 文章标签： 前端 html5 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44402184/article/details/137862072
版权

请添加图片描述

👨🏻‍💻 热爱摄影的程序员
👨🏻‍🎨 喜欢编码的设计师
🧕🏻 擅长设计的剪辑师
🧑🏻‍🏫 一位高冷无情的全栈工程师
欢迎分享 / 收藏 / 赞 / 在看！

前端中的 Grid 布局是一种二维布局系统，它允许同时处理行和列，以便在网页上更好地组织和定位元素。与 Flexbox 布局不同，Grid
布局提供了更多的灵活性和控制能力，特别是在创建复杂的二维布局时。

  1. 创建 Grid 容器

要使用 Grid 布局，首先需要将一个元素设置为 Grid 容器。这可以通过设置该元素的 display 属性为 grid 或 inline-grid 来实现。

<body>
<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>

<style>
    .container {
        display: grid;
    }

    .item {
        height: 100px;
        background-color: #42B883;
        border-radius: 10px;
    }
</style>

在这里插入图片描述

  1. 定义 Grid 行和列

使用 grid-template-rows 和 grid-template-columns 属性来定义 Grid 的行和列。

<body>
<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
<style>
    .container {
        display: grid;
        grid-template-rows: 50px 100px;
        grid-template-columns: 1fr 1fr 1fr; /* 三列，每列宽度相等，1fr 表示剩余空间的比例 */
    }

    .item {
        height: 100px;
        background-color: #42B883;
        border-radius: 10px;
    }
</style>

在这里插入图片描述

<body>
<div class="container">
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
<style>
    .container {
        display: grid;
        grid-template-columns: 1fr; /* 独占一行 */
        grid-gap: 10px;
    }

    .item {
        height: 160px;
        background-color: #42B883;
        border-radius: 10px;
    }
</style>

在这里插入图片描述

<body>
<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
<style>
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* 两列 */
        grid-gap: 10px;
    }

    .item {
        height: 160px;
        background-color: #42B883;
        border-radius: 10px;
    }
</style>

在这里插入图片描述

<body>
<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
<style>
    .container {
        display: grid;
        grid-template-columns: 1fr 200px 1fr; /* 三列，中间列宽度固定 */
        grid-gap: 10px;
    }

    .item {
        height: 160px;
        background-color: #42B883;
        border-radius: 10px;
    }
</style>

在这里插入图片描述

  1. 放置 Grid 子项

Grid 子项（即 Grid 容器的直接子元素）会自动放置到 Grid 布局中。使用 grid-row 和 grid-column 属性来手动控制它们的位置。

<body>
<div class="container">
    <div class="item item1"></div>
    <div class="item item2"></div>
</div>
</body>
<style>
    .container {
        display: grid;
        grid-gap: 10px; /* 或 row-gap 和 column-gap */
    }

    .item {
        height: 100px;
        background-color: #42B883;
        border-radius: 10px;
    }

    .item1 {
        grid-row: 1;
        grid-column: 1;
    }

    .item2 {
        grid-row: 2;
        grid-column: 2 / span 2; /* 跨越两列 */
    }
</style>

在这里插入图片描述

<body>
<div class="container">
    <div class="item item1"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
<style>
    .container {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(5, 1fr);
    }

    .item {
        height: 160px;
        background-color: #42B883;
        border-radius: 10px;
    }

    .item1 {
        grid-row: 1/ 3;
        grid-column: 1/ 3;
        height: 100%;
        width: 100%;
    }
</style>

在这里插入图片描述

  1. 使用 Grid 线和网格区域

使用 Grid 线和网格区域来定义 Grid 的结构和子项的位置。

.container {  
   display: grid;  
   grid-template-areas:  
   "header header header"  
   "main main sidebar"  
   "footer footer footer";  
}

.header {  
   grid-area: header;  
}

.main {  
   grid-area: main;  
}

/* 以此类推... */
  1. 使用重复模式

对于重复的网格模式，使用 repeat() 函数来简化代码。

<body>
<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
<style>
    .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 50px);
    }

    .item {
        background-color: #42B883;
        border-radius: 10px;
    }
</style>

在这里插入图片描述

  1. 响应式 Grid 布局

Grid 布局也非常适合创建响应式布局。使用媒体查询来根据屏幕大小调整 Grid 的结构和尺寸。

@media (max-width: 600px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
    }
}
  1. 使用 Grid 间距和间隙

使用 grid-gap 或 row-gap 和 column-gap 属性来设置 Grid 行和列之间的间距。

<body>
<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
<style>
    .container {
        display: grid;
        grid-gap: 10px; /* 或 row-gap 和 column-gap */
    }

    .item {
        height: 100px;
        background-color: #42B883;
        border-radius: 10px;
    }
</style>

在这里插入图片描述

  1. 使用自动填充和自动适应

repeat(auto-fill, …) 和 minmax() 函数可以创建更具灵活性的 Grid 布局，特别是在处理不同屏幕尺寸和元素大小时。

<body>
<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
</body>
<style>
    .container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); /* 每列最小 360px，最大 1fr */
    }
    
    .grid-gap: 10px;
        padding: 10px;
    }

    .item {
        height: 160px;
        background-color: #42B883;
        border-radius: 10px;
    }
</style>

在这里插入图片描述

编程洪同学
关注
  • 27
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS Grid 网格布局全解析
09-24
主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css的grid网格布局
06-02
grid布局的所有属性
grid网格布局
m0_66722601的博客
03-13 436
grid网格布局
网格布局 Grid
青蛙king的博客
12-16 967
grid 布局将网页划分成一个个网格，可以任意组合不同的网格成“行和列”，可以定义这些网格的大小、位置、层次等关系，从而实现各种各样的布局。Grid 布局远比 Flex 布局强大。
Grid网格布局
Zhuzhu123qwwe的博客
07-19 557
网格布局常见的容器属性与项目属性
Grid网格布局实例
油墨香^-^的博客
07-12 1411
Grid 布局将容器划分成"行"和"列"，产生单元格也就是项目所在。容器就是设置了 或者 的元素。项目就是容器的顶层子元素。网格线就是项目边缘的线。容器属性必须设置在容器上。设置容器为行性质或内联性质的网格布局： 设置项目之间的间隔 整个内容区域在容器里面的水平/垂直位置 项目内容在单元格中的水平/垂直位置 repeat()/minmax()函数 和 auto-fill/auto/fr关键字 有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个
grid网格布局看这一篇就够了(接近3w字的总结)
jieyucx的博客
07-28 463
在当今现代设计中，如何实现有效的布局一直是一个关键问题。这就是为什么推出了“grid网格布局”作为一种新的布局方式。使用，您可以轻松地设置复杂的网格布局，而无需使用冗长的代码或框架。本文将探讨的概念、语法和实际应用，帮助您在设计页面时更加灵活和高效。的网格布局是一种用于创建网格样式布局的布局方式。布局将网格划分为多个行和列，在网格所占空间内放置元素，并确定它们在网格中的位置。使用布局可以实现更加复杂的布局，如媒体网格、交互式网格等。因为它具有灵活性和强大的功能，所以越来越多的网站使用布局来设计它们的页面。G
grid 网格布局
前端世界，乐趣无穷
08-24 1237
什么是网格？ 网格是一组相交的水平线和垂直线，它定义了网格的列和行。我们可以将网格元素放置在与这些行和列相关的位置上。CSS网格布局具有以下特点： 固定的位置和弹性的轨道的大小 你可以使用固定的轨道尺寸创建网格，比如使用像素单位。你也可以使用比如百分比或者专门为此目的创建的新单位 fr来创建有弹性尺寸的网格。 元素位置 你可以使用行号、行名或者标定一个网格区域来精确定位元素。网格同时还使用一种算法来控制未给出明确网格位置的元素。 创建额外的轨道来包含元素 可以使用网格布局定义一个显式网格，但是根
GRID网格布局
weixin_56674431的博客
04-23 578
grid网格布局
CSS-grid网格布局
DragonOfMoon的博客
11-02 203
网格布局详情
快速上手 Grid 网格布局
温情
07-16 1944
布局即网格布局，是一种新的CSS布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。有时单元格的大小是固定的，但是容器的大小不确定，想响应式的排满容器，就可以用auto-fill自动填充。布局是二维布局，将容器划分成了“行”和“列”，产生了一个个的网格，可以将网格元素放在行和列相关的位置上，从而达到了布局的目的。比如设置一个3X3的网格，但却有10个项目，所以会多出一个，这时候就可以用这属性设置多出的这一个项目。设置每一列的宽度，可以是具体的值，也可以是百分比。....
grid网格布局.html
07-05
简单介绍grid怎么使用的
CSS Grid 网格布局教程.docx
03-30
CSS Grid 网格布局教程.docx
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 668
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1108
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
s_sos0的博客
05-14 506
Unable to start ServletWebServerApplicationContext due to missing ServletWeb
解决 SpringBoot 的 Date、LocalDateTime 变成时间戳和数组的问题，创建自定义对象消息转换器
最新发布
shijialeya
05-18 380
解决 SpringBoot 的 Date、LocalDateTime 变成时间戳和数组的问题，创建自定义对象消息转换器进行数据格式化。
综合性练习-验证码
cj13106811623的博客
05-15 822
生成验证码param(参数): 无Return: 图片的内容校验验证码用户输入的验证码5. 代码编写生成验证码://图型验证码写出,可以写出到文件,也可以写出到流try {//返回到浏览器修改前端代码相对应的接口验证成功。
tkinter grid网格布局
08-12
Tkinter提供了一个名为`grid`的布局管理器，用于在GUI应用程序中创建网格布局。网格布局将窗口划分为行和列，并允许将小部件放置在指定的行和列中。 以下是一个基本的使用`grid`布局的示例代码： ```python import...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程洪同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值