Uitlyning van 'n Individuele Element op Beide Asse van CSS-rooster

Jy kan 'n individuele element uitlyn simultaan op beide die horisontale en vertikale asse deur die eienskappe justify-self en align-self te kombineer.

Volgens die begin van horisontale en senter van vertikale

Laat ons die uitlyning vir ons eerste element instel volgens die begin van die horisontale en vertikale asse:

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

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  justify-self: start;
  align-self: center;
}

Результат:

Volgens die senter van horisontale en begin van vertikale

Laat ons nou die uitlyning van die eerste element instel volgens die senter van die horisontale en die begin van die vertikale asse:

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

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  justify-self: center;
  align-self: start;
}

Результат:

Volgens die einde van horisontale en senter van vertikale

Laat ons die uitlyning van die eerste element instel volgens die einde van die horisontale en die senter van die vertikale asse:

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

css#parent {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}
#elem1 {
  justify-self: end;
  align-self: center;
}

Результат:

Praktiese take

Задание 1

Skep 'n rooster wat uit ses elemente bestaan en plaas hulle in twee rye. Voer die uitlyning van die tweede element uit volgens die begin van die horisontale en die senter van die vertikale asse.

Задание 2

Plaas nou die roosterelemente in drie rye en stel die uitlyning van die derde element in volgens die senter van die horisontale en die einde van die vertikale asse.

Задание 3

Verander die vorige taak, sodat die uitlyning van die vierde element plaasvind volgens die einde van die horisontale en die senter van die vertikale asse.

Задание 4

Maak dit nou so dat die uitlyning van die vyfde element plaasvind volgens die begin van die horisontale en die begin van die vertikale asse, en die sesde element - volgens die einde van die horisontale en die senter van die vertikale asse.