CSS Grid网格布局

news2024/10/7 15:25:49

一、前言

二、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. 定位：根据所找的网格线编号，对需要特殊处理的网格单元重新定位即可；

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

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

UE4_材质_水涟漪、水深制作_Ben教程

UE4_材质_水涟漪、水深制作_Ben教程

学习笔记&#xff0c;不喜勿喷&#xff01;侵权立删&#xff0c;祝愿生活越来越好&#xff01; 效果图如下&#xff1a; 创建水材质的教程&#xff0c;首先需要外出收集一些参考&#xff0c;看一看你将要做的事情很重要&#xff0c;确定将要模仿物体的关键属性&#xff0c;从这…
阅读更多...
基于Java中的SSM框架实现后台资金管理系统项目【项目源码+论文说明】

基于Java中的SSM框架实现后台资金管理系统项目【项目源码+论文说明】

基于Java中的SSM框架实现后台资金管理系统演示 摘要 互联系统的技术在如今的社会中&#xff0c;应用的越来越广泛&#xff0c;通过互联系统我们可以更方便地进行办公&#xff0c;也能够在系统上就能处理很多日常的事务。通过互联系统的发展和使用&#xff0c;让更多的人&#…
阅读更多...
Python将Word文档转换为图片（JPG、PNG、SVG等格式）

Python将Word文档转换为图片（JPG、PNG、SVG等格式）

将Word文档以图片形式导出&#xff0c;既能方便信息的分享&#xff0c;也能保护数据安全&#xff0c;避免被二次编辑。文本将介绍如何使用 Spire.Doc for Python 库在Python程序中实现Word到图片的批量转换。 目录 Python 将Word文档转换为JPG、JPEG、PNG、BMP等图片格式 Py…
阅读更多...
Maven高级的聚合和继承

Maven高级的聚合和继承

聚合和继承 我们的项目已经从以前的单模块&#xff0c;变成了现在的多模块开发。项目一旦变成了多模块开发以后&#xff0c;就会引发一些问题&#xff0c;在这一节中我们主要会学习两个内容聚合和继承&#xff0c;用这两个知识来解决下分模块后的一些问题。 3.1 聚合 分模块开…
阅读更多...
腾讯云CVM,CentOS8系统下部署Java-Web项目步骤详解

腾讯云CVM,CentOS8系统下部署Java-Web项目步骤详解

在CVM中部署项目首先要配置好JDK,Tomcat,Mysql(这里以Tomcat和Mysql为例)。部署JDK和Tomcat的步骤可以参考 CentOS7系统下部署tomcat,浏览器访问localhost:8080/_不积跬步&#xff0c;无以至千里&#xff1b;不积小流&#xff0c;无以成江河。-CSDN博客 我这里从Mysql的安装和设…
阅读更多...
高晓松音频全集百度云，高晓松百度云，百度网盘

高晓松音频全集百度云，高晓松百度云，百度网盘

讲座通常围绕某一特定主题或领域展开&#xff0c;内容具有针对性和专业性。这使得听众能够在短时间内集中精力&#xff0c;深入了解某一领域的最新研究成果或实践经验。 讲座通常由具有丰富知识和经验的专家学者主讲&#xff0c;他们能够系统地介绍某一领域的背景、现状和发展趋…
阅读更多...
【项目管理体系】代码评审规范

【项目管理体系】代码评审规范

1完整性检查 2一致性检查 3正确性检查 4可预测性检查 5健壮性检查 6结构性检查 7可追溯性检查 8可理解性检查 9可验证性检查 软件开发全套资料获取&#xff1a;&#xff08;本文末个人名片直接获取&#xff09; 软件产品&#xff0c;特别是行业解决方案软件产品不同于一般的商品…
阅读更多...
数学建模 —— 矩阵的运算（上）

数学建模 —— 矩阵的运算（上）

