Proprietatea justify-items

Proprietatea justify-items definește alinierea elementelor în interiorul celulelor grilei pe axa orizontală. Alinierea este cel mai ușor de observat la vizualizarea grilei în instrumentul de dezvoltare al browserului. Se aplică elementului părinte.

Sintaxă

cssselector {
  justify-items: flex-start | flex-end | center ;
}

Valori

Exemplul . Alinierea la începutul axei orizontale

Să aliniem elementele noastre în interiorul celulelor la începutul axei orizontale:

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

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

Результат:

Și acum să ne uităm la grila noastră în instrumentul de dezvoltare:

Exemplul . Alinierea la centrul axei orizontale

Să aliniem elementele noastre în celule la centrul axei orizontale:

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

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

Результат:

Conectând instrumentul de dezvoltare al browserului vom vedea grila noastră:

Exemplul . Alinierea la sfârșitul axei orizontale

Să aliniem elementele noastre la sfârșitul axei orizontale:

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

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

Результат:

Acum să ne uităm la grilă prin instrumentul de dezvoltare:

Vedeți și