Миқдор ва паҳноии сутунҳо дар CSS Grids

Ошноӣ бо кори grid-ро мо аз он сар мекунем, ки миқдор ва паҳноии сутунҳоро таъин кунем, ки элементҳои фарзандӣ дар онҳо ҷойгир мешаванд. Барои ин мақсад мо аз хосияти grid-template-columns истифода мекунем, ки дар элементи волидайн таъин шуда ва миқдор ва паҳноии сутунҳоро муайян мекунад, ки элементҳои фарзандӣ дар grid ишғол мекунанд. Дар қимати хосият паҳноии сутунҳоро ба пиксел муайян мекунем.

Намуна

Биёед аввал элементҳои волидайн эҷод кунем ва онро grid-container кунем. Фарз мекунем, ки мо div дорем, ки дар он чор элементи фарзандӣ ҷойгир аст. Барои он дар хосияти display қимати grid таъин кунем, ва дар хосияти grid-template-columns паҳноиро барои ду сутун нависем:

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

Результат:

Намуна

Акнун биёед як ҷадвал эҷод кунем бо чор сутуни гуногун аз рӯи андоза сутунҳо:

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

Результат:

Машқҳои амалӣ