CSS ցրիդների ներածություն

CSS ցրիդները տարրերը միաժամանակ հորիզոնական և ուղղահայաց տեղադրելու միջոց են: Սա ֆլեքսերից ավելի առաջադեմ միջոց է, բայց տիրապետելու համար ավելի բարդ:

Ցրիդ ստեղծելու համար անհրաժեշտ է տարրին նշանակել display հատկությունը grid արժեքով:

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

css#parent {
  display: grid;
}

Դրանից հետո տարրը կվերածվի երկչափ ցանցի, որում տարրերը տեղադրվում են ուղղահայաց (սյուներ) և հորիզոնական (տողեր): Սյունի և տողի հատման տարածքը կոչվում է բջիջ:

Հատուկ հատկությունների օգնությամբ հնարավոր կլինի տարրերը տեղադրել և՛ տողերով, և՛ սյուներով: Սա հեշտությամբ կթույլատրի ստեղծել, օրինակ, այսպիսի բաներ:

Հաջորդ դասերում մենք նախ կուսումնասիրենք տարրերի տեղադրումը սյուներով, ապա կանցնենք տողերի ուսումնասիրությանը, որից հետո կմիավորենք այդ ամենը միասին: