Мӯҳтавои ҳамворкунӣ дар меҳвари уфуқӣ дар CSS Grid

Дар grid на танҳо ҷойгир кардан, балки ҳамвор кардани мӯҳтаво дар тири меҳвари уфуқии grid низ лозим мешавад. Дар ин ҳолат, мо аз хусусияти justify-content истифода мебарем, ки дар унсури волидайн муайян карда мешавад. Биёед дар мисолҳо бинем, ки ин хусусият чӣ гуна кор мекунад.

Дар оғози меҳвар

Ҳамворкуниро барои унсурҳои мо дар оғози меҳвари уфуқӣ муқаррар мекунем:

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-content: start;
  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;
}

Результат:

Дар маркази меҳвар

Ва акнун ҳамворкуниро барои унсурҳои мо дар маркази меҳвари уфуқӣ муқаррар мекунем:

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

Результат:

Дар охири меҳвар

Биёед ҳамворкуниро барои унсурҳои мо дар охири меҳвари уфуқӣ муқаррар кунем:

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

Результат:

Масъалаҳои амалӣ