display: grid; თვისება, რომელიც აუცილებელია ვიცოდეთ

display:grid; განლაგების მოდული გვთავაზობს გრიდზე დაფუძნებულ სისტემას, რომელიც შედგება სვეტებისა (columns) და რიგებისგან (rows)

HTML ელემენტი ხდება grid კონტეინერი, როდესაც მას CSS-ში გააჩნია display:grid; ან display:inline-grid; თვისება

ვერტიკალურ ხაზებს ეწოდება სვეტები(columns)
ჰორიზონტალურ ხაზებს ეწოდება რიგები(rows)
დაშორებებს სვეტებს(columns) და რიგებს(rows) შორის ეწოდება gap
ხაზებს სვეტებს და რიგებს შორის ეწოდება grid lines

.grid-container {
   display: grid;
   grid-column-gap: 50px; /* დაშორებები სვეტებს შორის */
   grid-row-gap: 50px; /* დაშორებები რიგებს შორის */
   grid-gap: 50px 100px; /* პირველი მნიშვნელობა აღნიშნავს grid-column-gap, მეორე grid-row-gap*/
 }

grid-template-columns

grid-template-columns თვისება აღნიშნავს grid-ში სვეტების რაოდენობას და სიგანეს.

მისი მნიშვნელობები ერთმანეთისგან გამოყოფილი უნდა იყოს ჰარით(space)-ით და მათი თითოეული მნიშნველობა წარმოადგენს სვეტის სიგანეს

თუ ჩვენ გვინდა რომ გრიდი შედგებოდეს 4 სვეტისგან, რომელთა სიგანეც გვინდა იყოს თანაბარი ჩანაწერი იქნება შემდეგი:

.grid-container {
   display: grid;
   grid-template-columns: auto auto auto auto; /* მოცემული სიტყვა auto წარმოადგესნ 1 სვეტს */
}

grid-template-rows

grid-template-row თვისება აღნიშნავს რიგების სიმაღლეს grid კონტეინერში

.grid-container {
   display: grid;
   grid-template-rows: 80px 200px; /* თვითეული მნიშვნელობა წარმოადგენს რიგს */
}

Grid item

grid item ეწოდება display:grid კონტეინერში მოთავსებულ ელემენტს.

grid-column თვისების დახმარებით ჩვენ შეგვიძლია grid-items ვუთხრათ თუ რამდენი სვეტი დაიკავოს გრიდ კონტეინერში, ამისთვის ჩვენ შეგვიძლია მივუთითოთ grid lines (გრიდის ხაზები) დასაწყისი და დასასრული

თუ მივუთითებთ მაგალითად: grid-column: 1 / 5 გრიდი შეივსება 1-დან 5-მდე

თუ მივუთითებთ მაგალითად: grid-column: 1 / span 5 გრიდი შეივსება 1-დან 5-ის ჩათვლით

.item1 {
   grid-column: 1 / 5; /* grid item შეავსებს სვეტებს 1-დან 5-მდე */
}

grid-template-areas

grid-template-areas თვისების დახმარებით ჩვენ შეგვიძლია გრიდ კონტეინერში სვეტებს მივანიჭოთ ჩვენთვის სასურველი სახელები

მაგალითი 1

.item1 {
   grid-area: myArea;
}
.grid-container {
   grid-template-areas: 'myArea myArea myArea myArea myArea';
}

წერტილები წარმოადგენენ გრიდებს სახელის გარეშე

.item1 {
   grid-area: myArea;
}
.grid-container {
   grid-template-areas: 'myArea myArea . . .';
}

თვისება	მნიშვნელობა
column-gap	განსაზღვრავს სვეტებს შორის დაშორებებს
gap	შემოკლებული ვერსია row-gap-ის და row-column-ის თვისებების
grid	შემოკლებული ვერსია grid-template-rows, grid-template-column, grid-template-areas, grid-auto-rows, grid-auto-columns და grid-auto-flow თვისებების
grid-area	ან განსაზღვრავს სახელს grid item-ისთვის, ან გამოიყენება, როგორც შემოკლებული ვერსია grid-row-start, grid-column-start, grid-column-start, grid-row-end და grid-column-end-ის თვისებებისთვის
grid-auto-columns	განსაზღვრავს სვეტის საწყის მნიშვნელობას (default values)
grid-auto-flow	განსაზღვრავს თუ როგორ უნდა ჩაისვას გრიდში grid-item
grid-auto-rows	განსაზღვრავს რიგის საწყის მნიშვნელობას (default row size)
grid-column	შემოკლებული ვერსია grid-column-start-ის და grid-column-end-ის
grid-column-end	განსაზღვრავს თუ სად უნდა დასრულდეს grid-item
grid-column-gap	განსაზღვრავს სვეტებს შორის დაშორებას
grid-column-start	განსაზღვრავს თუ საიდან უნდა დაიწყოს grid-item
grid-gap	შემოკლებული ვერსია grid-row-gap-ის და grid-column-gap თვისებების
grid-row	შემოკლებული ვერსია grid-row-start-ის და grid-row-end-ის თვისებების
grid-row-end	განსაზღვრავს თუ სად უნდა დასრულდეს გრიდ აითემი (grid item)
grid-row-gap	განსაზღვრავს რიგებს (row) შორის დაშორებას
grid-row-start	განსაზღვრავს თუ სად უნდა დაიწტოს გრიდ აითემი (grid item)
grid-template	შემოკლებული ვერსია grid-template-row, grid-template-columns და grid-area თვისებების
grid-template-areas	განსაზღვრავს თუ როგორ გამოჩნდეს სვეტები და რიგები მათი სახელების მიხედვით
grid-template-columns	განსაზღვრავს სვეტის ზომას და თუ რამდენი სვეტი უნდა იტოს გრიდის განლაგებაში
grid-template-rows	განსაზღვრავს რიგების ზომას გრიდის განლაგებაში
row-gap	განსაზღვრავს დაშორებებს რიგებს შორის