გამოიწერე YouTube-ის არხიyoutube logoგამოწერა

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 თვისების დახმარებით ჩვენ შეგვიძლია გრიდ კონტეინერში სვეტებს მივანიჭოთ ჩვენთვის სასურველი სახელები

.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 განსაზღვრავს დაშორებებს რიგებს შორის

კურსში შემავალი თემები

🔗 HTML🔗 CSS🔗 grid

დამატებითი რესურსები

სხვა კატეგორიები

შეისწავლეთ ვებდეველოპმენტის ენები სრულიად უფასოდ, ისეთები როგორებიცაა Javascript, HTML, CSS და კიდევ სხვა მრავალი ენა

ბოლოს დაწერილი ბლოგები პროგრამირებაზე

ქვემოთ მოცემულია უახლესი 3 ბლოგი პროგრამირების თემატიკასთან დაკავშირებით