菜单 搜索
首页 前端知识 grid网格布局

grid网格布局

2024-06-01 10:06:35 前端知识 前端哥 548 737 我要收藏

网格布局（Grid）是最强大的 CSS 布局方案。

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局，意味着可以同时处理行和列。Grid 布局远比 Flex 布局强大。

注意：设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

css网格布局模块（css Grid Layout Module）提供了带有行和列的基于网格的布局系统，它使网页设计变得更加容易，而无需使用浮动和定位。
所有现代浏览器均支持网格属性

网格元素

网格布局由一个父元素或者多个子元素构成
实例：

<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>

在这里插入图片描述

网格布局必须有一个display属性设置为grid或inline-grid的父元素。
网格容器的直接子元素自动成为网格项目。


网格列（Grid Columns）


网格项的垂直线被称为列。
在这里插入图片描述


网格行（Grid Rows）


网格项的水平线被称为行。
在这里插入图片描述
列 之间的线称为列线（column lines）
行之间的线称为行线（row lines）
在这里插入图片描述
实例
把网格项目放在列线1，并在列线3结束它。

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

在这里插入图片描述
把网格项目放在行线1，并在行线3结束它

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

在这里插入图片描述

网格间隙（Grid Gaps）

每行/列之间的间隔称为间隙。可以通过以下属性之一来调整间隙大小。

  • grid-column-grap 属性设置列之间的间隙

grid-column-gap: 50px;

  • grip-row-gap 设置行之间的间隙
  • grip-gap 是grip-column-grip和grip-column-grip属性的简写属性。grip-gap属性还可用于将行间隙和列间隙设置为一个值。

.grid-container {
display: grid;
grid-gap: 50px;
}
在这里插入图片描述

CSS网格容器

网格容器的直接子元素将自动成为网格项目。
如果需要使用HTML元素充当网格容器，您必须把display属性设置为grip或者inline-grip。网格容器由防止在列和行内的网格项目组成。

grip-template-columns属性定义每个列的宽度

注意：如果在 4 列网格中有 4 个以上的项目，则网格会自动添加新行并将这些项目放入其中。

grid-template-columns 属性还可以用于指定列的尺寸（宽度）。
实例
设置这四列的尺寸：

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

grip-template-rows属性定义每列的高度

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

在这里插入图片描述

justify-content属性用于在容器内对齐整个网格

