CSS grid-column

The grid-column property is used to define the column start and end position of a grid item in grid layout, to place the item at desired position with specified number of columns (spaces/widths). For example:

HTML with CSS Code

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

   <div class="container">
      <div id="a">1</div>
      <div id="b">2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
   </div>
   
</body>
</html>

Output

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.

In above example, the CSS code can also be replaced with following CSS code:

.container {display: grid; gap: 4px; background-color: peru; color: whitesmoke;}
.container > div {background-color: maroon; padding: 10px; text-align: center;}
#a {grid-column: 1 / span 3;}
#b {grid-column: 1 / span 2;}

The output will be same.

CSS grid-column Syntax

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

grid-column: grid-column-start / grid-column-end;

The grid-column property is used as shorthand of following two CSS properties:

grid-column-start - used to define the starting column position of a grid item in grid layout
grid-column-end - used to span a grid item for specified number of columns. Or to define the ending column position of a grid item in grid layout

CSS Online Test

« Previous Tutorial Next Tutorial »