Tidadigi Logo

CSS grid-column Property

Thuộc tính CSS grid-column chỉ định kích thước và vị trí của một item trong grid layout. Nó kiểm soát vị trí và khoảng trải của các grid item. Cho phép chỉ định các đường cột bắt đầu và kết thúc. Điều này giúp thiết kế linh hoạt mà không thay đổi cấu trúc HTML.

Cú pháp

grid-column: grid-column-start | grid-column-end;

Giá trị thuộc tính

Các thuộc tính grid-column-start và grid-column-end có thể được mô tả theo ba cách:

Giá trị thuộc tính

Mô tả

auto

Phần tử sẽ được đặt trong luồng mặc định. Đây là giá trị mặc định của thuộc tính.

span n

Chỉ định số lượng cột mà item sẽ trải dài trong cả grid-column-start và grid-column-end.

column-line

Mô tả cột nào để bắt đầu và hiển thị item trong grid-column-start. Chỉ ra cột nào để kết thúc hiển thị item cho grid-column-end.

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

Trong ví dụ này, chúng ta tạo một CSS grid container với ba cột. Item đầu tiên trải dài hai cột, các item còn lại lấp đầy các ô riêng lẻ. Grid có nền màu xanh lá cây và các hộp màu trắng.

html 
<!DOCTYPE html>
<html>

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

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

        }

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

        .Geeks1 {
            grid-column: 1 / 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-property

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

Trong ví dụ này, chúng ta tạo một CSS grid với ba cột. Item đầu tiên trải dài cột đầu tiên và cột thứ hai. Các item còn lại chiếm các ô riêng lẻ, grid có nền màu xanh lá cây.

html 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS grid column Property
    </title>

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

        }

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

        .Geeks1 {
            grid-column: 1 / 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-property

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

Trong ví dụ này, ta tạo CSS grid có ba cột. Item đầu tiên trải dài cả ba cột, những item còn lại chiếm các ô riêng lẻ. Grid có màu nền xanh lá cây.

html 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS grid column Property
    </title>

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

        }

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

        .Geeks1 {
            grid-column: 1 / 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-property

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


Last Updated : 21/07/2025