CSS中grid网格布局(秒懂如何实现网格布局)-菜鸟教程

目录

一、概念

二、使用

1.网格元素

 2.display属性

3.网格轨道

 4.fr 单位

5.网格单元

 6.网格区域

7.网格列与行

8.CSS 网格属性

 三、网格容器

display:

grid-template-columns 和 grid-template-rows:

grid-gap、grid-row-gap 和 grid-column-gap:

grid-template-areas:

grid-auto-flow:

grid-auto-columns 和 grid-auto-rows:

四、网格元素

网格元素的特点:

示例:

五、实例

六、应用场景

七、总结


一、概念

网格是一组相交的水平线和垂直线,它定义了网格的列和行。

CSS 提供了一个基于网格的布局系统,带有行和列,可以让我们更轻松地设计网页,而无需使用浮动和定位。

二、使用

1.网格元素

网格布局由一个父元素及一个或多个子元素组成。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
.grid-container {display: grid;grid-template-columns: auto auto auto;background-color: #2196F3;padding: 10px;
}
.grid-item {background-color: rgba(255, 255, 255, 0.8);border: 1px solid rgba(0, 0, 0, 0.8);padding: 20px;font-size: 30px;text-align: center;
}
</style>
</head>
<body><h1>网格元素</h1><p>网格布局父元素的 <em>display</em> 属性需要设置 <em>grid</em> 或 <em>inline-grid</em>。</p><p>网格容器内的直系子元素自动布局为网格元素。</p><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 class="grid-item">7</div><div class="grid-item">8</div><div class="grid-item">9</div>  
</div></body>
</html>

运行结果:

 2.display属性

当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后,它就变成了一个网格容器,这个元素的所有直系子元素将成为网格元素。

.grid-container {display: grid;
}.grid-container {display: inline-grid;
}

3.网格轨道

我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的列和行。

这些属性定义了网格的轨道,一个网格轨道就是网格中任意两条线之间的空间。

在下图中你可以看到一个绿色框的轨道——网格的第一个行轨道。第二行有三个白色框轨道。

以下实例我们使用 grid-template-columns 属性在网格容器中创建四个列:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>.grid-container {display: grid;grid-template-columns: auto auto auto auto;grid-gap: 10px;background-color: #2196F3;padding: 10px;
}.grid-container > div {background-color: rgba(255, 255, 255, 0.8);text-align: center;padding: 20px 0;font-size: 30px;
}
</style>
</head>
<body><h1>grid-template-columns 属性</h1><p>使用<em>grid-template-columns</em> 属性定义网格布局中的列数量。</p>
<p>网格布局中有四列:</p><div class="grid-container"><div class="item1">1</div><div class="item2">2</div><div class="item3">3</div>  <div class="item4">4</div><div class="item5">5</div><div class="item6">6</div><div class="item7">7</div><div class="item8">8</div>
</div></body>
</html>

运行结果:

以下实例我们使用 grid-template-rows 属性在网格容器中设置行的高度:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.grid-container {display: grid;grid-template-columns: auto auto auto auto;grid-template-rows: 100px 300px;grid-gap: 10px;background-color: #2196F3;padding: 10px;
}.grid-container > div {background-color: rgba(255, 255, 255, 0.8);text-align: center;padding: 20px 0;font-size: 30px;
}
</style>
</head>
<body><h1>grid-template-rows 属性</h1><p>使用<em>grid-template-rows</em> 属性定义第一行高度为 100px,第二行高度为 300px。</p>
<div class="grid-container"><div class="item1">1</div><div class="item2">2</div><div class="item3">3</div>  <div class="item4">4</div><div class="item5">5</div><div class="item6">6</div><div class="item7">7</div><div class="item8">8</div>
</div></body>
</html>

 运行结果:

 4.fr 单位

轨道可以使用任何长度单位进行定义。

网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。

以下实例定义了一个网格定义将创建三个相等宽度的轨道,这些轨道会随着可用空间增长和收缩。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr;grid-gap: 10px;background-color: #2196F3;padding: 10px;
}.grid-container > div {background-color: rgba(255, 255, 255, 0.8);text-align: center;padding: 20px 0;font-size: 30px;
}
</style>
</head>
<body><h1>fr 单位</h1><div class="grid-container"><div class="item1">1</div><div class="item2">2</div><div class="item3">3</div>  <div class="item4">4</div><div class="item5">5</div><div class="item6">6</div><div class="item7">7</div><div class="item8">8</div>
</div></body>
</html>

