2分钟让你搞懂 grid-template-areas

最新推荐文章于 2025-03-27 19:28:24 发布
最新推荐文章于 2025-03-27 19:28:24 发布
阅读量4.4k 收藏 17
点赞数
分类专栏： 个人日记 个人记录 grid 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wen_binobject/article/details/120428844
版权
本文将带你快速掌握CSS Grid布局中的grid-template-areas属性，通过实例解析如何使用该属性创建复杂的网页布局。了解grid-template-areas，轻松布局网页元素。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在这里插入图片描述

上面的效果怎么样通过grid实现呢？ 话不多说 上代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content
最低0.47元/天 解锁文章
【布局】 Grid网格布局
m0_57135756的博客
04-07 1740
Grid布局 CSS Grid 网格布局介绍 CSS Grid 布局是 Web 的第一个真正的布局系统。它的目的是将内容组织成行列的形式，最终使开发人员能高度控制我们眼前屏幕上页面的显示效果。CSS Grid 布局不仅仅可以使复杂的布局和精美的排版成为可能，而且还可以使其变的干净利落可维护。 基础知识和浏览器支持 ​ 截至2022年3月，大部分浏览器都提供了对 CSS Grid 的原生支持，而且无需加浏览器前缀：Chrome（包括 Android ），Firefox，Edge，Safari（包括iOS）和
4 合并grid列_grid布局笔记4——grid-template-areas
weixin_39657125的博客
12-24 848
grid布局允许指定“区域”(area)，一个区域由单个或多个单元格组成。为什么要指定区域呢？其实就是为了更轻松的完成页面的布局，我们知道，grid布局，允许设置几行几列的网格布局，但实际应用中，有些布局单单设置几行几列无法完成，例如这种布局——我们可以看到，标号4的单元格占据了两列的宽度，那么上面的布局我们应该设置几行几列呢？为了应付这种布局需求，我们就用到这一个属性——grid-templat...
CSS 中grid - template - areas属性的作用，如何使用它创建复杂的网格布局？
最新发布
前端大白话
03-27 1120
属性就像是一个强大的布局神器，让你可以像搭积木一样轻松创建复杂的网格布局。只要给网格区域起好名字，然后把元素放到对应的区域里，就能打造出你想要的布局效果。快去试试吧，让你的网页布局变得更加酷炫！除了属性，还有哪些属性可以用于创建复杂的网格布局？在 CSS 中，除了。
了解 CSS 网格：网格模板区域
allway2的博客
06-02 2291
使用 CSS 网格布局时，您始终可以将项目从一条网格线放置到另一条网格线。但是，还有另一种描述布局的方式，一种本质上是可视化的方式。在本文中，我们将学习如何使用该属性来定义网格上的位置，并了解该属性是如何工作的。如果您错过了本系列之前的文章，您可以在这里找到它们：该属性接受一个或多个字符串作为值。每个字符串（用引号括起来）代表网格的一行。您可以在使用and定义的网格上使用该属性，或者您可以创建布局，在这种情况下，所有行都将自动调整大小。以下属性和值描述了一个具有四个区域的网格——每个区域跨越两个列轨道和两个
【CSS】了解grid-template-areas属性
读心悦
07-04 898
属性是 CSS Grid 布局中一个非常有用的特性，它允许你通过命名网格区域（grid areas）来直接控制网格项目的布局。这个属性通过引用网格容器内部网格项目的名称来定义网格区域的布局，使得布局的设计更加直观和易于理解。
grid-template-areas和grid-area
frank_fong的博客
03-21 2069
&lt;!doctype html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;grid&lt;/title&gt; &lt;style&gt; /* grid-template-areas */ .container1 { dis
grid-template-areas
03-16
我可以解释grid-template-areas是CSS Grid Layout中的一个属性，它允许你把网格区域命名，并定义每个区域如何对应到网格线上。grid-template-areas是CSS中用于定义CSS网格布局中网格区域的属性。通过使用grid-...
讲到的grid-template-areas搭配使用
10-16
通过 `grid-template-areas`，你可以将网格划分为一系列命名的区域，然后在 CSS 中指定每个区域对应的内容。 例如，假设你有一个两列三行的网格，你可以这样设置： ```css .grid-container { display: grid; ...
grid响应式布局
weixin_34250434的博客
07-28 160
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; *{ padding:0; margin:0;
grid 布局案例之grid-template-areas和grid-column的使用
小哈力----一个小前端工程师
04-12 1104
分别使用grid-template-areas和grid-column两种方法进行同样效果布局。
网格布局中 grid-template-columns / grid-template-rows 和 grid-template-areas 属性
陈开心的博客
11-05 1万+
grid-template-columns / grid-template-rows 使用空格分隔的值列表，用来定义网格的 列 和 行。 值表示 网格轨道(Grid Track) 大小，值之间的空格 表示网格线。 .container { grid-template-columns: <track-size> ... | <line-name> <track-si...
CSS Grid 网格布局详解
不想学习的打工人的博客
03-30 3749
网格布局（Grid）是CSS中最强大的布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与 Flex 布局 有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
css display: grid属性grid-template-areas
//Case
01-21 671
.container { border:none; display: grid; height: 600px; grid-template-columns: 200px 1fr; /*两列，第一列200px，第二列自适应*/ grid-template-rows: 50px 1fr 30px; /*三行：第一行：50px,第二行：自适应，第三行：30px*/ row-gap: 3px; /*行间距*/ column-gap: 3px; /*列
CSS之Grid网格布局
swimming_in_IT_的博客
05-31 1696
一：概述 网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针...
白骑士的CSS高级篇之CSS Grid布局进阶 4.1.2 网格模板与区域
JeremyTC的博客
09-01 1049
CSS Grid布局是CSS中强大的布局系统之一，它提供了更灵活和更高效的方式来创建复杂的网页布局。通过Grid布局，你可以将网页划分为多个网格区域，并在这些区域中放置内容，这使得布局更加直观和易于维护。本文将深入探讨Grid布局中的网格模板和区域的概念，帮助你掌握如何利用它们创建专业的网页布局。
css基础知识十：介绍一下CSS中的Grid网格布局?
Allen-Ye博客
06-26 1319
介绍一下CSS中的Grid网格布局?
css【详解】grid布局—— 网格布局（栅格布局）
热门推荐
朝阳39的博客
04-11 6万+
目录 gird布局 和 flex布局的区别 Grid 布局的基本术语 网格布局的使用方法 启用网格布局display: grid 划分列grid-template-columns 绝对值 px 百分比值 % 比例值 fr auto值 minmax()函数值 repeat()函数值 划分行grid-template-rows 自动填充auto-fill 给网格线命名 [] 设置行/列的间距 指定区域 不属于任何区域的单元格，用.表示 多个单元格合并成一个区域 改...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值