Ինչ է CSS Grid-ը;

CSS Grid Layout (կամ պարզապես CSS Grid) — դա CSS-ում երկչափ համակարգ է։ Այն թույլ է տալիս կառավարել տարրերի տեղադրումը ինչպես տողերով (հորիզոնական), այնպես էլ սյուներով (վերտիկալ), ստեղծելով բարդ ցանցային կառուցվածքներ ինտերֆեյսների կառուցման համար։

Հիմնական կոնցեպցիաները CSS Grid-ի ներառում են՝

• Grid Container: Էлемент, որի վրա կիրառվում է display: grid կամ display: inline-grid հատկությունը։ Այս տարրի ժառանգները դառնում են Grid Items։
• Grid Items: Ուղիղ ժառանգներ Grid Container-ի։
• Grid Lines: Բաժանարար գծեր, որոնք ձևավորում են ցանցը։ Կարող են անվանվել կամ ունենալ թվային ինդեքս։
• Grid Tracks: Միջակայքը երկու գծերի միջև՝ դա կամ սյուն է, կամ տող։
• Grid Cells: Ամենափոքր միավորն է ցանցում, որը ձևավորվում է տողի և սյունակի հատման արդյունքում։
• Grid Areas: Ուղղանկյուն տարածք ցանցում, որը զբաղեցնում է մեկ կամ մի քանի բջիջ։

Հիմնական հատկությունները CSS Grid-ի հետ աշխատելու համար՝

Կոնտեյների համար՝

• display: grid | inline-grid;
• grid-template-columns: սահմանում է ցանցի սյուները։
• grid-template-rows: սահմանում է ցանցի տողերը։
• grid-template-areas: սահմանում է անվանված տարածքները։
• gap | row-gap | column-gap: սահմանում է բջիջների միջև անցքերը։
• justify-items | align-items | place-items: կենտրոնացնում է բջիջների պարունակությունը գլխավոր և հակառակ ուղղություններով։
• justify-content | align-content | place-content: կենտրոնացնում է ցանցի գծերը կոնտեյների մեջ։

Էլեմենտների համար՝

• grid-column-start | grid-column-end | grid-column: որոշում է, թե որ սյունային գծերը էлементն է զբաղեցնում։
• grid-row-start | grid-row-end | grid-row: որոշում է, թե որ տողային գծերը էлементն է զբաղեցնում։
• grid-area: նշանակում է անվանված տարածք կամ դիրքորոշում գծերով։
• justify-self | align-self | place-self: կենտրոնացնում է ինքը՝ տարրն իր բջիջում։

CSS Grid-ը հզոր միջոց է ստեղծելու ռեցեպտիվ և բարդ ձևավորումներ, ինչը զգալիորեն հեշտացնում է առաջացած խնդիրները, որոնք նախկինում պահանջում էին float, inline-block կամ absolute դիրքավորումը։

.container {
  display: grid; /* դարձնում ենք տարրն Grid կոնտեյներ */
  grid-template-columns: 1fr 1fr 1fr; /* ստեղծում ենք 3 նույն լայնության սյուններ */
  grid-template-rows: auto auto; /* ստեղծում ենք 2 տող ավտոմատ բարձրությամբ */
  gap: 10px; /* ավելացնում ենք անցքեր բջիջների միջև */
}

.item {
  /* տարրերը ավտոմատ դառնում են Grid Items */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* առաջին տարրը զբաղեցնում է 1-ից 3 սյունները */
}