CSS - grid-column Property

Quiz

CSS grid-column is a shorthand property used to control the placement of a grid item within the grid container in the column direction by specifying a line, a span, or relying on automatic placement. It is a shorthand for the individual grid-related properties: grid-column-start and grid-column-end

Syntax

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

Property Values

Value	Description
auto	It size of the elements depends on the content or available space.
grid-column-start	It specifies the start position of a grid item within the grid columns.
grid-column-end	It specifies on which column-line to stop showing the item or how many columns to span.

Examples of CSS Grid Column Property

The following examples explain the grid-column property with different values.

Grid Column Property with Auto Value

To let the size of the grid elements be determined automatically based on their content or the available space, we use the auto value. It allows the grid item to size itself according to its content or to fit within the available grid space. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 10px;
         padding: 10px;
         background-color: #f0f0f0;
      }

      .grid-item {
         background-color: lightcoral;
         border: 3px solid blue;
         padding: 20px;
         text-align: center;
         color: white;
         grid-column: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-column property
   </h2>
   <h4>
      grid-column: auto
   </h4>
   <div class="grid-container">
      <div class="grid-item">
         Item 1
      </div>
      <div class="grid-item">
         Item 2
      </div>
      <div class="grid-item">
         Item 3
      </div>
      <div class="grid-item">
         Item 4
      </div>
      <div class="grid-item">
         Item 5
      </div>
   </div>
</body>

</html>

Grid Column Property with Integer Values

To determines the size of the grid elements in terms of the columns of the grid container, we specify the starting column number and ending column number. Based on the specified values, the size of the element will be adjusted. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .grid-container {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 10px;
         padding: 10px;
         background-color: #f0f0f0;
      }

      .grid-item {
         background-color: lightcoral;
         border: 2px solid #ff6b6b;
         padding: 20px;
         text-align: center;
         color: white;
      }
      .items{
         border: 3px solid blue;
      }

      .item1 {
         grid-column: 1 / 3;
      }

      .item2 {
         grid-column: 2 / 4;
      }

      .item5 {
         grid-column: 2 / 5;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-column property
   </h2>
   <h4>
      grid-column: 1 / 3 (item1),
      2/4 (item2), 2/5 (item5)
   </h4>
   <p>
      item1- starts at column 1
      and ends at column 2
   </p>
   <p>
      item2- starts at column 2
      and ends at column 3
   </p>
   <p>
      item5- starts at column 2
      and ends at column 4
   </p>
   <div class="grid-container">
      <div class="grid-item item1 items">
         Item 1
      </div>
      <div class="grid-item item2 items">
         Item 2
      </div>
      <div class="grid-item">
         Item 3
      </div>
      <div class="grid-item">
         Item 4
      </div>
      <div class="grid-item item5 items">
         Item 5
      </div>
   </div>
</body>

</html>

Grid Column Property with Span Values

To determine the size of the grid elements, we can specify the number of columns space it will occupy by using span (e.g. span 2-element will take 2 columns space). This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>

   <style>
      .grid-container {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 10px;
         padding: 10px;
         background-color: #f0f0f0;
      }

      .grid-item {
         background-color: lightcoral;
         border: 2px solid #ff6b6b;
         padding: 20px;
         text-align: center;
         color: white;
      }
      .items{
         border: 3px solid blue;
      }

      .item1 {
         grid-column: span 3;
      }

      .item2 {
         grid-column: 2 / span 3;
      }

      .item5 {
         grid-column: 1 / span 4;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-column property
   </h2>
   <h4>
      grid-column:span 3 (item1), 
      2 / span 3 (item2), 1 / span 4 (item5)
   </h4>
   <p>
      item1- starts at column 1
      and spans 3 columns
   </p>
   <p>
      item2- starts at column 2
      and spans 3 columns
   </p>
   <p>
      item5- starts at column 1
      and spans 4 columns
   </p>
   <div class="grid-container">
      <div class="grid-item item1 items">
         Item 1
      </div>
      <div class="grid-item item2 items">
         Item 2
      </div>
      <div class="grid-item">
         Item 3
      </div>
      <div class="grid-item">
         Item 4
      </div>
      <div class="grid-item item5 items">
         Item 5
      </div>
   </div>
</body>

</html>

Supported Browsers

Property
grid-column	57	16	52	10	44

css_reference.htm

Print Page