菜单 搜索
首页 前端知识 CSS中grid网格布局（秒懂如何实现网格布局）-菜鸟教程

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

2024-06-14 09:06:31 前端知识 前端哥 262 753 我要收藏

目录

一、概念

二、使用

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-gap 和 column-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-start 和 grid-column-end 的简写属性
grid-column-end指定网格元素列的结束位置
grid-column-gap指定网格元素的间距大小
grid-column-start指定网格元素列的开始位置
grid-gapgrid-row-gap 和 grid-column-gap 的简写属性
grid-rowgrid-row-start 和 grid-row-end 的简写属性
grid-row-end指定网格元素行的结束位置
grid-row-gap指定网格元素的行间距
grid-row-start指定网格元素行的开始位置
grid-templategrid-template-rows, grid-template-columns 和 grid-areas 的简写属性
grid-template-areas指定如何显示行和列，使用命名的网格元素
grid-template-columns指定列的大小，以及网格布局中设置列的数量
grid-template-rows指定网格布局中行的大小
row-gap指定两个行之间的间距

 三、网格容器

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

网格容器：

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

  1. display：

    • 使用 display: grid 将元素定义为网格容器。元素的直接子元素将成为网格项。

  2. grid-template-columns 和 grid-template-rows：

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

  3. grid-gap、grid-row-gap 和 grid-column-gap：

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

  4. grid-template-areas：

    • 用于为网格区域定义名称，从而可以方便地定位网格项。

  5. grid-auto-flow：

    • 控制网格项的自动布局方式，支持 row、column、dense 等选项。

  6. grid-auto-columns 和 grid-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-start、grid-column-end、grid-row-start、grid-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-start、grid-column-end、grid-row-start、grid-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-columns和grid-template-rows用于定义网格的列和行，grid-gap用于设置网格间隙，grid-template-areas用于命名网格区域等。

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

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

转载请注明出处或者链接地址：https://www.qianduange.cn//article/12059.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

【JQuery】返回的JSON数据解析错误问题

2024-06-20 00:06:30

html css javascript jquery bootstarp响应式旅行社旅游平台网站模板(14页)

2024-06-20 00:06:22

HTML期末作业 蛋糕bootstrap响应式网站html css javascript jquery bootstarp

2024-05-26 00:05:19

JQuery函数 | 选择器 | 事件

2024-06-20 00:06:11

jQuery实现购物车完整功能，script css完整代码 详细解释，可复制粘贴使用，更改图片及相关数据即可

2024-06-20 00:06:10

双X轴的Echarts图

2024-06-20 00:06:08

在Vue3中使用echarts图表

2024-06-20 00:06:07

ECharts图例中的圆点怎么去掉

2024-06-20 00:06:04

将echarts封装为js文件

2024-06-20 00:06:04

利用Echarts画地图和飞线

2024-06-20 00:06:03

大家推荐的文章
1

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
2

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
3

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
4

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
5

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
6

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
7

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
8

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
9

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
10

UE4.27支持HTML5

2024-05-07 13:05:261000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！