Уласцівасць grid-column-start

Уласцівасць grid-column-start задае пачатковую пазіцыю элемента ў грідзе або сетцы па слупках. Значэннем уласцівасці можа быць дадатных або адмоўны лік. Калі задаем дадатных лік, то пачатковая пазіцыя элемента адлічваецца злева направа. Пры ўказанні адмоўнага ліка элемент будзе размяшчацца ў адваротным парадку, г.зн. справа налева.

Сінтаксіс

cssселектар {
  grid-column-start: дадатных або адмоўны лік;
}

Прыклад

Давайце зададзім элементам у грідзе пачатковыя пазіцыі:

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;
}

Результат:

Прыклад

А цяпер давайце ў уласцівасці grid-column-start укажам адмоўныя лікі:

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;
}

Результат:

Прыклад

А цяпер з дапамогай уласцівасці grid-column-end робім так, каб першы, другі і трэці элементы размяшчаліся ў першым шэрагу. А чацвёрты элемент займаў увесь другі шэраг:

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;
}

Результат:

Прыклад

Пры перакрыцці слупкоў, якія займаюцца суседнімі элементамі, кожны наступны элемент зрушваецца на шэраг ніжэй. Давайце з улікам гэтай магчымасці зробім так, каб першы элемент размясціўся ў першым шэрагу, другі - у другім, а трэці і чацвёрты - занялі трэці шэраг:

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;
}

Результат:

Глядзіце таксама