Tidadigi Logo

CSS grid-column-start Property

Thuộc tính grid-column-start trong CSS xác định đường kẻ cột bắt đầu cho một phần tử lưới. Nó nằm trong một vùng chứa lưới, cung cấp sự linh hoạt bố cục đáng kể. Thuộc tính này có thể sử dụng các giá trị khác nhau để điều khiển vị trí phần tử. Việc này giúp tăng cường thiết kế responsive của các trang web.

Cú pháp

grid-column-start: auto | span n | column-line;
  • Giá trị mặc định:auto

Giá trị thuộc tính

. auto:

Một từ khóa chỉ định rằng thuộc tính không đóng góp vào vị trí của phần tử lưới. Giá trị mặc định này sẽ đặt phần tử theo luồng thông thường.

Cú pháp:

grid-column-start: auto;

Ví dụ:

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | grid-column-start Property
    </title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-gap: 10px;
            background-color: lightgreen;
            padding: 10px;
        }
        
        .grid-container div {
            background-color: green;
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
            color: white;
        }
        
        .item1 {
            <!-- grid-column-start property
                               with auto value --> 
            grid-column-start: auto;
        }
    </style>
</head>

<body>

    <center>
        <h1>
         The grid-column-start Property
        </h1>
        <h3>auto value</h3>
        <strong>the item will be placed
               following the initial flow</strong>
   </center>

    <div class="grid-container">
        <div class="item1">G</div>
        <div class="item2">e</div>
        <div class="item2">e</div>
        <div class="item3">k</div>
        <div class="item4">s</div>
        <div class="item5">f</div>
        <div class="item6">o</div>
        <div class="item6">r</div>
        <div class="item1">G</div>
        <div class="item2">e</div>
        <div class="item2">e</div>
        <div class="item3">k</div>
        <div class="item4">s</div>
    </div>

</body>

</html>

Đầu ra:

css-grid-column-start-property

. span n:

Một từ khóa chỉ định số lượng cột mà phần tử sẽ trải dài. Nếu tên được chỉ định là a, chỉ các dòng có tên đó mới được tính.

Cú pháp:

grid-column-start: span n;

Ví dụ:

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | grid-column-start Property
    </title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-gap: 10px;
            background-color: lightgreen;
            padding: 10px;
        }
        
        .grid-container div {
            background-color: green;
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
            color: white;
        }
        
        .item1 {
            <!-- grid-column-start property 
                                with span value --> 
            grid-column-start: span 4;
        }
    </style>
</head>

<body>

     <center>
        <h1>
         The grid-column-start Property
        </h1>
        <h3>auto value</h3>
        <strong>the item will be placed following 
                           the initial flow</strong>
    </center>
    <div class="grid-container">
        <div class="item1">G</div>
        <div class="item2">e</div>
        <div class="item2">e</div>
        <div class="item3">k</div>
        <div class="item4">s</div>
        <div class="item5">f</div>
        <div class="item6">o</div>
        <div class="item6">r</div>
        <div class="item1">G</div>
        <div class="item2">e</div>
        <div class="item2">e</div>
        <div class="item3">k</div>
        <div class="item4">s</div>
    </div>

</body>

</html>

Đầu ra:

css-grid-column-start-property

. column-line:

Một từ khóa chỉ định cột nào để bắt đầu hiển thị phần tử. Người dùng có thể đặt cột bắt đầu theo ý muốn.

Cú pháp:

grid-column-start: column-line;

Ví dụ:

html 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | grid-column-start Property
    </title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-gap: 10px;
            background-color: lightgreen;
            padding: 10px;
        }
        
        .grid-container div {
            background-color: green;
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
            color: white;
        }
        
        .item1 {
            <!-- grid-column-start property 
                            with column-line value --!> 
          grid-column-start: 2;
        }
          
    </style>
</head>

<body>

    <center>
        <h1>
         The grid-column-start Property
        </h1>
        <h3>auto value</h3>
        <strong>the item will be placed following 
                            the initial flow</strong>
    </center>
    <div class="grid-container">
        <div class="item1">G</div>
        <div class="item2">e</div>
        <div class="item2">e</div>
        <div class="item3">k</div>
        <div class="item4">s</div>
        <div class="item5">f</div>
        <div class="item6">o</div>
        <div class="item6">r</div>
        <div class="item1">G</div>
        <div class="item2">e</div>
        <div class="item2">e</div>
        <div class="item3">k</div>
        <div class="item4">s</div>
    </div>

</body>

</html>

Đầu ra:

css-grid-column-start-property

Thuộc tính grid-column-start rất quan trọng để tạo bố cục lưới nâng cao trong thiết kế web hiện đại. Việc hiểu và sử dụng các giá trị của nó như auto span n và column-line giúp các nhà phát triển kiểm soát chính xác vị trí các phần tử lưới. Từ đó giúp tăng cường khả năng responsive và chức năng của các trang web.


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

  • Google Chrome 57.0
  • Edge 16.0
  • Mozilla Firefox 52.0
  • Safari 10.1
  • Opera 44.0

Last Updated : 21/07/2025