码农教程 - 一技在手,衣食无忧! tools

目录

CSS grid-column-end Property

❮ Previous Complete CSS Reference Next ❯

Example

Make "item1" span 3 columns:

.item1 {
  grid-column-end: span 3;
}
Try it Yourself »

Definition and Usage

The grid-column-end property defines how many columns an item will span, or on which column-line the item will end (see example at the end of this page).

Show demo ❯

Default value: auto
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridColumnEnd="5" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
grid-column-end 57 16 52 10 44

CSS Syntax

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

Property Values

Value Description Demo
auto Default value. The item will span one column Demo ❯
span n Specifies the number of columns the item will span Demo ❯
column-line Specifies on which column to end the display of the item Demo ❯

More Examples

Example

You can use column-line values instead numbers of columns to span:

.item1 {
  grid-column-end: 3;
}
Try it Yourself »

Related Pages

CSS tutorial: CSS Grid Layout


❮ Previous Complete CSS Reference Next ❯