CSS Grid网格布局

一、前言

二、Grid布局

1、基本介绍

2、核心概念

（1）网格容器

（2）网格元素

（3）网格列

（4）网格行

（5）网格间距

（6）网格线

三、Grid布局常用属性

1、网格容器常用属性

（1）属性说明

【 grid-template-columns属性 】

【 grid-template-rows属性 】

【 grid-column-gap属性 】

【 grid-row-gap属性 】

【 grid-gap属性 】

（2）使用实例

2、网格元素常用属性

（1）属性说明

【grid-column-start属性】

【grid-column-end属性】

【grid-column属性】

【grid-row-start属性】

【grid-row-end属性】

【grid-row属性】

（2）使用实例

3、fr单位

4、grid布局优势

三、Grid布局示例

1、布局效果

2、完整代码

四、实现过程

1、添加元素

2、划分网格行列

3、找出网格线

4、定位网格元素

四、总结

一、前言

下面这些布局效果应该用什么方式实现呢？

布局1

布局2

 

 布局3

布局4

 

类似这样的页面效果可能会有多种实现的方法，但更推荐使用Grid网格布局实现；

二、Grid布局

1、基本介绍

  • 网格是一组相交的水平线和垂直线，形成了它的行和列；
  • CSS基于网格，提供了一套带有行和列的网格布局系统；
  • 无需使用浮动和定位也能完成一个整齐漂亮的网页布局；
  • Grid布局由一个父元素，及一个或多个子元素组成；

2、核心概念

（1）网格容器

将元素的display属性设置为grid或者inline-grid，变成了一个网格容器；

类似于表格，在网格容器内，有多行多列网格元素；

（2）网格元素

网格容器的所有直系子元素——下图中的9个绿色盒子； 

（3）网格列

网格元素的垂直线方向称为列（Column）；

（4）网格行

网格元素的水平线方向称为行（Row）。

（5）网格间距

两个网格单元之间的网格横向间距（Row Gap）或网格纵向间距（Column Gap）。

（6）网格线

列与列，行与行之间的交接处就是网格线（Line）。

三、Grid布局常用属性

1、网格容器常用属性

序号属性描述
1grid-template-columns指定网格布局中列的大小，以及列的数量；
2grid-template-rows指定网格布局中行的大小，以及行的数量；
3grid-column-gap指定网格元素的列间距；
4grid-row-gap指定网格元素的行间距；
5

grid-gap

grid-row-gap，grid-column-gap的缩写形式；

（1）属性说明

【 grid-template-columns属性 】

该属性用来定义网格中的列，指定列的数量和列的宽度；

.grid-container{
    grid-template-columns : value1,value2, ...;
}
  • value的取值可以使用任何长度单位进行定义；
  • value的个数决定列的个数；
  • value的大小决定列的宽度；
【 grid-template-rows属性 】

该属性用来定义网格中的行，指定行的数量和行的高度；

.grid-container{
    grid-template-rows : value1,value2, ...;
}
  • value的取值可以使用任何长度单位进行定义；
  • value的个数决定行的个数；
  • value的大小决定行的高度；
【 grid-column-gap属性 】

该属性用来指定网格元素的列间距；

.grid-container{
    grid-column-gap : value;
}
  • value的取值可以使用任何长度单位进行定义；
  • value的大小决定列间距的大小；
【 grid-row-gap属性 】

该属性用来指定网格元素的行间距；

.grid-container{
    grid-row-gap : value;
}
  • value的取值可以使用任何长度单位进行定义；
  • value的大小决定行间距的大小；
【 grid-gap属性 】

该属性为grid-row-gap属性与grid-column-gap属性的缩写形式，可以同时定义网格元素的行间距与列间距；

.grid-container{
     grid-gap : value1 [, value2];
}
  • value的取值可以使用任何长度单位进行定义；
  • 只有一个value时，表示列间距与行间距都使用该值；
  • 有两个value时，第一个表示行间距，第二个表示列间距；

（2）使用实例

...
<style>
    .grid-container {
        /* 添加网格容器：将该元素设置为网格容器 */
        display: grid;
        /* 定义网格列：三个相等宽度的列 */
        grid-template-columns: 1fr 1fr 1fr; 
        /* 定义网格行：第一行高度为100px 第二行高度为160px*/
        grid-template-rows: 100px 160px;
        /* 定义网格间距：行间距和列间距均为20px */
        grid-gap: 20px;

        width: 600px;
        border: 1px solid #ccc;
        border-radius: 6px;
        margin: 100px auto;
        padding: 20px;
    }

    .grid-item {
        background-color: yellowgreen;
    }
