CSS - grid-column-start Property

Quiz

CSS grid-column-start property defines the starting position of a grid item within the grid columns by specifying a line, a span, or relying on automatic placement. It defines block-start edge of the grid area.

Syntax

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

Property Values

Value	Description
auto	It automatically determines the position of the grid item within the grid layout. Deafult span of 1.
span n	It specifies the number of columns space taken by the element.
column-line	It specifies the column on which the display of the element must start.

Examples of CSS Grid Column Start Property

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

Grid Column Start Property with Auto Value

To allow the grid item to start at the default position based on the item's content and the grid layout, we use the auto value. It automatically adjusts the start line based on how much space the item needs and its current placement within the grid. 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-start: auto;
      }
   </style>
</head>

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

</html>

Grid Column Start Property with Span Values

To make the the grid item extend from its starting line and span across n number of columns, we specify the number of columns with the span (e.g. span 2- the element spans 2 columns from the starting line). 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-start: span 2;
      }

      .item3 {
         grid-column-start: span 3;
      }

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

<body>
   <h2>
      CSS grid-column-start property
   </h2>
   <h4>
      grid-column-start: span 2 (item1),
      span 3 (item3), span 4 (item5)
   </h4>
   <p>
      item1- the element takes 
      2 columns space
   </p>
   <p>
      item3- the element takes 
      3 columns space
   </p>
   <p>
      item5- the element takes 
      4 columns space
   </p>
   <div class="grid-container">
      <div class="grid-item item1 items">
         Item 1
      </div>
      <div class="grid-item">
         Item 2
      </div>
      <div class="grid-item item3 items">
         Item 3
      </div>
      <div class="grid-item">
         Item 4
      </div>
      <div class="grid-item item5 items">
         Item 5
      </div>
   </div>
</body>

</html>

Grid Column Start Property with Column Numbers

To set the grid item's start line explicitly at some column line number where the item should start, we specify the column number (e.g. 4 - the element must be displayed from column 4). 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-start: 2;
      }

      .item3 {
         grid-column-start: 3;
      }

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

<body>
   <h2>
      CSS grid-column-start property
   </h2>
   <h4>
      grid-column-start: 2 (item1),
      3 (item3), 4 (item5)
   </h4>
   <p>
      item1- the element starts 
      showing from column 2
   </p>
   <p>
      item3- the element starts 
      showing from column 3
   </p>
   <p>
      item5- the element starts 
      showing from column 4
   </p>
   <div class="grid-container">
      <div class="grid-item item1 items">
         Item 1
      </div>
      <div class="grid-item">
         Item 2
      </div>
      <div class="grid-item item3 items">
         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-start	57	16	52	10	44

css_reference.htm

Print Page