CSS | grid-column Property

Grid is a 2D (two dimensional) design pattern to handle grid-based user interfaces on the web. It describes the number of properties those allow to design grid structures and control the placement of grid items using CSS. It can be change the layout of grid items irrespective of their source order, which allows to move grid items around to cater for 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, property can be described in three ways:

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

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

  • Google Chrome 57.0
  • Internet Explorer 16.0
  • Mozila firefox 52.0
  • Safari 10.0
  • Opera 44.0


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.