Tidadigi Logo

CSS grid-template Property

Thuộc tính grid-template trong CSS là viết tắt để định nghĩa cột, hàng và vùng lưới. Nó cho phép bạn thiết lập các giá trị cho các thuộc tính chi tiết sau: grid-template-rows, grid-template-columns và grid-template-areas.

Cú pháp

grid-template: none| grid-template-rows/ grid-template-columns | grid-template-areas | initial | inherit

Giá trị thuộc tính:

. none:

Đặt lại kích thước của hàng và cột về giá trị mặc định ban đầu của chúng.

Ví dụ:

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | grid-template Property
    </title>
    <style>
        .main {
            display: grid;
            grid-template: none;
            grid-gap: 10px;
            background-color: green;
            padding: 10px;
        }
        
        .main > div {
            background-color: white;
            text-align: center;
            padding: 15px 0;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="item1">G</div>
        <div class="item2">E</div>
        <div class="item3">E</div>
        <div class="item4">K</div>
    </div>
</body>

</html>


Đầu ra: 
 

css-grid-template-property

. grid-template-rows/grid-template-columns:

Giá trị thuộc tính này được sử dụng để chỉ định kích thước hàng và cột bằng px, cm,... Nếu người dùng muốn kích thước hàng hoặc cột giữ mặc định hãy đặt là "auto".

Ví dụ: 

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | grid-template Property
    </title>
    <style>
        .main {
            display: grid;
            grid-template: 50px 100px/150px auto;
            grid-gap: 10px;
            background-color: green;
            padding: 10px;
        }
        
        .main > div {
            background-color: white;
            text-align: center;
            padding: 15px 0;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="item1">G</div>
        <div class="item2">E</div>
        <div class="item3">E</div>
        <div class="item4">K</div>
    </div>
</body>

</html>


Đầu ra: 

css-grid-template-property

. grid-template-areas:

Giá trị thuộc tính này chỉ định các vùng trong bố cục lưới. Thuộc tính grid-area được dùng để đặt tên các phần tử lưới. Sau đó tham chiếu đến chúng bằng cách sử dụng grid-template-areas.

Ví dụ: 

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | grid-template Property
    </title>
    <style>
        .item1 {
            grid-area: item1;
        }
        
        .item2 {
            grid-area: item2;
        }
        
        .item3 {
            grid-area: item3;
        }
        
        .item4 {
            grid-area: item4;
        }
        
        .main {
            display: grid;
            grid-template: 'item1 item1 item1' 
                           'item2 item3 item4';
            grid-gap: 10px;
            background-color: green;
            padding: 10px;
        }
        
        .main > div {
            background-color: white;
            text-align: center;
            padding: 15px 0;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="item1">G</div>
        <div class="item2">E</div>
        <div class="item3">E</div>
        <div class="item4">K</div>
    </div>
</body>

</html>


Đầu ra: 

css-grid-template-property

. initial:

Giá trị thuộc tính này sẽ đặt thuộc tính về giá trị mặc định của nó.

Ví dụ: 

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | grid-template Property
    </title>
    <style>
        .main {
            display: grid;
            grid-template: initial;
            alignnone grid-gap: 10px;
            background-color: green;
            padding: 10px;
        }
        
        .main > div {
            background-color: white;
            text-align: center;
            padding: 15px 0;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="item1">G</div>
        <div class="item2">E</div>
        <div class="item3">E</div>
        <div class="item4">K</div>
    </div>
</body>

</html>

Đầu ra: 
 

css-grid-template-property

. inherit:

Thuộc tính này sẽ kế thừa thuộc tính từ phần tử cha của nó.

Ví dụ: 

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | grid-template Property
    </title>
    <style>
        .main {
            display: grid;
            grid-template: inherit;
            grid-gap: 10px;
            background-color: green;
            padding: 10px;
        }
        
        .main > div {
            background-color: white;
            text-align: center;
            padding: 15px 0;
            font-size: 30px;
        }
        
        alignnone
    </style>
</head>

<body>
    <div class="main">
        <div class="item1">G</div>
        <div class="item2">E</div>
        <div class="item3">E</div>
        <div class="item4">K</div>
    </div>
</body>

</html>

Đầu ra: 
 

css-grid-template-property

Thuộc tính grid-template là công cụ mạnh mẽ để định nghĩa cấu trúc và bố cục lưới CSS. Bạn có thể tạo bố cục lưới phức tạp và linh hoạt dễ dàng. Bằng cách kết hợp grid-template-rows, grid-template-columns và grid-template-areas.

Các trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ CSS grid-template Property được liệt kê bên dưới: 

  • Google Chrome 57.0
  • Edge 16
  • Firefox 52.0
  • Safari 10.1
  • Opera 44.0

Last Updated : 21/07/2025