CSS - grid-template-areas 属性

CSS 属性 grid-template-areas 定义了网格中的命名部分，这些部分概述了单元格的排列并使用特定名称来标识它们。

这些部分没有专门链接到单个网格元素，但可以通过网格放置属性 grid-row-start、grid-row-end、grid-column-start、grid-column-end 及其简写形式 grid-row、grid-column 和 grid-area 进行访问。

可能的值

网格容器不包含任何命名的网格区域。
为列出的每个唯一字符串创建一行，而每个字符串的单元格构成单独的列。如果多行中的多个单元格标记具有相同的名称，则它们将合并为一个跨这些特定网格单元格的单命名网格区域。但是，如果这些单元格没有形成矩形形状，则声明将无效。

语法


 grid-template-areas: none | <string> ;

适用于

网格容器。

CSS grid-template-areas - 命名区域

以下示例演示如何使用 grid-template-areas 定义命名区域。

在给出的示例中，grid-template-areas 属性通过将命名区域分配给某些网格单元来定义布局结构。
属性值中的每个字符串都表示一行，用空格分隔的单个字符串表示列。
通过为这些区域分配名称，可以组织网格布局，以便可以相应地将内容放置在每个命名部分中。


<html>
<head>
<style>
	 	/* Define styles for the grid container */
	 	.grid-container {
	 	 	 display: grid;
	 	 	 grid-template-columns: repeat(5, 1fr); /* Five columns of equal width */
	 	 	 grid-template-rows: 100px 200px 150px 100px; /* Four rows of different heights */
	 	 	 grid-template-areas:
	 	 	 "header header header main extra"
	 	 	 "sidebar content content main extra"
	 	 	 "sidebar content content main extra"
	 	 	 "footer footer footer main extra";
	 	 	 gap: 10px;
	 	 	 font-size: 1.5em;
	 	 	 height: 600px; /* Set a fixed height for demonstration */
	 	 	 border: 1px solid #ccc;
	 	 	 padding: 10px;
	 	}
	 	/* Define styles for the grid items */
	 	.header {
	 	 	 grid-area: header;
	 	 	 background-color: #3498db;
	 	 	 color: white;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.sidebar {
	 	 	 grid-area: sidebar;
	 	 	 background-color: #2ecc71;
	 	 	 color: white;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.content {
	 	 	 grid-area: content;
	 	 	 background-color: #e74c3c;
	 	 	 color: white;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.footer {
	 	 	 grid-area: footer;
	 	 	 background-color: #f39c12;
	 	 	 color: white;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.main {
	 	 	 grid-area: main;
	 	 	 background-color: #9b59b6;
	 	 	 color: white;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
	 	.extra {
	 	 	 grid-area: extra;
	 	 	 background-color: #34495e;
	 	 	 color: white;
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	}
</style>
</head>
<body>
	 	<div class="grid-container">
	 	 	 <div class="header">Header</div>
	 	 	 <div class="sidebar">Sidebar</div>
	 	 	 <div class="content">Content</div>
	 	 	 <div class="footer">Footer</div>
	 	 	 <div class="main">Main</div>
	 	 	 <div class="extra">Extra</div>
	 	</div>
</body>
</html>

CSS grid-template-areas - 网页布局

在以下示例中，grid-template-areas 属性为每个布局段定义命名网格区域。

grid-template-areas 在网格中分配页眉、文章、导航、广告和页脚，从而形成有组织的网页布局。


<html>
<head>
<style>
	 	body {	
	 	 	 display: grid;
	 	 	 grid-template-areas:	
	 	 	 	 	"header header header"
	 	 	 	 	"nav article article"
	 	 	 	 	"ads ads footer";
	 	 	 grid-template-rows: 80px 1fr 70px; 	
	 	 	 grid-template-columns: 20% 1fr 15%;
	 	 	 grid-gap: 10px;
	 	 	 height: 100vh;
	 	 	 margin: 0;
	 	 	 font-size:20px;
	 	}
	 	header, footer, article, nav, div {
	 	 	 padding: 20px;
	 	 	 background: #3498DB;	
	 	 	 color: #fff;	
	 	}
	 	#pageHeader {
	 	 	 grid-area: header;
	 	}
	 	#pageFooter {
	 	 	 grid-area: footer;
	 	}
	 	#mainArticle {	
	 	 	 grid-area: article; 	 	 	
	 	}
	 	#mainNav {	
	 	 	 grid-area: nav;	
	 	}
	 	#siteAds {	
	 	 	 grid-area: ads;	
	 	}
</style>
</head>
<body>
<header id="pageHeader">Custom Header</header>
<article id="mainArticle">Main Content</article>
<nav id="mainNav">Navigation</nav>
<div id="siteAds">Advertisement</div>
<footer id="pageFooter">Custom Footer</footer>
</body>
</html>

打印本页