CSS grid-column-start Property
The grid-column-start property defines on which column line item will start. There are different values for the grid-column-start property, with the different value user can start from anywhere. There is a specific value that is effected on the same naming block as well.
Syntax:
grid-column-start: auto|span n|column-line;
Default Value:
- auto
Property Values:
auto: A keyword specifying that the property contributes nothing to the grid item’s placement. The Default value, the item will be placed following the flow
- Syntax:
grid-column-start: auto;
- Example:
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> |
- Output:
span n: A keyword Specifies the number of columns the item will span and if the name is given as a, only lines with that name are counted
- Syntax:
grid-column-start: span n;
- Example:
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> |
- Output:
column-line: A keyword Specifies on which column to start the display of the item, user can set the starting column.
- Syntax:
grid-column-start: column-line;
- Example:
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> |
- Output:
Supported Browser: The browser supported by grid-column-start Property are listed below:
- Google Chrome 57.0
- Edge 16.0
- Mozilla Firefox 52.0
- Safari 10.1
- Opera 44.0
Please Login to comment...