</style>
...

<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
    </div>
</body>
...

2、网格元素常用属性

注意：以下属性值中value的取值均为数值型，代表的是网格线的行或列数；

序号属性描述
1grid-column-start指定网格元素列的开始位置；
2grid-column-end指定网格元素列的结束位置；
3

grid-column 

grid-column-start 和 grid-column-end 的缩写形式；
4grid-row-start指定网格元素行的开始位置；
5grid-row-end指定网格元素行的结束位置；
6grid-rowgrid-row-start 和  grid-row-end 的缩写形式；

（1）属性说明

【grid-column-start属性】

该属性用来指定某一网格元素列的开始位置；

.grid-item{
     grid-column-start : value;
}
  • 表示该网格元素【.grid-item】在第value列开始；
【grid-column-end属性】

该属性用来指定某一网格元素列的结束位置；

.grid-item{
     grid-column-end : value;
}
  • 表示该网格元素【.grid-item】在第value列结束；
【grid-column属性】

该属性用来指定某一网格元素列的开始位置和结束位置；

.grid-item{
     grid-column : value1 / value2;
}
  • 表示该网格元素【.grid-item】在第value1列开始，value2列结束；
  • value2的取值可以是  span x，表示跨x列合并；
【grid-row-start属性】

该属性用来指定某一网格元素行的开始位置；

.grid-item{
     grid-row-start : 1;
}
  • 表示该网格元素【.grid-item】在第1行开始；
【grid-row-end属性】

该属性用来指定某一网格元素行的结束位置；

.grid-item{
     grid-row-end : 3;
}
  • 表示该网格元素【.grid-item】在第3行结束；
【grid-row属性】

该属性用来指定某一网格元素行的开始位置和结束位置；

.grid-item{
     grid-row : value1 / value2;
}
  • 表示该网格元素【.grid-item】在第value1行开始，value2行结束；
  • value2的取值可以是  span x，表示跨x行合并；

（2）使用实例

...
<style>
    .grid-container {
        /* 添加网格容器：将该元素设置为网格容器 */
        display: grid;
        /* 定义网格列：三个相等宽度的列 */
        grid-template-columns: 1fr 1fr 1fr; 
        /* 定义网格行：两行 高度均为160px */
        grid-template-rows: 160px 160px;
        /* 定义网格间距：行间距和列间距均为20px */
        grid-gap: 20px;

        width: 600px;
        border: 1px solid #ccc;
        border-radius: 6px;
        margin: 100px auto;
        padding: 20px;
    }

    .grid-item {
        background-color: yellowgreen;
    }

    .item1{
        /* 设置第一个网格元素 从第1行开始，跨2行合并 */
        grid-row: 1 / span 2;
    }

    .item4{
        /* 设置第四个网格元素 从第2列开始，到第4列结束 */
        grid-column: 2 / 4;
    }
</style>
...

<body>
    <div class="grid-container">
        <div class="grid-item item1">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item item4">4</div>
    </div>
</body>

3、fr单位

  • 网格行、列可以使用任何长度单位进行定义；
  • 网格布局中引入了新的fr单位，可以更灵活的创建网格行或列；
  • 使用以下代码可以创建三个等宽的网格列；
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width：600px;
}

4、grid布局优势

  • 高效率：使用Grid布局的页面元素更加简单有序，使得开发和维护工作更便捷，更高效；
  • 灵活性：使用Grid布局可以定制不同的网页布局，灵活性高；
  • 响应式：使用Grid布局的页面支持响应式，能够自适应不同设备和屏幕尺寸；
  • 语义化：Grid布局中都是语义化属性，容易理解和维护；
  • 多支持：大多数主流浏览器都支持Grid布局，包括Chrome、Firefox、Safari 和 Edge；

三、Grid布局示例

1、布局效果

