Skip to content
CodeSweetly Logo CodeSweetly Logo CodeSweetly
Blog
Announcing the new Pro Zone. Check it out!

grid-column-end Property in CSS Grid Layouts

grid-column-end specifies where the selected grid item should end (or span) along the grid container’s row (inline) axis.

The grid-column-end property accepts the following values:

  • auto
  • <column-line-number>
  • span <number-of-columns>

Example 1: How to Auto-End the Selected Grid Item Following the Normal Column Flow

section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: orange;
  margin: 50px;
  min-height: 300px;
}


div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  padding: 20px;
  border-radius: 5px;
}


.grid-item1 {
  grid-column-end: auto;
}

Try Editing It

The snippet above used the auto value to auto-end grid-item1 according to the normal layout flow.

Example 2: How to End the Selected Grid Item at Column Line 3

section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: orange;
  margin: 50px;
  min-height: 300px;
}


div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  padding: 20px;
  border-radius: 5px;
}


.grid-item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Try Editing It

The snippet above used the grid-column-end property to end grid-item1 at column line 3.

Example 3: How to Span the Selected Grid Item across Two Columns

section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: orange;
  margin: 50px;
  min-height: 300px;
}


div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  padding: 20px;
  border-radius: 5px;
}


.grid-item1 {
  grid-column-start: 2;
  grid-column-end: span 2;
}

Try Editing It

The snippet above used the span 2 value to span grid-item1 across two columns.

Support CodeSweetly