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

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-area đặt giá trị 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; grid-template-columns: auto auto auto auto;}
.divcha div {background:green; color:#fff; text-align: center; padding: 20px 0; font-size: 25px;}
</style>
</head>
<body>

<h1>Thuộc tính grid-area đặt giá trị trong CSS</h1>
<p>grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end</p>

<h4>grid-area: 2 / 1 / span 2 / span 3; Phần tử con thứ 1 bắt đầu từ hàng 2 và trải dọc xuống chiếm 2 hàng, nó cũng bắt đầu từ cột số 1 và kéo sang phải chiếm 3 cột, các phần tử khác chạy bình thường và không chiếm chổ của phần tử con thứ 1</h4>
<div class="divcha">
    <div style="grid-area: 2 / 1 / span 2 / span 3;">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

<h4>grid-area: 2 / 1 / span 2 / span 2; Phần tử con thứ 2 bắt đầu từ hàng 2 và trải dọc xuống chiếm 2 hàng, nó cũng bắt đầu từ cột số 1 và kéo sang phải chiếm 2 cột, các phần tử khác chạy bình thường và không chiếm chổ của phần tử con thứ 2</h4>
<div class="divcha">
    <div>1</div>
    <div style="grid-area: 2 / 1 / span 2 / span 2;">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

<h4>grid-area: 2 / 1 / 4 / span 2; Phần tử con thứ 2 bắt đầu từ hàng 2 và trải dọc xuống trước hàng 4, nó cũng bắt đầu từ cột số 1 và kéo sang phải chiếm 2 cột, các phần tử khác chạy bình thường và không chiếm chổ của phần tử con thứ 2</h4>
<div class="divcha">
    <div>1</div>
    <div style="grid-area: 2 / 1 / 4 / span 2;">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

<h4>grid-area: 2 / 1 / 4 / 4; Phần tử con thứ 2 bắt đầu từ hàng 2 và trải dọc xuống trước hàng 4, nó cũng bắt đầu từ cột số 1 và kết thúc trước cột 4, các phần tử khác chạy bình thường và không chiếm chổ của phần tử con thứ 2</h4>
<div class="divcha">
    <div>1</div>
    <div style="grid-area: 2 / 1 / 4 / 4;">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-area đặt giá trị 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; grid-template-columns: auto auto auto auto;}
.divcha div {background:green; color:#fff; text-align: center; padding: 20px 0; font-size: 25px;}
</style>
</head>
<body>

<h1>Thuộc tính grid-area đặt giá trị trong CSS</h1>
<p>grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end</p>

<h4>grid-area: 2 / 1 / span 2 / span 3; Phần tử con thứ 1 bắt đầu từ hàng 2 và trải dọc xuống chiếm 2 hàng, nó cũng bắt đầu từ cột số 1 và kéo sang phải chiếm 3 cột, các phần tử khác chạy bình thường và không chiếm chổ của phần tử con thứ 1</h4>
<div class="divcha">
    <div style="grid-area: 2 / 1 / span 2 / span 3;">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

<h4>grid-area: 2 / 1 / span 2 / span 2; Phần tử con thứ 2 bắt đầu từ hàng 2 và trải dọc xuống chiếm 2 hàng, nó cũng bắt đầu từ cột số 1 và kéo sang phải chiếm 2 cột, các phần tử khác chạy bình thường và không chiếm chổ của phần tử con thứ 2</h4>
<div class="divcha">
    <div>1</div>
    <div style="grid-area: 2 / 1 / span 2 / span 2;">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

<h4>grid-area: 2 / 1 / 4 / span 2; Phần tử con thứ 2 bắt đầu từ hàng 2 và trải dọc xuống trước hàng 4, nó cũng bắt đầu từ cột số 1 và kéo sang phải chiếm 2 cột, các phần tử khác chạy bình thường và không chiếm chổ của phần tử con thứ 2</h4>
<div class="divcha">
    <div>1</div>
    <div style="grid-area: 2 / 1 / 4 / span 2;">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

<h4>grid-area: 2 / 1 / 4 / 4; Phần tử con thứ 2 bắt đầu từ hàng 2 và trải dọc xuống trước hàng 4, nó cũng bắt đầu từ cột số 1 và kết thúc trước cột 4, các phần tử khác chạy bình thường và không chiếm chổ của phần tử con thứ 2</h4>
<div class="divcha">
    <div>1</div>
    <div style="grid-area: 2 / 1 / 4 / 4;">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Thuộc tính grid-area đặt giá trị 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; grid-template-columns: auto auto auto auto;}
.divcha div {background:green; color:#fff; text-align: center; padding: 20px 0; font-size: 25px;}
</style>
</head>
<body>

<h1>Thuộc tính grid-area đặt giá trị trong CSS</h1>
<p>grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end</p>

<h4>grid-area: 2 / 1 / span 2 / span 3; Phần tử con thứ 1 bắt đầu từ hàng 2 và trải dọc xuống chiếm 2 hàng, nó cũng bắt đầu từ cột số 1 và kéo sang phải chiếm 3 cột, các phần tử khác chạy bình thường và không chiếm chổ của phần tử con thứ 1</h4>
<div class="divcha">
    <div style="grid-area: 2 / 1 / span 2 / span 3;">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
</div>

<h4>grid-area: 2 / 1 / span 2 / span 2; Phần tử con thứ 2 bắt đầu từ hàng 2 và trải dọc xuống chiếm 2 hàng, nó cũng bắt đầu từ cột số 1 và kéo sang phải chiếm 2 cột, các phần tử khác chạy bình thường và không chiếm chổ của phần tử con thứ 2</h4>
<div class="divcha">
    <div>1</div>
    <div style="grid-area: 2 / 1 / span 2 / span 2;">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

<h4>grid-area: 2 / 1 / 4 / span 2; Phần tử con thứ 2 bắt đầu từ hàng 2 và trải dọc xuống trước hàng 4, nó cũng bắt đầu từ cột số 1 và kéo sang phải chiếm 2 cột, các phần tử khác chạy bình thường và không chiếm chổ của phần tử con thứ 2</h4>
<div class="divcha">
    <div>1</div>
    <div style="grid-area: 2 / 1 / 4 / span 2;">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

<h4>grid-area: 2 / 1 / 4 / 4; Phần tử con thứ 2 bắt đầu từ hàng 2 và trải dọc xuống trước hàng 4, nó cũng bắt đầu từ cột số 1 và kết thúc trước cột 4, các phần tử khác chạy bình thường và không chiếm chổ của phần tử con thứ 2</h4>
<div class="divcha">
    <div>1</div>
    <div style="grid-area: 2 / 1 / 4 / 4;">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

</body>
</html>

Thuộc tính grid-area đặt giá trị trong CSS nằm trong bài viết Thuộc tính grid-area trong CSS