运行结果:

5.网格单元

一个网格单元是在一个网格元素中最小的单位, 从概念上来讲其实它和表格的一个单元格很像。现在再看回我们前面的一个例子, 一旦一个网格元素被定义在一个父级元素当中,那么他的子级元素将会排列在每个事先定义好的网格单元中。在下面的图中,我会将第一个网格单元作高亮处理。

 6.网格区域

网格元素可以向行或着列的方向扩展一个或多个单元,并且会创建一个网格区域。网格区域的形状应该是一个矩形 - 也就是说你不可能创建出一个类似于"L"形的网格区域。下图高亮的网格区域扩展了2列以及2行。

7.网格列与行

  • grid-column-gap
  • grid-row-gap
  • grid-gap
  • .grid-container {display: grid;grid-column-gap: 50px;
    }.grid-container {display: grid;grid-row-gap: 50px;
    }.grid-container {display: grid;grid-gap: 50px 100px;
    }.grid-container {display: grid;grid-gap: 50px;
    }

    8.CSS 网格属性

属性描述
column-gap指定列之间的间隙
gaprow-gapcolumn-gap 的简写属性
gridgrid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 以及 grid-auto-flow 的简写属性
grid-area指定网格元素的名称,或者也可以是 grid-row-start, grid-column-start, grid-row-end, 和 grid-column-end 的简写属性
grid-auto-columns指的默认的列尺寸
grid-auto-flow指定自动布局算法怎样运作,精确指定在网格中被自动布局的元素怎样排列。
grid-auto-rows指的默认的行尺寸
grid-columngrid-column-startgrid-column-end 的简写属性
grid-column-end指定网格元素列的结束位置
grid-column-gap指定网格元素的间距大小
grid-column-start指定网格元素列的开始位置
grid-gapgrid-row-gapgrid-column-gap 的简写属性
grid-rowgrid-row-startgrid-row-end 的简写属性
grid-row-end指定网格元素行的结束位置
grid-row-gap指定网格元素的行间距
grid-row-start指定网格元素行的开始位置
grid-templategrid-template-rows, grid-template-columnsgrid-areas 的简写属性
grid-template-areas指定如何显示行和列,使用命名的网格元素
grid-template-columns指定列的大小,以及网格布局中设置列的数量
grid-template-rows指定网格布局中行的大小
row-gap指定两个行之间的间距

 三、网格容器

CSS Grid(网格布局)是一种用于网页设计的布局系统,旨在帮助开发者更好地组织网页内容,并且在不同设备上具有良好的响应式表现。网格布局通过定义网格容器和网格项来创建可配置的布局。

网格容器:

网格容器是CSS Grid布局的基础。任何一个使用了 display: griddisplay: inline-grid 的元素都会成为一个网格容器。以下是一些与网格容器相关的重要属性:

  1. display

    • 使用 display: grid 将元素定义为网格容器。元素的直接子元素将成为网格项。
  2. grid-template-columnsgrid-template-rows

    • 定义网格的列和行。
    • 例如,grid-template-columns: repeat(3, 1fr); 定义了一个包含 3 列的网格,每列的宽度相等。
    • 可以使用 autofrpx 等单位,或者使用 repeat() 函数来定义重复的列或行。
  3. grid-gapgrid-row-gapgrid-column-gap

    • 定义网格项之间的间距。
    • grid-gap 同时设置行和列之间的间距。
    • grid-row-gapgrid-column-gap 分别设置行和列之间的间距。
  4. grid-template-areas

    • 用于为网格区域定义名称,从而可以方便地定位网格项。
  5. grid-auto-flow

    • 控制网格项的自动布局方式,支持 rowcolumndense 等选项。
  6. grid-auto-columnsgrid-auto-rows

    • 用于定义自动生成的列和行的尺寸。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Example</title>