目录 调用函数运算 sum : 求和函数 prod : 求乘积函数(product) cumsum : 计算累积和(cumulative sum) diff : 计算差分(difference) mean : 计算平均值 (average) median : 计算中位数 mode : 计算众数 var : 计算方差 (variance) std : 计 算 标 准 差 (standard d…
阅读更多...
CST电磁仿真实践：开路半波长同轴谐振器

CST电磁仿真实践：开路半波长同轴谐振器

许多微波技术初学者得知有现成的软件能够求解麦克斯韦方程组时&#xff0c;内心感到非常高兴&#xff0c;毕竟除了数学专家&#xff0c;不是所有人都能熟练掌握这方面的技术。尤其是&#xff0c;当看到CST电磁仿真软件可以生成美观的电磁场分布彩图时&#xff0c;他们对CST电磁…
阅读更多...
mac app应用程序如何自定义图标, 更换.app为自己喜欢的图标或者图片 详细图文讲解

mac app应用程序如何自定义图标, 更换.app为自己喜欢的图标或者图片 详细图文讲解

在mac系统中&#xff0c;我们可以对任何的app应用程序更换或者自定义图标&#xff0c; 这个图标可以是拥有的app的图标&#xff0c;或者是你自己制作的 x.icns 图标 或者是 任意的图片&#xff0c; 建议大小512x512 。 自定义图标方法如下&#xff1a; 1. 更换为已有app的图标…
阅读更多...
深入剖析JavaScript的原型及原型链

深入剖析JavaScript的原型及原型链

什么是JavaScript的原型&#xff1f; 原型是函数上的一个属性&#xff0c;它定义了构造函数制造的对象的公共祖先 原型的主要作用在于实现对象之间的属性和方法共享&#xff0c;从而节省内存空间&#xff0c;提高代码的效率 我们通过一段代码来接讲解&#xff0c;通过购买小米…
阅读更多...
掉了两根头发后，我悟了！vue3的scoped原来是这样避免样式污染（上）

掉了两根头发后，我悟了！vue3的scoped原来是这样避免样式污染（上）

前言 众所周知&#xff0c;在vue中使用scoped可以避免父组件的样式渗透到子组件中。使用了scoped后会给html增加自定义属性data-v-x&#xff0c;同时会给组件内CSS选择器添加对应的属性选择器[data-v-x]。这篇我们来讲讲vue是如何给CSS选择器添加对应的属性选择器[data-v-x]。…
阅读更多...
OpenFAST软件中linux-gnu，linux-intel，macos-gnu，vtk，windows-intel文件的作用

OpenFAST软件中linux-gnu，linux-intel，macos-gnu，vtk，windows-intel文件的作用

在OpenFAST中&#xff0c;5MW_Land_DLL_WTurb目录下的这五个文件夹分别有不同的用途&#xff0c;主要是为了支持不同操作系统和平台的编译和仿真工作。以下是每个文件夹的总结及其作用&#xff1a; linux-gnu 作用&#xff1a;包含用于GNU编译器套件&#xff08;GCC&#xff09…
阅读更多...
私有化部署 Dify 并快速搭建 AI 应用

私有化部署 Dify 并快速搭建 AI 应用

Dify介绍 Dify 是一个开源的 LLM 应用开发平台。其直观的界面结合了 AI 工作流、RAG 管道、Agent、模型管理、可观测性功能等&#xff0c;让您可以快速从原型到生产。以下是其核心功能列表&#xff1a; 1. 工作流: 在画布上构建和测试功能强大的 AI 工作流程&#xff0c;利用…
阅读更多...
大数据之路 读书笔记 Day2

大数据之路 读书笔记 Day2

大数据之路 读书笔记 Day2 日志采集——浏览器的页面采集 一、分类 #mermaid-svg-ar0WySJJTNk7KvqN {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-ar0WySJJTNk7KvqN .error-icon{fill:#552222;}#mermaid-svg-ar0…
阅读更多...
keil仿真，查看函数执行时间和执行次数

keil仿真，查看函数执行时间和执行次数

Execution Profiler执行档案器 The Execution Profiler records timing and execution statistics about instructions for the complete program code. To view the values in the Editor or Disassembly Window, use Show Time or Show Calls from the menu Debug — Executi…
阅读更多...
IND83081芯片介绍(一)

IND83081芯片介绍(一)

一、芯片介绍 IND83081是indiemicro推出的一款高性能的汽车矩阵LED照明控制器&#xff0c;集成了四个子模块&#xff0c;每个子模块包含三个串联的MOSFET开关&#xff0c;每个开关均可通过12位PWM内部信号控制&#xff0c;可配置的上升和下降速率及相位移以实现精确控制&#x…
阅读更多...
昇思25天学习打卡营第1天|快速入门-Mnist手写数字识别

昇思25天学习打卡营第1天|快速入门-Mnist手写数字识别

学习目标&#xff1a;熟练掌握MindSpore使用方法 学习心得体会&#xff0c;记录时间 了解MindSpore总体架构 学会使用MindSpore 简单应用时间-手写数字识别 一、MindSpore总体架构 华为MindSpore为全场景深度学习框架&#xff0c;开发高效&#xff0c;全场景统一部署特点。 …
阅读更多...
如何ubuntu安装wine/deep-wine运行exe程序（包括安装QQ/微信/钉钉）

如何ubuntu安装wine/deep-wine运行exe程序（包括安装QQ/微信/钉钉）

1.失败的方法&#xff1a; ubuntu22.04尝试下面这个链接方法没有成功&#xff0c; ubuntu22.04安装wine9.0_ubuntu 22.04 wine-CSDN博客 上面链接里面也提供了wine官方方法&#xff0c;链接如下&#xff1a;https://wiki.winehq.org/Ubuntu_zhcn 但是运行最后一个命令时候报…
阅读更多...
win10 C:\Users\Administrator

win10 C:\Users\Administrator

win10 C:\Users\Administrator C:\Users\Administrator\Documents\ C:\Users\Administrator\Pictures C:\Users\Administrator\Favorites C:\Users\Administrator\Links C:\Users\Administrator\Videos
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023