Egenskaben grid-column-end

Egenskaben grid-column-end angiver slutpositionen for et element i et grid eller et net op til en bestemt kolonne. Egenskabens værdi kan være et positivt eller negativt tal. Hvis vi angiver et positivt tal, tælles slutpositionen for elementet fra venstre mod højre. Ved angivelse af et negativt tal vil elementet placeres i omvendt rækkefølge, dvs. fra højre mod venstre.

En vigtig nuance ved egenskaben grid-column-end er, at nummeret på den angivne kolonne ikke inkluderes i slutpositionen for elementet - hvis vi angiver tallet 3, vil elementet kun optage den første og anden kolonne.

Syntaks

cssselektor {
  grid-column-end: positivt eller negativt tal;
}

Eksempel

Lad os angive slutpositioner for elementer i griddet:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#parent {
  display: grid;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

#elem1 {
  grid-column-start: 1;
  grid-column-end: 2;
}
#elem2 {
  grid-column-start: 1;
  grid-column-end: 3;
}
#elem3 {
  grid-column-start: 1;
  grid-column-end: 4;
}

Результат:

Eksempel

Og nu ved hjælp af egenskaben grid-column-start lad os sørge for, at det første, andet og tredje element placeres i den første række. Og det fjerde element indtager hele den anden række:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#parent {
  display: grid;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column-start: 1;
  grid-column-end: 2;
}
#elem2 {
  grid-column-start: 2;
  grid-column-end: 3;
}
#elem3 {
  grid-column-start: 3;
  grid-column-end: 4;
}
#elem4 {
  grid-column-start: 1;
  grid-column-end: 4;
}

Результат:

Eksempel

Ved overlapping af kolonner, som er optaget af tilstødende elementer, flyttes hvert efterfølgende element en række ned. Lad os ved hjælp af denne egenskab gøre så det første element placeres i den første række, det andet - i den anden, og det tredje og fjerde - i den tredje række:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#parent {
  display: grid;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column-start: 1;
  grid-column-end: 4;
}
#elem2 {
  grid-column-start: 2;
  grid-column-end: 3;
}
#elem3 {
  grid-column-start: 1;
  grid-column-end: 2;
}
#elem4 {
  grid-column-start: 3;
  grid-column-end: 4;
}

Результат:

Eksempel

Og lad os nu i egenskaben grid-column-end angive negative tal:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#parent {
  display: grid;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

#elem1 {
  grid-column-start: 1;
  grid-column-end: -4;
}
#elem2 {
  grid-column-start: 1;
  grid-column-end: -3;
}
#elem3 {
  grid-column-start: 1;
  grid-column-end: -2;
}

Результат:

Se også