Open In App
Related Articles

CSS grid-column Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

Grid is a 2D (two dimensional) design pattern to handle grid-based user interfaces on the web. It describes the number of properties that allow to design of grid structures and control the placement of grid items using CSS. It can change the layout of grid items irrespective of their source order, which allows moving grid items around to cater to these varying contexts without having to modify the underlying markup.

Syntax: 

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

Property Values: The grid-column-start and grid-column-end, properties can be described in three ways:

  • auto: The element will be placed in the default flow. It is the default value.
  • span n: It specifies the number of columns the item will span in grid-column-start and grid-column-end in both cases.
  • column-line: It describes on which column to start and display the item in case of grid-column-start and the column on which to end the display of the item for grid-column-end.

Example 1: This example describes the grid-column: auto property.

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>

                    

Output:

Example 2: This example describes the grid-column: column-line property. 

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>

                    

Output: 

Example 3: This example describes the grid-column: span n property. 

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>

                    

Output:

Supported Browsers: The browser supported by grid-column property are listed below:

  • Google Chrome 57.0 and above
  • Edge 16.0 and above
  • Mozilla Firefox 52.0 and above
  • Safari 10.1 and above
  • Opera 44.0 and above
  • Internet Explorer not supported


Last Updated : 09 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads