Belynning binne CSS-rooster-selle op die horisontale as

Om elemente binne roosterselle uit te lijn, d.w.s. gebiede wat ontstaan by die kruising van kolomme en rye, word die eienskap justify-items gebruik, wat in die ouerelement gespesifiseer word. Die belynning is die duidelikste wanneer die rooster in die blaaier se ontfoutingsprogram bekyk word.

Volgens die begin van die as

Laat ons ons elemente binne die selle volgens die begin van die horisontale as belyn:

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);
  grid-gap: 10px;
  padding: 10px;
  height: 200px;
  width: 400px;
  border: 2px solid #696989;
}
#parent > div {
  grid-gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

Laat ons nou na ons rooster kyk in die ontfoutingsprogram:

Volgens die middel van die as

Laat ons ons elemente in die selle volgens die middel van die horisontale as belyn:

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

Результат:

Laat ons nou na ons rooster kyk in die ontfoutingsprogram:

Volgens die einde van die as

Laat ons ons elemente volgens die einde van die horisontale as belyn:

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

Результат:

Laat ons nou na ons rooster kyk in die ontfoutingsprogram:

Praktiese take