რა არის 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 Items):

• 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 ან აბსოლუტური პოზიციონირების გამოყენებას.

.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-მდე */
}