Jobs Hub

CSS grid-column-start

The CSS grid-column-start property is used to define the starting column position of a grid item in grid layout. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div.container {display: grid; gap: 4px; background-color: peru; color: whitesmoke;
                     grid-template-columns: auto auto auto auto;}
      div.container > div {background-color: maroon; padding: 10px; text-align: center;}
      #myIdOne {grid-column-start: 3;}
   </style>
</head>
<body>

   <div class="container">
      <div id="myIdOne">A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
      <div>G</div>
   </div>
   
</body>
</html>
Output
A
B
C
D
E
F
G

Note - The grid as the value of display property, is used to make an element as a block level grid container.

Note - The gap property is used to define the gap between rows and columns in grid layout.

Note - The grid-template-columns is used to define the number of columns to create in grid layout.

CSS grid-column-start Syntax

The syntax of grid-column-start property in CSS, is:

grid-column-start: auto|span n|columnLineNumber;

The auto is the default value of grid-column-start property.

CSS grid-column-start: span n Example

The span n is used to span particular grid item for n number of columns. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div.container {display: grid; gap: 4px; background-color: peru; color: whitesmoke;
                     grid-template-columns: auto auto auto auto;}
      div.container > div {background-color: maroon; padding: 10px; text-align: center;}
      #myIdOne {grid-column-start: span 3;}
   </style>
</head>
<body>

   <div class="container">
      <div id="myIdOne">A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
      <div>F</div>
      <div>G</div>
   </div>
   
</body>
</html>
Output
A
B
C
D
E
F
G

The only thing I've changed in this example, from previous one is: I've replaced the following CSS code:

grid-column-start: 3;

with

grid-column-start: span 3;

grid-column-start: n Vs. grid-column-start: span n

The grid-column-start: n; is used to place a particular grid item at nth column. Whereas grid-column-start: span n; is used when we need to span the particular grid item for the next n columns.

Note - The value of n should be a number such as 1, 2, 3, etc.

CSS grid-column-start Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div.container {display: grid; gap: 4px; background-color: peru; color: whitesmoke;
                     grid-template-columns: auto auto auto auto;}
      div.container > div {background-color: maroon; padding: 10px; text-align: center;}
      #a {grid-column-start: span 4;}
      #c {grid-column-start: span 3;}
      #g {grid-column-start: 2;}
      #j {grid-column-start: span 4;}
   </style>
</head>
<body>

   <div class="container">
      <div id="a">A</div>
      <div id="b">B</div>
      <div id="c">C</div>
      <div id="d">D</div>
      <div id="e">E</div>
      <div id="f">F</div>
      <div id="g">G</div>
      <div id="h">H</div>
      <div id="i">I</div>
      <div id="j">J</div>
   </div>
   
</body>
</html>
Output
A
B
C
D
E
F
G
H
I
J

CSS Online Test

« Previous Tutorial Next Tutorial »