2、完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .grid-container {
            /* 添加网格容器：将该元素设置为网格容器 */
            display: grid;
            /* 定义网格列：三列等宽 */
            grid-template-columns: 1fr 1fr 1fr;
            /* 定义网格行：三行高度均为160px */
            grid-template-rows: 160px 160px 160px;
            /* 定义网格间距：行间距和列间距均为10px */
            grid-gap: 10px;

            width: 600px;
            /* height: 400px; */
            border: 1px solid #ccc;
            border-radius: 6px;
            margin: 80px auto;
            padding: 10px;
        }

        .grid-item {
            background-color: yellowgreen;
        }
        .item6{
            /* 设置该元素从第2列开始，到第4列结束 */
            grid-column: 2 / 4;
            /* 设置该元素从第2行开始，合并两行 */
            grid-row: 2 / span 2;
        }
    </style>
</head>

<body>
    <!-- 网格容器 -->
    <div class="grid-container">
        <!-- 网格元素 -->
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item item6">6</div>
    </div>
</body>

</html>

四、实现过程

1、添加元素

先准备一个盒子，作为grid布局的网格容器，并在其中添加6个网格元素，如下图所示，

  • 给.grid-container元素添加属性【 display : grid 】，使其成为网格容器；
  • 并在其中添加6个.grid-item元素，即为网格元素；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .grid-container{
            /* 添加网格容器：将该元素设置为网格容器 */
            display: grid;

            width: 600px;
            height: 400px;
            border: 1px solid #ccc;
            border-radius: 6px;
            margin: 20px auto;
            padding: 10px;
        }
    </style>
</head>

<body>
    <!-- 网格容器 -->
    <div class="grid-container">
        <!-- 网格元素 -->
         <div class="grid-item">1</div>
         <div class="grid-item">2</div>
         <div class="grid-item">3</div>
         <div class="grid-item">4</div>
         <div class="grid-item">5</div>
         <div class="grid-item">6</div>
    </div>
</body>
</html>

暂时先给了一个网格容器一个高度，后面使用网格元素撑开时，就不再使用这个高度了；

2、划分网格行列

根据布局的效果图，知道该布局由【三行三列】组成的，只不过最后一个元素独占两行两列；

先将其划分成三行三列；

...
grid-template-columns: 1fr 1fr 1fr ;
grid-template-rows: 160px 160px 160px ;
grid-gap: 10px;
...
  • grid-template-columns：该属性用来定义网格中的三列；
  • grid-template-rows：该属性用来定义网格中的三行；
  • grid-gap：该属性用来定义网格单元的间距；

3、找出网格线

该网格布局中有三行三列网格区域，所以纵向有四条网格线，横向也有四条网格线，依次进行编号，如下图所示：

  

4、定位网格元素

给需要单独定位的网格元素添加样式：

  • 第6个网格元素是从第2列开始，到第4列结束；第2行开始，到第4行结束；
...
.item6{
    /* 设置该元素从第2列开始，到第4列结束 */
    grid-column: 2 / 4;
    /* 设置该元素从第2行开始，合并两行 */
    grid-row: 2 / span 2;
}
...

四、总结

个人觉得，使用Grid网格布局时，一般可以采用以下四个步骤：

  • 1. 添加：添加网格容器和网格元素；
  • 2. 划分：确定好效果图的行和列，进行网格单元划分；
  • 3. 找线：找出所有的网格线，进行编号；
  • 4. 定位：根据所找的网格线编号，对需要特殊处理的网格单元重新定位即可；

======================================================================

每天进步一点点，快来试试这个有趣的布局吧！

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

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

相关文章

C语言 | Leetcode C++题解之第199题二叉树的右视图

C语言 | Leetcode C++题解之第199题二叉树的右视图

题目&#xff1a; 题解&#xff1a; #define MAX_NODE_NUM 100 int* rightSideView(struct TreeNode* root, int* returnSize){if (root NULL) {*returnSize 0;return NULL;}int *res (int *)malloc(sizeof(int) * MAX_NODE_NUM);int cnt 0;struct TreeNode **record (st…
阅读更多...
如何使用ossutil工具迁移本地文件到oss（最快速迁移方法）

如何使用ossutil工具迁移本地文件到oss（最快速迁移方法）

1&#xff1a;下载ossutil工具&#xff0c;https://help.aliyun.com/zh/oss/developer-reference/install-ossutil&#xff08;注&#xff1a;根据不同的版本去下载&#xff09; 2&#xff1a;解压ossutil工具&#xff0c;并双击运行ossutil.bat文件。 3&#xff1a;输入配置命…
阅读更多...
前端新手小白的第一个AI全栈项目---AI聊天室

