fb pixel
გამოიწერე YouTube-ის არხიyoutube logoგამოწერა
val-do.com-ის ლოგო
კურსებიბლოგირეზიუმეებიხ.დ.კ.წესებიკონტაქტიკონვერტორებიფინანსებიჩვევები

კურსებიბლოგირეზიუმეებიხ.დ.კ.წესებიკონტაქტიკონვერტორებიფინანსებიჩვევები
შესვლა
  1. მთავარი
  2. კურსები
  3. HTML, CSS-ის საწყისი კურსი, დამწყებთათვის (deprecated - მოძველებული)
  4. display:grid-ის საზომი ერთეულები fr-ები (fractions)
display:grid-ის საზომი ერთეულები fr-ები (fractions)

display:grid-ის საზომი ერთეულები fr-ები (fractions)

როგორ გამოვთვალოთ 1fr შემდეგი ტიპის გრიდ კონტეინერში

  1. ვაჯამებთ fr-ების რაოდენობას 1fr + 1fr + 2fr = 4fr
  2. 1fr-ის პროცენტულობის გამოთვლა 1(fr)/4(fr-ების ჯამური რაოდენობა)*100=25%
  3. 2fr-ის პროცენტულობის გამოთვლა 2(fr)/4(fr-ების ჯამური რაოდენობა)*100=50%
.grid-container {
    grid-template-columns: 1fr 1fr 2fr;
}
/* 
    1fr + 1fr + 2fr = 4fr
    1fr = 1/4*100 = 25% (1fr-ის %-ის გამოთვლა)
    2fr = 2/4*100 = 50% (2fr-ის %-ის გამოთვლა)
*/

repeat()-ის გამოყენების წესი:

.grid-container {
    grid-template-columns: repeat(5, 1fr); /* 1fr გამეორდება 5-ჯერ */
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* იგივეა რაც repeat(5, 1fr) */
}

minmax()-ის გამოყენების წესი:

.grid-container {
    grid-template-columns: minmax(0, 1fr); /* 0 წარმოადგენს მინიმალურ მნიშვნელობას, 1fr მაქსიმალურ მნიშნველობას */
}

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

🔗 CSS🔗 HTML🔗 grid

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

  • Telegram
  • Discord

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

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

HTML, CSS-ის სა...

HTML, CSS-ის საწყისი კურსი, დამწყებთათვის (deprecated - მოძველებული)

ჯავასკრიპტის კუ...

ჯავასკრიპტის კურსი

JavaScript-ის D...

JavaScript-ის DOM-ის კურსი

TypeScript-ის კ...

TypeScript-ის კურსი

Angular-ის კურს...

Angular-ის კურსი

HTML, CSS-ის კუ...

HTML, CSS-ის კურსი

Reactjs-ის კურს...

Reactjs-ის კურსი დამწყებთათვის

ალგორითმები...

ალგორითმები

Node.js-ის კურს...

Node.js-ის კურსი

Dart-ის კურსი...

Dart-ის კურსი

C პროგრამირების...

C პროგრამირების ენის საფუძვლები

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

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

Habit Tracker —...

Habit Tracker — პატარა ჩვევები, რომლებიც დიდ შედეგებს ქმნის

აკონტროლეთ თქვე...

აკონტროლეთ თქვენი ფული მარტივად და გააზრებულად

როგორ ინახება ი...

როგორ ინახება ინფორმაცია. რა არის Bit და Byte?

  • საიტის აწყობა (ავტორიზაცია)
  • საიტის აწყობა (რეგისტრაცია, პაროლის აღდგენა)
  • საიტის აწყობა (header, nav, footer), ცოტა რამ display:flex-ზე
  • საიტის აწყობა, როგორ მუშაობს CSS flexbox (display: flex;)
  • საიტის აწყობა (ბლოგის გვერდი, ნაწილი #1)
  • Git-ის დაყენება Windows-ზე
  • Linux-ის ძირითადი ბრძანებები ვებ-დეველოპმენტისთვის
  • CSS position property, ვისწავლოთ CSS პოზიციები
  • ფონტების მიბმა საიტზე, როგორ მივაბათ ფონტები
  • CSS @import and CSS variables, იმპორტი და ცვლადები CSS-ში
  • html tables, ცოტა რამ ცხრილების შესახებ
  • როგორ შევქმნათ და ავტვირთოთ პროექტი Git-ზე
  • ბლოგის გვერდი #2, ვაწყობთ ქარდებს
  • display: grid; თვისება, რომელიც აუცილებელია ვიცოდეთ
  • display:grid-ის საზომი ერთეულები fr-ები (fractions)
  • ბლოგის ლისტის გვერდის დასრულება display:grid-ის დახმარებით
  • ბლოგის დეტალური გვერდის დასრულება
  • კონტაქტის გვერდის დასრულება
  • დახმარების გვერდის დასრულება
  • საიტის აწყობა: ცოტა რეფაქტორინგი და ბოქსმოდელის განხილვა
  • საიტის აწყობა: პირელი ნაბიჯები რესპონსივ დიზაინში
  • საიტის აწყობა: რესპონსივი, მთავარი გვერდი
  • საიტის აწყობა: მობილური ნავიგაცია
  • როგორ გავასწოროთ HTML ელემენტი ცენტრში
  • როგორ გავაკეთო dark theme
პროგრამირების კურსები
HTML, CSSJavaScriptTypeScriptAngularReactJSNodeJSC

დიზაინ სისტემა

© val-do.com 2026 წელი - ყველა უფლება დაცულია

11 აგვისტო, 2026, 8:57:23

ვერსია 0.4.57