CSS grid-column-end Property

Description

The grid-column-end property determines how many columns an element will occupy, or on which row of the column the element will end. In order to determine from which column the element will be located in the grid layout, or how many columns the element will cover, you can use the grid-column-start property.

Initial value

auto

Applies to

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

Inherited

No

Media

Visual

Computed value

As specified

Animatable

Yes

CSS Version

CSS3

JavaScript syntax

object.style.gridColumnEnd

Syntax

grid-column-end: auto | line | line-name | span line

Values

• autoA keyword indicating that the property does not affect the placement of the element in the grid layout (automatic placement, automatic range, or default range of 1). This is the default value.
• lineAn integer that corresponds to the end face of an element in the grid layout (the counting of faces in the layout is carried out from left to right from the left edge of the element, a schematic display at the top of the page). If a negative integer is specified, then the count is in the reverse order, starting from the end edge of the explicit layout grid. A value of 0 is not valid.
• line-nameA string value that refers to a named column in a grid layout. The element is located to the initial face of the specified element.
• span lineThe span keyword with an integer that determines how many columns the grid element will span. If an integer is omitted, the default value is 1. A negative value or a value of 0 is not valid.

Example

<div class="grid-container">

   <div class="item-a">A</div>

   <div>B</div>

   <div>C</div>

   <div>D</div>

   <div>E</div>

   <div>F</div>

</div>

<div class="grid-container2">

   <div>A</div>

   <div class="item-b">B</div>

   <div>C</div>

   <div>D</div>

   <div>E</div>

   <div>F</div>

</div>

.grid-container,
.grid-container2 {
   display: grid; 
   margin-top: 5px; 
   padding: 10px;
   background: rgb(0,150,208);  
   grid-template-columns: [line1] 25%  [line2] 25%  [line3] 25%  [line4] 25%;
}
.grid-container > div,
.grid-container2 > div { 
   background: rgb(241,101,41); 
   border: 1px solid #000; 
   text-align: center; 
   padding: 20px 0; 
} 
.item-a {
   grid-column-end: 3;
   background: red !important; 
}
.item-b {
   grid-column-end: line4; 
   background: yellow !important;
}

Browser Support

Desktop
X	16	57	52	44	10.1
Tablets / Mobile
57	57	52	43	10.3	6.0

Last updated by CSSPortal on: 13th November 2019