前端新手小白的第一个AI全栈项目---AI聊天室

前言 ok&#xff0c;大家好。- ̗̀(๑ᵔ⌔ᵔ๑)最近也是想做自己的第一个前后端分离的项目&#xff0c;刚好最近学了一点AI接口的实现。想着用接口做一个自己的ai聊天室并且尝试一下全栈式开发。中间真的解决了很多问题&#xff0c;也是成功之后也是想要将实现过程分享一下&a…
阅读更多...
可持续性是 Elastic: 进步与新机遇的一年

可持续性是 Elastic: 进步与新机遇的一年

作者&#xff1a;来自 Elastic Keith Littlejohns 我们最新的可持续发展报告&#xff08;Sustainability Report&#xff09;总结了 Elastic 又一个令人兴奋的进步年&#xff0c;我们的项目继续揭示新的机遇。过去的一年对于我们与主要利益相关者群体合作以更好地了解他们的目标…
阅读更多...
Linux-笔记 OverlayFS文件系统小应用 恢复功能

Linux-笔记 OverlayFS文件系统小应用 恢复功能

前言 通过另一章节 OverlayFS文件系统入门 中已经大致了解了原理&#xff0c;这里来实现一个小应用。通过前面介绍我们已经知道lowerdir是只读层&#xff0c;upperdir是可读写层&#xff0c;merged是合并层&#xff08;挂载点&#xff09;&#xff0c;那么我们可以利用这个机…
阅读更多...
火车头采集器Discuz采集发布模块插件

火车头采集器Discuz采集发布模块插件

火车头采集器怎么采集发布数据到Discuz系统的论坛帖子或门户文章&#xff1f; 可按照以下步骤配置&#xff1a; 1. 火车头采集器Discuz采集发布插件下载安装&#xff1a; 火车头采集器Discuz发布模块插件下载地址-CSDN 2. 在火车头采集器工具导入Discuz采集发布模块插件&am…
阅读更多...
ComfyUI如何使用Face Detailer和ComfyI2I插件进行修脸

ComfyUI如何使用Face Detailer和ComfyI2I插件进行修脸

一.插件ComfyI2I使用 1.ComfyUI中调用Mask Ops 2.创建蒙版插件BBOX Detector(combined) 3.创建UltralyticsDetectorProvider 里面包含多个模型其中bbox/face_yolov8m.pt是针对脸部修复 4.组合后测试脸部蒙版识别是否正常 5.测试正常后调出Inpaint Segments&#xff0c;放大…
阅读更多...
线上民族传统服饰商城

线上民族传统服饰商城

摘 要 随着互联网的不断发展和普及&#xff0c;电子商务成为了人们生活中不可或缺的一部分。传统的线下购物方式逐渐被线上购物所取代&#xff0c;人们越来越习惯在互联网上购物。而民族传统服饰作为我国丰富多样的民族文化的重要组成部分&#xff0c;具有独特的艺术价值和商业…
阅读更多...
PostMan动态设置全局变量

PostMan动态设置全局变量

1. 前言 在开发过程中调试接口&#xff0c;一般都会使用PostMan。 其中有几个变量可能是好几个接口共用的&#xff0c;就会出现频繁手动复制(ctrlc)、粘贴(ctrlv)的情况。 这个过程得非常留意&#xff0c;生怕复制错了&#xff0c;或删减了某些东西&#xff0c;导致接口报错。…
阅读更多...
【STM32-存储器映射】

【STM32-存储器映射】

STM32-存储器映射 ■ STM32F1-4G地址空间分成8个块■ STM32F1-Block0■ STM32F1-Block1■ STM32F1-Block2■ STM32F1- ■ STM32F1-4G地址空间分成8个块 ■ STM32F1-Block0 有出厂 BootLoader 就可以使用串口下载程序。如Keil5图中IROM地址是0x8000000 开始 就是flash地址 ■ S…
阅读更多...
微服务和kafka

微服务和kafka

一、微服务简介 1.单体架构 分布式--微服务--云原生 传统架构&#xff08;单机系统&#xff09;&#xff0c;一个项目一个工程&#xff1a;比如商品、订单、支付、库存、登录、注册等等&#xff0c;统一部署&#xff0c;一个进程 all in one的架构方式&#xff0c;把所有的…
阅读更多...
flink的窗口

