გამოიწერე YouTube-ის არხიyoutube white icon svg გამოწერა

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

HTML, CSS-ის ინტენსიური კურსი

კურსის დასრულების შემდეგ შეძლებთ HTML CSS-ით ააწყოთ კომპლექსური ვებ გვერდები.

გაიგე მეტი

როგორ გამოვთვალოთ 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 მაქსიმალურ მნიშნველობას */
}

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

კომენტარები 0

საიტის აწყობა (ავტორიზაცია) საიტის აწყობა (რეგისტრაცია, პაროლის აღდგენა) საიტის აწყობა (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