CSS grid - 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.

Possible Values

  • auto − It automatically determines the position of the grid item within the grid layout. Deafult span of 1.

  • <custom-ident> − If there's a line labelled with '<custom-ident>-start' or '<custom-ident>-end,' the grid item will be positioned along that line.

    • When using named grid areas, implicit lines are created. The grid-column-end: foo; specifies the end edge of the named region, unless explicitly specified by lines such as foo-end.

  • <integer> && <custom-ident>? − If a name is given, only lines with that name are considered. If there are insufficient lines with that name, all grid lines are processed as if they have that name in order to determine the correct position. An <integer> value of 0 is not valid.

  • span && [ <integer> || <custom-ident> ] − When a name is specified as a custom-ident, only lines with that name get considered.If there insufficient lines with that name, we consider all the grid lines on the relevant side of the grid to have that name for counting purposes. If the <integer> is not specified, the default value is 1. Negative numbers or 0 are not allowed.

Applies to

Grid items and absolutely-positioned boxes whose containing block is a grid container.

DOM Syntax

object.style.gridColumnEnd = "auto|<custom-ident>|<integer> && <custom-ident>?|span && [ <integer> || <custom-ident> ]";

CSS grid-column-end - auto Value

The following example demonstrates that grid-column-end: auto property automatically places grid items in the same order in which they appear in the code −

<html>
<head>
<style>  
   .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      color: white;
      text-align: center;
      width: 360px;
      background-color: lightgreen;
   }
   .grid-container > div {
      background-color: red;
      border: 2px solid lightgreen;
      padding: 5px; 
   }
   .grid-column-item1 {
      grid-column-end: auto;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div class="grid-column-item1">Grid item 1</div>
      <div>Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
      <div>Grid item 5</div>
      <div>Grid item 6</div>
   </div>
</body>
</html>

CSS grid-column-end - <custom-ident>

The grid-template-columns: [a] 1fr [b] 1fr [c] 1fr [d] 1fr; property creates four columns named a, b, c, and d.

The following example demonstrates that grid-column-end: 4 property specifies that the end edge of the second grid item will end at the starting of the fourth column −

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: [a] 1fr [b] 1fr [c] 1fr [d] 1fr;
      grid-template-rows: auto;
      background-color: lightgreen;
      padding: 5px;
   }
   .grid-container > div {
      background-color: red;
      border: 2px solid blue;
      padding: 10px;
      text-align: center;
   }
   .grid-item {
      grid-column-end: d; 
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid Item 1</div>
      <div class="grid-item">Grid Item 2</div>
      <div>Grid Item 3</div>
      <div>Grid Item 4</div>
      <div>Grid Item 5</div>
      <div>Grid Item 6</div>
   </div>
</body>
</html>

CSS grid-column-end - <integer> && <custom-ident>?

The grid-template-columns: [a] 1fr [b] 1fr [a] 1fr [a]; property sets three columns named a, b.

The grid-column-end: 2 a; property, indicates that the first grid item ends at the second `a` named line, which is the third grid line.

The following diagram demonstrates the column layout with line:

column end

Here is an example −

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid-template-columns: [a] 1fr [b] 1fr [a] 1fr [a];
      grid-template-rows: auto;
      background-color: lightgreen;
      padding: 5px;
   }
   .grid-container > div {
      background-color: red;
      border: 2px solid blue;
      padding: 10px;
      text-align: center;
   }
   .grid-item {
      grid-column-end: 2 a; 
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div class="grid-item">Grid Item 1</div>
      <div>Grid Item 2</div>
      <div>Grid Item 3</div>
      <div>Grid Item 4</div>
   </div>
</body>
</html>

CSS grid-column-end - span Value

The following example demonstrates that grid-column-end: span 3 property specifies that the second grid item spans three columns −

<html>
<head>
<style>  
   .grid-container {
      display: grid;
      grid-template-columns: auto auto auto auto;
      color: white;
      text-align: center;
      background-color: lightgreen;
   }
   .grid-container > div {
      background-color: red;
      border: 2px solid lightgreen;
      padding: 5px; 
   }
   .grid-column-item2 {
      grid-column-end: span 3;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid item 1</div>
      <div  class="grid-column-item2">Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
      <div>Grid item 5</div>
      <div>Grid item 6</div>
   </div>
</body>
</html>
Advertisements