flink的窗口

目录 窗口分类 1.按照驱动类型分类 1. 时间窗口&#xff08;Time window&#xff09; 2.计数窗口&#xff08;Count window&#xff09; 2.按照窗口分配数据的规则分类 窗口API分类 API调用 窗口分配器器&#xff1a; 窗口函数 增量聚合函数&#xff1a; 全窗口函数…
阅读更多...
非极大值抑制算法（Non-Maximum Suppression，NMS）

非极大值抑制算法（Non-Maximum Suppression，NMS）

https://tcnull.github.io/nms/ https://blog.csdn.net/weicao1990/article/details/103857298 目标检测中检测出了许多的候选框&#xff0c;候选框之间是有重叠的&#xff0c;NMS作用重叠的候选框只保留一个 算法&#xff1a; 将所有候选框放入到集和B从B中选出分数S最大的b…
阅读更多...
探讨数字化背景下VSM（价值流程图）的挑战和机遇

探讨数字化背景下VSM（价值流程图）的挑战和机遇

在信息化、数字化飞速发展的今天&#xff0c;各行各业都面临着前所未有的挑战与机遇。作为源自丰田生产模式的VSM&#xff08;价值流程图&#xff09;&#xff0c;这一曾经引领制造业革命的工具&#xff0c;在数字化背景下又将如何乘风破浪&#xff0c;应对新的市场格局和技术变…
阅读更多...
西门子智能电气阀门定位器在冶金生产控制的应用

西门子智能电气阀门定位器在冶金生产控制的应用

西门子智能电气阀门定位器在冶金生产控制的应用 1 前 言 在自动化程度越来越高的冶金行业中 ,调节阀起着至关重要的作用,一旦其发生故障, 轻则出现生产事故，停机，停炉影响各级生产指标，生产任务，影响装置的安全运行。重则可能出现人身安全事故，将直接影响家庭的幸福和企…
阅读更多...
ubuntu 18 虚拟机安装（1）

ubuntu 18 虚拟机安装（1）

ubuntu 18 虚拟机安装 ubuntu 18.04.6 Ubuntu 18.04.6 LTS (Bionic Beaver) https://releases.ubuntu.com/bionic/ 参考&#xff1a; 设置固定IP地址 https://blog.csdn.net/wowocpp/article/details/126160428 https://www.jianshu.com/p/1d133c0dec9d ubuntu-18.04.6-l…
阅读更多...
网络安全学习（持续更新中~）

网络安全学习（持续更新中~）

网络安全学习 前言 本目录索引持续更新中&#xff0c;记录网络安全学习过程~ 博客最新更新时间&#xff1a;2024.6.25 学习路线 Windows内网服务 Windows内网服务模块包含了Windows服务器的相关知识。 文章链接包含要点Windows账户相关Windows权限相关Windows日志Windows…
阅读更多...
关于 AD21导入电子元器件放置“3D体”STEP模型失去3D纹理贴图 的解决方法

关于 AD21导入电子元器件放置“3D体”STEP模型失去3D纹理贴图 的解决方法

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/139969415 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…
阅读更多...
数据交换的桥梁：深入探索JSON序列化和反序列化

数据交换的桥梁：深入探索JSON序列化和反序列化

目录 JSON序列化 一、查看JSON文件&#xff0c;设置数据模板类 ​编辑 二、Newtonsoft.Json下载 三、代码理解 1.创建BatteryList的实例 2.初始化Batterys属性 3.添加Battery对象到Batterys列表中 4.完整的代码如下 四、运行结果展示 JSON反序列化 序列化是将对象或…
阅读更多...
2024年生物技术与食品科学国际会议(ICBFS 2024)

2024年生物技术与食品科学国际会议(ICBFS 2024)

2024 International Conference on Biotechnology and Food Science 2024年生物技术与食品科学国际会议 【会议信息】 会议简称&#xff1a;ICBFS 2024 大会地点&#xff1a;中国厦门 会议邮箱&#xff1a;icbfssub-paper.com 审稿结果&#xff1a;投稿后3日左右 提交检索&…
阅读更多...
最新文章

Copyright @ 2022~2023