CSS gridlerinde sütunlaryň sany we ini

Grid bilen işlemegiň tanyşygyny biz sütunlaryň sanyny we inini bellemek bilen başlarys, olar arkaly ýaňy elementler ýerleşdiriler. Bu maksat üçin biz grid-template-columns atlandyryjysyny ulanarys, ol ata elementde görkezilýär we gridde ýaňy elementleriň eýelemegi üçin sütunlaryň sanyny we inini kesgitleýär. Atlandyryjynyň bahasynda sütunlaryň inini pikselde görkezýäris.

Mysal

Ilki bilen ata element döretmeli we ony grid konteýner eden etmeli. Bizde dört sany ýaňy elementi bolan div bolsun. Üçin onuň display atlandyryjysyna grid bahasyny, grid-template-columns atlandyryjysyna bolsa iki sütun üçin inini ýazmaly:

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

css#parent {
  display: grid;
  grid-template-columns: 200px 400px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Mysal

Indi bolsa, dört sany dürli ölçegli sütuny bolan tablisany döretmeli:

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

css#parent {
  display: grid;
  grid-template-columns: 50px 100px 200px 250px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Amaly meseleler