Egenskapen grid-column-end

Egenskapen grid-column-end setter sluttposisjonen for et element i et grid eller et nett opp til en bestemt kolonne. Verdien til egenskapen kan være et positivt eller negativt tall. Hvis vi setter et positivt tall, regnes sluttposisjonen for elementet fra venstre til høyre. Ved å angi et negativt tall vil elementet plasseres i omvendt rekkefølge, dvs. fra høyre til venstre.

En viktig nyanse ved egenskapen grid-column-end er at nummeret på den angitte kolonnen ikke inkluderes i sluttposisjonen for elementet - hvis vi setter tallet 3, vil elementet bare oppta første og andre kolonne.

Syntaks

cssvelger {
  grid-column-end: positivt eller negativt tall;
}

Eksempel

La oss sette sluttposisjoner for elementene i gridet:

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

La oss nå ved hjelp av egenskapen grid-column-start gjøre slik at det første, andre og tredje elementet plasseres på første rad. Og det fjerde elementet opptar hele andre rad:

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 av kolonner som opptas av nærliggende elementer, vil hvert påfølgende element flyttes ned én rad. La oss ved hjelp av denne egenskapen gjøre slik at det første elementet plasseres på første rad, det andre - på andre, og det tredje og fjerde - på tredje rad:

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

La oss nå i egenskapen grid-column-end sette negative tall:

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å