Tidadigi Logo

CSS grid-column-end Property

Thuộc tính CSS grid-column-end chỉ định vị trí kết thúc của một mục lưới trong bố cục lưới. Thuộc tính grid-column-end xác định số cột mà một mục sẽ kéo dài. Nó cũng xác định dòng cột mà mục sẽ kết thúc, cho phép định vị chính xác.

Cú pháp

grid-column-end: auto |span n | column-line;

Giá trị thuộc tính

Giá trị thuộc tính

Mô tả

auto

Các mục lưới sẽ kéo dài trong một cột. Đây là giá trị mặc định.

span n

Giá trị này được sử dụng để chỉ định số lượng các mục cột sẽ kéo dài.

column-line

Giá trị này được dùng chỉ định cột nào để kết thúc hiển thị mục. Người dùng có thể đặt điểm cuối của cột.

Ví dụ 1: Sử dụng grid-column-end: auto;

Trong ví dụ này, chúng ta tạo một vùng chứa CSS grid với ba cột. Nó có nền màu xanh lá cây và các hộp trắng chứa số, căn giữa bằng display: grid.

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS grid container Property
    </title>

    <style>
        .main {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-gap: 20px;
            padding: 30px;
            background-color: green;

        }

        .GFG {
            text-align: center;
            font-size: 35px;
            background-color: white;
            padding: 20px 0;
        }

        .Geeks1 {
            grid-column-end: auto;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="Geeks1 GFG">1</div>
        <div class="Geeks2 GFG">2</div>
        <div class="Geeks3 GFG">3</div>
        <div class="Geeks4 GFG">4</div>
        <div class="Geeks5 GFG">5</div>
    </div>
</body>

</html>

Đầu ra: 

css-grid-column-end-property

Ví dụ 2: Sử dụng grid-column-end: span n;

Trong ví dụ này, chúng ta tạo vùng chứa CSS grid với ba cột. Mục đầu tiên kéo dài cả ba cột, các mục còn lại lấp đầy các ô riêng lẻ.

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS grid container Property
    </title>

    <style>
        .main {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-gap: 20px;
            padding: 30px;
            background-color: green;

        }

        .GFG {
            text-align: center;
            font-size: 35px;
            background-color: white;
            padding: 20px 0;
        }

        .Geeks1 {
            grid-column-end: span 3;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="Geeks1 GFG">1</div>
        <div class="Geeks2 GFG">2</div>
        <div class="Geeks3 GFG">3</div>
        <div class="Geeks4 GFG">4</div>
        <div class="Geeks5 GFG">5</div>
    </div>
</body>

</html>

Đầu ra: 

css-grid-column-end-property

Ví dụ 3: Sử dụng grid-column-end: column-line;

Trong ví dụ này, chúng ta tạo vùng chứa CSS grid với ba cột. Mục đầu tiên kéo dài hai cột, các mục còn lại lấp đầy các ô riêng lẻ.

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS grid container Property
    </title>

    <style>
        .main {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-gap: 20px;
            padding: 30px;
            background-color: green;

        }

        .GFG {
            text-align: center;
            font-size: 35px;
            background-color: white;
            padding: 20px 0;
        }

        .Geeks1 {
            grid-column-end: 3;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="Geeks1 GFG">1</div>
        <div class="Geeks2 GFG">2</div>
        <div class="Geeks3 GFG">3</div>
        <div class="Geeks4 GFG">4</div>
        <div class="Geeks5 GFG">5</div>
    </div>
</body>

</html>

Đầu ra: 

css-grid-column-end-property

Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi grid-column-end property được liệt kê bên dưới: 


Last Updated : 21/07/2025