Tự code rồi chạy thử... Chạy Thử

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-template-areas cho nhiều phần tử trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.divcha{background:red; width:100%; height:auto; margin-bottom:10px; display: grid; grid-gap: 10px; padding: 10px;}
.divcha div {background:green; color:#fff; text-align: center; padding: 20px 0; font-size: 25px;}
</style>
</head>
<body>

<h1>Thuộc tính grid-template-areas cho nhiều phần tử trong CSS</h1>
<p>grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';</p>
<p>Chia 3 hàng, mỗi hàng 6 cột: header chiếm tất cả 6 ô của hàng 1, menu chiếu 1 ô đầu tiên của hàng 2 và 1 ô đầu tiên của hàng 3, main chiếm 3 ô (2,3,4) của hàng 2, right chiềm 2 ô (5,6) của hàng 2, footer chiếm 5 ô (2,3,4,5,6) của hàng 3:</p>

<div class="divcha" style="grid-template-areas:
  'header header header header header header'
  'menu main main main right right'
  'menu footer footer footer footer footer';">
	<div style="grid-area: header;">Header</div>
    <div style="grid-area: menu;">Menu</div>
    <div style="grid-area: main;">Main</div>
    <div style="grid-area: right;">Right</div>
    <div style="grid-area: footer;">Footer</div>
</div>

</body>
</html>

Thuộc tính grid-template-areas cho nhiều phần tử trong CSS

grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer';

Chia 3 hàng, mỗi hàng 6 cột: header chiếm tất cả 6 ô của hàng 1, menu chiếu 1 ô đầu tiên của hàng 2 và 1 ô đầu tiên của hàng 3, main chiếm 3 ô (2,3,4) của hàng 2, right chiềm 2 ô (5,6) của hàng 2, footer chiếm 5 ô (2,3,4,5,6) của hàng 3:

Header

Main

Right

Footer

Thuộc tính grid-template-areas cho nhiều phần tử trong CSS nằm trong bài viết Thuộc tính grid-template-areas trong CSS