Zarovnání na obou osách uvnitř buněk CSS gridu

Je možné současně nastavit zarovnání prvků uvnitř buněk gridu jak na horizontální, tak na vertikální ose. Pro tento účel můžeme zkombinovat dvě vlastnosti justify-items a align-items, které se nastavují v rodičovském elementu.

Na střed os

Pojďme zarovnat naše prvky na střed horizontální a vertikální osy:

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

Результат:

Nyní se podívejme na náš grid v ladicím nástroji:

Na začátek horizontální a konec vertikální

Pojďme umístit naše prvky v buňkách na začátek horizontální a konec vertikální osy:

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

Результат:

Nyní se podívejme na náš grid v ladicím nástroji:

Na konec horizontální a začátek vertikální

Pojďme umístit naše prvky v buňkách na konec horizontální a začátek vertikální osy:

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

Результат:

Nyní se podívejme na náš grid v ladicím nástroji:

Praktické úlohy