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

最新推荐文章于 2024-05-29 10:53:24 发布
最新推荐文章于 2024-05-29 10:53:24 发布
阅读量1.6k 收藏 29
点赞数 22
分类专栏： JS html 前端知识 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73916603/article/details/137692088
版权
前端知识 同时被 3 个专栏收录
54 篇文章 0 订阅
订阅专栏
html
33 篇文章 0 订阅
订阅专栏
JS
24 篇文章 0 订阅
订阅专栏

目录

一、概念

二、使用

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

码农白衣
关注
  • 22
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 快速入门教程 - Grid 网格布局教程
nagenage123的博客
06-28 162
css 快速入门教程 - Grid 网格布局教程 学习 grid 时，需要先了解 grid 的一些重要术语。 CSS Grid 网格布局 - 重要属性 属性 描述 设置在网格容器上 display display grid 或者 inline-grid 声明元素为网格容器 行和列 grid-template-columns 设置网格列 grid-template-rows 设置网格行 网格排序 grid-aut
CSS Grid布局教程之什么是网格布局
09-25
在这篇文章中简单的介绍了CSS Grid Layout，以及为什么要使用他，并且介绍了其一些术语：网格线、网格轨道、网格单元格、网格区域和网格容器等，为后面如何学习和使用CSS Grid Layout做了一个铺垫。
CSS Grid布局教程之网格单元格布局
12-13
CSS Grid布局对于我等来说就是一个全新的布局，但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容（《CSS Grid布局教程之什么是网格布局》和《CSS Grid布局教程之浏览器开启CSS Grid Layout汇总》）为这篇文章做足了铺垫。或许你想知道的是如何使用？各位看官不用太急，接下来通过各种实例向大家阐述CSS Grid布局，让我们一起领略其强大的魅力。 当然，接下来的示例不是我想出来的，这是我挖出来的，主要制作者是Rachel Andrew。在继续往下阅读之前，我们应该一起感谢Rachel Andrew，感谢他给我们提供这么多有关于CSS Grid Layout的示
CSS Grid 网格布局全解析
09-24
主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用CSS Grid布局实现网格的流动
09-25
主要介绍了使用CSS Grid布局实现网格的流动,需要的朋友可以参考下
CSS之Grid网格布局
swimming_in_IT_的博客
05-31 697
一：概述 网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针...
CSS——grid网格布局的基本使用
weixin_43599321的博客
09-16 459
网格布局在实现页面自适应，大屏可视化中常常使用，在这篇博客里，记录一下网格布局的基本使用。
Css3新布局---Grid网格
m0_66711291的博客
08-02 2353
网格布局是css3中新增加的一种布局方式，比flex更加强大。flex属于一维布局，对于高度不能灵活控制。grid网格布局是二维布局，通过行和列来分配网页空间。通过下面这个小游戏可以简单体会到网格布局的强大。...
CSS - grid布局
qq_33962481的博客
07-02 595
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import
图解 CSS Grid 布局
小马甲
07-17 1587
在解释 CSS Grid 布局之前，我们先来看看 Grid 布局中一些重要概念。
java程序员菜鸟进阶（十一）Extjs4常用功能（三）——列表grid的使用（带综合查询，分页）...
jishublog
06-21 134
在开发中，显示数据库表中的列表功能是很常用的功能，一般列表都会带有综合查询和分页功能，在extjs4中为我们提供了强大的列表grid功能，在此记录一下，算是做个备忘 var mystore = Ext.create('Ext.data.Store', { fields : [ 'id', 'occurDate',"occurPlace","charger","content","i...
grid布局详解
戴林峰的博客
11-29 481
参考阮一峰 http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
前端 CSS 经典：3D 渐变轮播图
weixin_64684095的博客
05-23 611
前言：无论什么样式的轮播图，核心 JS 实现原理都差不多。所以小伙伴们，还是需要了解一下核心 JS 实验原理的。
在HTML和CSS当中运用显示隐藏
J3259392566的博客
05-29 800
IE6 和部分 IE7 内核的浏览器 ( 如 QQ 浏览器)会读懂 rgba，解析后颜色为透明，其实应该是 null那么使用opacity实现背景透明，文字不透明是可取的。在IE6、7中，需要激活IE 的 haslayout 属性(如:*zoom:1 或者 *overflow:hidden)，让它读懂 filter:Al-在IE6、7、8中，设置了filter:Alpha的元素，父元素设置position:static(默认属性)，其子元素为相对定位可让子元素不透明。overflow-x只包括水平方向。
css让padding、border不占据宽度
最新发布
于忠会的博客
05-29 423
有时我们不希望 padding 影响到 div 的实际宽度。以前只能手动计算 width，从 CSS3 开始可以通过 box-sizing 来做到这一点。则包含 padding，div 的实际宽度为 120px。CSS3 新增了 box-sizing 属性。则 div 的实际宽度为 120px。以前，如果指定 div 的宽度为。
CSS动画技术（css-animation）
Zarathusa的博客
05-23 1213
CSS Transition是一种用于实现元素状态变化平滑过渡的CSS技术。它允许你在元素从一种状态到另一种状态的过渡中添加动画效果，例如改变颜色、大小、位置等属性。过渡属性：在transition属性中指定需要过渡的属性（如颜色、宽度、高度等）。持续时间：使用时间单位（秒或毫秒）定义过渡的持续时间，控制动画的速度。缓动函数：指定过渡效果的缓动函数，它定义了动画过程中属性值的变化速度。过渡属性是你希望在元素状态变化时产生动画效果的CSS属性。这些属性定义了在过渡期间发生变化的元素属性。
CSS实现暗黑模式
代码有点萌的博客
05-23 648
通过JavaScript来动态切换暗黑模式和普通模式。使用localStorage保存用户的选择，以便用户刷新页面或重新访问时仍然保持其选择。
比flex更好用的css布局，CSS Grid 网格布局教程
05-28
CSS Grid 网格布局是一种比较新的 CSS 布局方式，可以更方便、更灵活地实现网页的布局和设计。相比于传统的布局方式（如 flex），CSS Grid 更加强大和灵活，可以在一个二维的网格中对页面进行布局。 下面是一个简单的 CSS Grid 网格布局的示例： ```html <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> ``` ```css .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } .item { background-color: #ddd; padding: 20px; text-align: center; } ``` 在上面的代码中，`.container` 是一个 CSS Grid 容器，`.item` 是容器中的子元素。通过设置 `display: grid`，我们告诉浏览器该容器使用 CSS Grid 布局。`grid-template-columns` 属性定义了容器中的列数和宽度，这里我们使用了 `repeat()` 函数来重复定义 3 列，每列宽度为 1fr。`grid-gap` 属性定义了子元素之间的间距。 通过这种方式，我们可以轻松实现一个网格布局，而不需要使用传统的布局方式。 当然，这只是 CSS Grid 的基础用法，CSS Grid 还有很多高级特性，如命名网格线、自适应网格、子元素排列顺序等等。学习 CSS Grid 可能需要一定的时间和精力，但是它的强大和灵活性是其他布局方式所无法比拟的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值