Tidadigi Logo

CSS grid-area Property

Thuộc tính grid-area chỉ định kích thước và vị trí của một item trong grid layout. Nó cho phép bạn xác định dòng và cột bắt đầu kết thúc của một item. Bạn có thể gán một tên cho item để tham chiếu dễ dàng trong grid templates.

Cú pháp

grid-area: grid-row-start | grid-column-start | 
           grid-row-end | grid-column-end | itemname;

Giá trị thuộc tính

Giá trị thuộc tính

Mô tả

grid-row-start

Nó thiết lập dòng mà item sẽ được hiển thị đầu tiên.

grid-column-start

Nó thiết lập cột mà item sẽ được hiển thị đầu tiên.

grid-row-end

Nó chỉ định dòng kết thúc hiển thị item hoặc số lượng dòng mà item trải dài.

grid-column-end

Nó thiết lập số lượng cột mà item trải dài.

itemname

Nó thiết lập một tên cho grid item.

Ví dụ 1: Chỉ định vị trí Grid Area

Trong ví dụ này, chúng ta tạo một grid với một khu vực tên "Area" trải dài ba cột. Chúng ta sử dụng thuộc tính grid-area để thực hiện điều này. Các item khác lấp đầy các ô còn lại với kiểu dáng đã xác định.

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS grid-area Property
    </title>
    <style>
        .item {
            grid-area: Area;
        }

        .grid-container {
            display: grid;
            grid-template-areas: 'Area Area Area';
            grid-gap: 30px;
            background-color: green;
            padding: 20px;
        }

        .GFG {
            background-color: white;
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>The grid-area Property</h2>

    <div class="grid-container">
        <div class="GFG item">1</div>
        <div class="GFG">2</div>
        <div class="GFG">3</div>
        <div class="GFG">4</div>
        <div class="GFG">5</div>
        <div class="GFG">6</div>
    </div>
</body>

</html>

Đầu ra:

Ví dụ 2: Đặt tên cho một Grid Item

Trong ví dụ này chúng ta dùng grid-area để định nghĩa các khu vực được đặt tên trong grid layout. Mỗi khu vực được tạo kiểu với căn chỉnh nội dung và kích thước cụ thể trong grid container.

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS grid-area property
    </title>

    <style>
        .GFG1 {
            grid-area: heading;
        }

        .GFG2 {
            grid-area: margin;
        }

        .GFG3 {
            grid-area: subtitle1;
        }

        .GFG4 {
            grid-area: info;
        }

        .main {
            display: grid;
            grid-gap: 30px;
            background-color: green;
            padding: 20px;
            grid-template-areas:
                'margin heading heading heading heading heading '
                'margin subtitle1 info info info info';
        }

        .GFG {
            background-color: white;
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>CSS grid-area Property</h2>

    <div class="main">
        <div class="GFG GFG1">Heading</div>
        <div class="GFG GFG2">Margin</div>
        <div class="GFG GFG3">Subtitle</div>
        <div class="GFG GFG4">info</div>
    </div>

</body>

</html>

Đầu ra:

Trình duyệt được hỗ trợ

Các trình duyệt được hỗ trợ bởi grid-area property được liệt kê dưới đây:


Last Updated : 21/07/2025