<style>.grid-container {display: grid; /* 将元素设置为网格容器 */grid-template-columns: repeat(3, 1fr); /* 设置三列,每列宽度相等 */grid-gap: 10px; /* 设置网格项之间的间距 */}.grid-item {background-color: #f0f0f0;padding: 20px;text-align: center;}
</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>

在这个示例中,.grid-container 被设置为一个网格容器,它拥有三列,每列的宽度相等,并且网格项之间有一定的间距(grid-gap 设置为 10px)。这种网格布局可以很方便地实现各种类型的网页布局。

四、网格元素

在CSS Grid布局中,网格元素是网格容器的直接子元素,它们是构成网格布局的基本组成部分。网格元素可以根据网格容器的定义在网格中自动布局,并根据网格容器的布局规则进行定位。

网格元素的特点:

  1. 位置决定: 网格元素的位置由网格容器的定义以及网格项的位置规则决定。通过指定网格元素所在的行和列,可以将其放置在网格布局中的特定位置。

  2. 尺寸自动调整: 网格元素的尺寸可以根据网格容器的定义自动调整。可以使用CSS属性来控制网格元素的尺寸,如grid-column-startgrid-column-endgrid-row-startgrid-row-end等。

  3. 支持命名区域: 可以为网格容器中的特定区域命名,并通过指定命名区域将网格元素放置在相应的区域中。这使得网格布局更加灵活和可读性更强。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Item Example</title>
<style>.grid-container {display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 10px;}.grid-item {background-color: #f0f0f0;padding: 20px;text-align: center;}/* 定义特定的网格元素位置 */.item1 {grid-column-start: 1;grid-column-end: 3;grid-row-start: 1;grid-row-end: 3;}.item2 {grid-column-start: 3;grid-column-end: 4;grid-row-start: 2;grid-row-end: 4;}
</style>
</head>
<body>
<div class="grid-container"><div class="grid-item item1">1</div><div class="grid-item item2">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>

在这个示例中,.grid-item 类表示网格容器中的网格元素。.item1.item2 类是具有特定位置的网格元素,它们分别占据了网格布局中的特定区域,通过指定 grid-column-startgrid-column-endgrid-row-startgrid-row-end 属性来确定其位置。

五、实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Example</title>
<style>.container {display: grid; /* 使用网格布局 */grid-template-columns: repeat(3, 1fr); /* 定义三列,每列宽度相等 */gap: 10px; /* 列之间的间隔 */}.item {background-color: #f0f0f0;padding: 20px;text-align: center;}
</style>
</head>
<body>
<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
</div>
</body>
</html>

在这个例子中,我们创建了一个具有三列的网格布局。.container 类是网格的容器,.item 类表示网格中的每个项目。grid-template-columns 属性定义了列的宽度和数量,repeat(3, 1fr) 表示重复三次,每列宽度相等。gap 属性定义了列之间的间隔。

六、应用场景

  1. 网站布局: 使用CSS Grid可以轻松地创建复杂的网站布局,包括多列布局、分栏布局、网格瀑布流布局等。通过定义网格容器和网格项,可以快速实现各种布局结构。

  2. 响应式设计: CSS Grid布局对于创建响应式设计非常有用。可以使用网格模板来定义不同设备上的布局,使网页在各种屏幕尺寸下都能良好地显示和排版。

  3. 网格图库/相册: 对于展示图片或图像的网页,可以使用CSS Grid来创建网格图库或相册。通过网格布局可以轻松地排列和定位图片,同时实现响应式设计以适应不同屏幕尺寸。

  4. 表单布局: CSS Grid可以用于创建复杂的表单布局,包括多列表单、分组表单等。通过网格布局可以使表单元素在页面上有序地排列,并且易于调整和扩展。

  5. 博客/新闻网站布局: 对于博客、新闻网站等内容密集型网站,CSS Grid可以帮助设计师更好地组织和呈现内容。可以使用网格布局来创建文章列表、侧边栏、广告位等不同部分,并且灵活地调整布局。

  6. 网页部件布局: CSS Grid也可用于创建各种网页部件,如导航菜单、卡片布局、信息面板等。通过网格布局可以轻松实现部件的排列和定位,使网页具有更好的可读性和视觉吸引力。

七、总结

  1. 网格容器与网格项: 在CSS Grid中,网格布局由网格容器和网格项组成。网格容器是包含网格项的父元素,而网格项则是网格容器的直接子元素,可以在网格中自动布局和定位。

  2. 网格线与网格轨道: 网格线是网格布局中水平和垂直方向上的分隔线,它们用于定义网格的行和列。网格轨道是相邻网格线之间的区域,可以用来放置网格项。

  3. 网格单元: 网格单元是网格布局中的最小单位,由网格线围成,可以放置网格项或者作为空白区域。网格单元的大小由网格容器的定义以及网格项的规则决定。

  4. 网格属性: CSS Grid提供了一系列属性来控制网格布局,包括grid-template-columnsgrid-template-rows用于定义网格的列和行,grid-gap用于设置网格间隙,grid-template-areas用于命名网格区域等。

  5. 自动布局与手动定位: 网格布局支持自动布局和手动定位两种方式。通过定义网格容器的网格属性,可以让网格项自动布局在网格中;而通过指定网格项的位置属性,可以手动将其定位在网格布局中的特定位置。

  6. 响应式设计: CSS Grid布局对于创建响应式设计非常有用,可以使用媒体查询和自适应单位等技术来实现不同设备上的布局适配,使网页在各种屏幕尺寸下都能良好地显示和排版。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何使用SQL注入工具?

前言 今天来讲讲SQL注入工具&#xff0c;sqlmap。如何使用它来一步步爆库。 sqlmap官方地址如下。 sqlmap: automatic SQL injection and database takeover tool 前期准备&#xff0c;需要先安装好docker、docker-compose。 一个运行的后端服务&#xff0c;用于写一个存在…

计算机网络-TCP断开连接阶段错误应对机制

连接断开阶段 四次挥手机制&#xff1a;TCP连接的断开需要四次挥手&#xff0c;这是因为双方都需要独立地关闭数据传输。第二次和第三次挥手不能合并&#xff0c;因为在回复第二次挥手的时候&#xff0c;可能还有数据没有接收完成&#xff0c;所以需要先回复ACK报文&#xff0c…

【U8+】打开固定资产卡片,提示:运行时错误‘91’,未设置对象变量或with block变量。

【问题描述】 用友U8软件&#xff0c;固定资产模中打开某张卡片后&#xff0c; 提示&#xff1a;运行时错误‘91’&#xff0c;未设置对象变量或with block变量。 Ps&#xff1a;但不是所有卡片打开的时候都会提示&#xff0c;有的正常。 【解决方法】 跟踪数据库后&#xff…

SpringBoot入门(Hello World 项目)

SpringBoot关键结构 1.2.1 Core Container The Core Container consists of the Core, Beans, Context, and Expression Language modules. The Core and Beans modules provide the fundamental parts of the framework, including the IoC and Dependency Injection featur…

C语言易错知识点(3):字符数组的修改、sscanf、sprintf

字符数组是一个很细节的语法&#xff0c;涉及很多知识点&#xff0c;这篇文章我主要分享一下如何理解字符数组&#xff0c;以及对应的sscanf、sprintf有什么用 1.字符数组的初始化以及内容修改易错点 字符数组的初始化方式有两种&#xff0c;一种是直接用字符串进行初始化&am…

每日一题---OJ题: 相交链表

片头 嗨! 小伙伴们,大家好! 今天我们来一起学习这道OJ题---相交链表,准备好了吗? Ready Go! ! ! emmm,看这道题好像不怎么难,我们一起画图分析分析 上图中,A链表有5个结点,分别为 a1,a2,c1,c2,c3 ; B链表有6个结点,分别为 b1,b2,b3,c1,c2,c3 ; A链表和B链表在c1结点相交 …

渗压计在测压管与测井中的安装方法

在地下水动态监测与工程安全评估中&#xff0c;渗压计扮演着至关重要的角色。它能够精准地测量地下水压力的变化&#xff0c;为工程师提供决策依据。本文将详细阐述在测压管或测井中如何正确安装渗压计&#xff0c;以确保其准确度和可靠性。 一、建立零读数并浸透透水石 在安装…

PandasAI的应用与实战解析(一):环境安装、运行demo

文章目录 1.源码包下载、明确依赖版本2.安装python依赖3.运行demo 本博客源码仓库地址&#xff1a;gitlab&#xff0c;本篇博客对应01分支python版本为3.10.x 什么是PandasAI&#xff1f;一句话总结的话&#xff0c;PandasAI就是一个结合了Pandas和AI的开源工具&#xff0c;更…

windwos安全加固

一、账号管理 按用户类型分配账号 目的&#xff1a;根据系统要求&#xff0c;设定不同账户和组&#xff0c;管理员、数据库 sa、审计用户、来宾用户等 实施方法&#xff1a; 打开本地用户和计算机管理器 ​ 1.打开运行&#xff0c;输入lusrmgr.msc 2.根据用户要求将账户加入…

秋招算法刷题7

20240410 1.接雨水 方法一&#xff0c;动态规划&#xff0c;时间复杂度O&#xff08;n^2&#xff09;&#xff0c;空间复杂度O&#xff08;n&#xff09; public int trap(int[] height) { int nheight.length; if(n0){ return 0; } …

java:字符集和字符流

字符集 规定了字符和二进制之间对应关系的一张表 字节是计算机最基本的存储单位 字符则是通过字符组成和编码而成的文本 常见字符集 1,ASCII字符集 基础字符编码标准,包含128个字符,只包括英文字母,数字和一些常见的符号 一个字节表示一个字符 所有的字符集均兼容ASCII…

open-sora

Open-Sora&#xff0c;高效复现类Sora视频生成方案开源&#xff01;魔搭社区最佳实践教程来啦&#xff01;https://mp.weixin.qq.com/s/WMQIDgZs2MBPGtx18XSXgw Open-Sora开源方案讲解开源但“平替”的方案。https://mp.weixin.qq.com/s/nPYCzgBA7hIsPZ6PCyXxKQOpen-Sora/docs…

数据分析案例(一):地区收入的PCA主成分分析

练习1 地区收入的PCA主成分分析 0.变量说明 1.导包操作 核心思路&#xff1a;导入基础数据操作库包&#xff0c;PCA、k-means 库包&#xff0c;数据可视化库包 import pandas as pd import numpy as np from sklearn.decomposition import PCA from sklearn.preprocessing i…

YOLOV5训练KITTI数据集实践

目录 一、YOLOV5下载安装二、KITTI数据集三、标签格式转换四、修改配置文件五、训练六、测试 一、YOLOV5下载安装 git clone https://github.com/ultralytics/yolov5.git conda create -n yolov5 python3.8 -y conda activate yolov5 cd yolov5 pip install -r requirements.t…

2024最火的情感短视频素材在哪下载?这里有几个素材网站可以下载

在这个看似无边无际的短视频海洋中&#xff0c;我就像那个手握罗盘、脚踏破旧木筏的勇敢航海家&#xff0c;时刻准备着发现新大陆。而我的罗盘&#xff0c;就是那些能够指引我找到珍稀素材的网站。让我带你领略一下我的航海日记吧。九才素材网&#xff1a; 九才素材网提供了丰…

青少年体能素质教育平台

一、项目背景与意义 随着社会的快速发展和人们生活水平的提高&#xff0c;青少年体能素质教育逐渐受到社会各界的广泛关注。体能素质作为青少年全面发展的重要组成部分&#xff0c;对于提升他们的健康水平、增强自信心、培养团队协作精神和创新能力具有重要意义。然而&#xf…

继承【C/C++复习版】

目录 一、什么是继承&#xff1f;怎么定义继承&#xff1f; 二、继承关系和访问限定符&#xff1f; 三、基类和派生类对象可以赋值转换吗&#xff1f; 四、什么是隐藏&#xff1f;隐藏vs重载&#xff1f; 五、派生类的默认成员函数&#xff1f; 1&#xff09;派生类构造函…

关于转义符 \ 在php正则中的匹配问题

今天做题遇到一个很经典的问题&#xff0c;记录一下&#xff0c;先看一段代码 <?php $str&#xff0c;&#xff0c;"\\"; $pattern&#xff0c;&#xff0c;"/\\/"; if(preg_match($partern,$str,$arr)) { &#xff0c;&#xff0c;&#xff0c;&…

SpringBoot编写一个SpringTask定时任务的方法

1&#xff0c;在启动类上添加注解 EnableScheduling//开启定时任务调度 2&#xff0c; 任务&#xff08;方法&#xff09;上也要添加注解&#xff1a; Scheduled(cron " 0 * * * * ? ") //每分钟执行一次 域&#xff1a; 秒 分 时 日 月 周 &#xff08;年&#…

如何修复在Deepin系统中因`apt-get autoremove systemd`导致的启动问题

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …