Zarovnanie po oboch osiach vo vnútri buniek CSS gridu

Je možné súčasne nastaviť zarovnanie prvkov vo vnútri buniek gridu aj po horizontálnej, aj po vertikálnej osi. Na tento účel môžeme kombinovať dve vlastnosti justify-items a align-items, ktoré sa nastavujú v nadradenom prvku.

Na stred osí

Zarovnajme naše prvky na stred horizontálnej a vertikálnej osi:

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

css#parent {
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  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;
}

Результат:

Teraz sa pozrime na náš grid v nástroji na vývojárske účely:

Na začiatok horizontálnej a koniec vertikálnej

Umiestnime naše prvky v bunkách na začiatok horizontálnej a koniec vertikálnej osi:

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

css#parent {
  display: grid;
  justify-items: start;
  align-items: end;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  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;
}

Результат:

Teraz sa pozrime na náš grid v nástroji na vývojárske účely:

Na koniec horizontálnej a začiatok vertikálnej

Umiestnime naše prvky v bunkách na koniec horizontálnej a začiatok vertikálnej osi:

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

css#parent {
  display: grid;
  justify-items: end;
  align-items: start;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  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;
}

Результат:

Teraz sa pozrime na náš grid v nástroji na vývojárske účely:

Praktické úlohy