`注意：网格的总宽度必须小于容器的宽度，这样justify-content属性才能效。

实例

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  justify-content: center;
  grid-template-columns: 50px 50px 50px; /* 制作小于容器的网格 */
  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>justify-content 属性</h1>

<p>请使用 <em>justify-content</em> 属性在容器内对齐网格。</p>

<p>值 "center" 会在容器中间对齐网格：</p>

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

</body>
</html>

  //justify-content: space-evenly|space-around|space-between|center|start|end;

// justify-content属性在容器内对齐网络。space-evenly会在列之间以及列周围流出相等的空间。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

align-content属性用于垂直对齐容器内的整个网格

在这里插入图片描述
注意：网格的总高度必须小于容器的高度，这样align-content属性才能生效。

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
  grid-template-columns: 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>align-content 属性</h1>

<p>请使用 <em>align-content</em> 属性垂直对齐容器内的网格。</p>

<p>值 "center" 会对齐容器中间的行：</p>

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

</body>
</html>
//align-content:center|space-evently|space-around|space-between|start|end;

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

CSS网格项目

子元素（项目）


网格容器包含网格项目，默认情况下，容器在每一行的每一列都有一个网格项目，但是可以设置网格项目的样式，让他们跨越多个行或列。

grid-column属性定义将项目放在哪一列上。

可以定义项目的开始位置以及结束位置。
grid-column属性是grip-column-start和grid-column-end属性的简写属性
如需放置某个项目，可以引用行号或者使用关键字“span”来定义该项目将跨越多少列。
实例：

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto 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;
}

.item1 {
  grid-column: 1 / 5;
}
</style>
</head>
<body>

<h1>grid-column 属性：</h1>

<p>请使用 <em>grid-column</em> 属性规定在何处放置项目。</p>

<p>Item1 将在 column 1 开始，并在 column 5 之间结束：</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 class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>

</body>
</html>

在这里插入图片描述

.item1 {
  grid-column: 1 / span 3;
}

在这里插入图片描述

grip-row属性定义了将项目放置在哪一行。

可以定义项目的开始位置以及结束位置

注释：grid-row 属性是 grid-row-start 和 grid-row-end 属性的简写属性。

如需放置项目，可以引用行号，或使用关键字 “span” 定义该项目将跨越多少行：
实例
使 “item1” 在 row-line 1 开始，在 row-line 4 结束：

.item1 {
  grid-row: 1 / 4;
}

在这里插入图片描述
在这里插入图片描述

grid-area属性

grid-area属性可以用作grid-row-start、grid-column-start、grid-row-end、grid-column-end属性的简写属性。

实例：

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto 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;
}

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}
</style>
</head>
<body>

<h1>grid-area 属性</h1>

<p>您可以使用 <em>grid-area</em> 属性来规定在何处放置项目。</p>

<p>语法是：</p>

<p>grid-row-start / grid-column-start / grid-row-end / grid-column-end.</p>

<p>Item8 将在 row-line 1 和 column-line 2 开始，并在 row-line 5 column-line 6 结束：</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 class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>

</body>
</html>

在这里插入图片描述
命名网格项
grid-area属性也可用于为网格项目分配名称。
可以通过网格容器的grid-template-areas属性来引用命名的网格项目。

<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
  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-area 属性</h1>

<p>您可使用 <em>grid-area</em> 属性来命名网格项目。</p>

<p>通过在网格容器上使用 <em>grid-template-areas</em>属性，您可以在设置网格布局时引用该名称。</p>

<p>Item1 的名为 "myArea"，并会占据全部五列：</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>

</body>
</html>

//注意是空格分隔

在这里插入图片描述
实例
让 “myArea” 跨越五列网格布局中的两列（句号代表没有名称的项目）：

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea . . .';
} 
//句号表示没有名称的网格项目

在这里插入图片描述
实例
需要定义两行的情况，在另一组撇号内定义第二行的列。
使 “item1” 跨越两列和两行：

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}

在这里插入图片描述
实例：命名所有项目，并制作一张随时可用的网页模板

<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  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-area 属性</h1>

<p>您可使用 <em>grid-area</em> 属性来命名网格项目。</p>

<p>通过在网格容器上使用 <em>grid-template-areas</em>属性，您可以在设置网格布局时引用该名称。</p>

<p>此网格布局包含六列三行：</p>

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

</body>
</html>

在这里插入图片描述
项目的顺序(这里有点弯弯绕绕)
网格布局允许我们将项目放置在我们喜欢的任意位置。HTML代码中的第一项不必显示为网格中的第一项。
grid-area相当于grid-column-start/grid-row-start/grid-column-end/grid-row-end

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: 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;
}

.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
</style>
</head>
<body>

<h1>对项目排序：</h1>

<p>这些项目不必以与它们在 HTML 代码中编写的顺序相同的顺序显示。</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>

</body>
</html>

在这里插入图片描述
实例
可以通过使用媒体查询来重新排列某些屏幕尺寸的顺序：
这个实例需要将窗口调整为500像素来查看效果。

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
}
转载请注明出处或者链接地址：https://www.qianduange.cn//article/10454.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

【基于HTML5的网页设计及应用】——数组的forEach方法

2024-06-08 00:06:12

无涯教程-HTML5 - 表单标签

2024-06-08 00:06:06

2024年最全【HTML5】逐步分析如何实现拖放功能，2024年最新Web前端技术类校招面试题汇总

2024-06-07 23:06:31

基于HTML5的美食家网站设计(源码 开题)

2024-06-07 23:06:20

HTML5基础2

2024-06-07 23:06:19

HTML5期末考核大作业，网站——旅游景点。 学生旅行 游玩 主题住宿网页 (3)

2024-06-07 23:06:10

【前端开发必知】HTML特殊字符转义及编码

2024-06-07 23:06:09

HTML中Canvas关键知识点总结

2024-06-07 23:06:09

HTML做一个个人博客页面（纯html代码）

2024-05-11 23:05:58

最新【HTML基础篇002】HTML之form表单超详解_html form表单(1)，【好文推荐】

2024-06-07 23:06:58

大家推荐的文章
1

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

2024-06-06 10:06:201000
2

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

2024-06-04 10:06:181000
3

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

2024-06-07 00:06:411000
4

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

2024-05-29 10:05:301000
5

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
6

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

2024-05-09 11:05:011000
7

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
8

UE4.27支持HTML5

2024-05-07 13:05:261000
9

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
10

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000

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

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

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

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

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