CSS grid-column-end egenskab

Definition og brug

grid-column-end-egenskaben bestemmer hvor mange kolonner projektet vil krydse, eller hvor projektet stopper ved en kolonnelinje (column-line).

Se eksemplerne i bunden af siden.

Se også:

CSS-turCSS-gitterlayout

Eksempel

Eksempel 1

Lad "item1" krydse tre kolonner:

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

Prøv det selv

Eksempel 2

Du kan bruge kolonnelinjeværdien i stedet for antallet af kolonner, projektet skal krydse:

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

Prøv det selv

CSS-syntaks

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

Egenskabsværdi

Værdi Beskrivelse
auto Standardværdi. Projektet vil krydse én kolonne.
span n Angiver antallet af kolonner, projektet vil krydse.
column-line Angiver hvor projektet stopper med at blive vist i kolonnen.

Tekniske detaljer

Standardværdi: auto
Arv: Nej
Animationsproduktion: Understøttet. Se venligst:Animationsrelaterede egenskaber.
Version: CSS Grid Layout Module Level 1
JavaScript-syntaks: object.style.gridColumnEnd="5"

Browserstøtte

Tabelens tal angiver den første browserversion, der fuldt ud understøtter denne egenskab.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44