Egenskaben grid-column-start

Egenskaben grid-column-start angiver startpositionen for et element i et grid eller et netværk efter kolonner. Værdien af egenskaben kan være et positivt eller negativt tal. Hvis vi angiver et positivt tal, tælles startpositionen 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.

Syntaks

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

Eksempel

Lad os angive startpositioner for elementer i grid'et:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</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;
}
#elem2 {
  grid-column-start: 2;
}
#elem3 {
  grid-column-start: 3;
}

Результат:

Eksempel

Og lad os nu i egenskaben grid-column-start 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;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column-start: -1;
}
#elem2 {
  grid-column-start: -2;
}
#elem3 {
  grid-column-start: -3;
}

Результат:

Eksempel

Og nu ved hjælp af egenskaben grid-column-end gør vi så, 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, forskydes hvert efterfølgende element en række ned. Lad os under hensyntagen til denne mulighed gøre sådan, at det første element placeres i den første række, det andet - i den anden, og det tredje og fjerde - indtager 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;
}

Результат:

Se også