CSS - grid-column-end

CSS grid-column-end property determines the column where a grid item should end by specifying a line, a span, or relying on automatic placement. It defines block-end edge of the grid area.

Syntax

grid-column-end: 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 end.

Examples of CSS Grid Column End Property

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

Grid Column End Property with Auto Value

To allow the grid item to end at the default position based on the item's content and the grid layout, we use the auto value. It automatically adjusts the end 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-end: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS grid-column-end property
   </h2>
   <h4>
      grid-column-end: 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 End 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-end: span 2;
      }

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

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

<body>
   <h2>
      CSS grid-column-end property
   </h2>
   <h4>
      grid-column-end: 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 End Property with Column Numbers

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

      .item3 {
         grid-column-end: 4;
      }

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

<body>
   <h2>
      CSS grid-column-end property
   </h2>
   <h4>
      grid-column-end: 3 (item1),
      4 (item3), 5 (item5)
   </h4>
   <p>
      item1- the display of the
      item ends at column 2
   </p>
   <p>
      item3- the display of the 
      item ends at column 3
   </p>
   <p>
      item5- the display of the 
      item ends at 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-end	57	16	52	10	44

css_reference.htm

Print Page