თვისება grid-template-rows
თვისება grid-template-rows განსაზღვრავს
რიგების რაოდენობას და სიგანეს, რომელსაც
დაიკავებს ელემენტი ქსელში ან გრიდში.
თვისების მნიშვნელობაში ჩვენ მივუთითებთ რიგების სიგანეს
ნებისმიერ ზომის ერთეულში.
თვისება მითითებულია მშობელ ელემენტში
და განსაზღვრავს შვილობილი ელემენტების რიგების სიგანეს.
თვისებებში პიქსელებში მნიშვნელობების მითითებისას
რიგების ზომები ზუსტად შეესაბამება მათ.
თუ ჩვენ მივუთითებთ სიტყვას auto, მაშინ რიგები
შეავსებენ ყველა ხელმისაწვდომ სივრცეს. ერთეულის fr (ფრაქცია) გამოყენება ნიშნავს,
რომ მთელი სივრცე დაიყოფა
ტოლ წილებად.
fr-ის უპირატესობაა მისი ადაპტირებადობა
სხვადასხვა კონტეინერების ან ეკრანის გარჩევადობის მიმართ,
რადგან fr უბრალოდ ყოფს მათ მითითებულ
ფრაქციების რაოდენობაზე პიქსელებში ზუსტი ზომის მითითების გარეშე.
სინტაქსი
სელექტორი {
grid-template-rows: რიგის სიგანე;
}
მაგალითი
მოდით დავაყენოთ რიგების სიგანე ჩვენი ელემენტებისთვის ქსელში:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50px 100px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
მაგალითი
მოდით პირველ და მესამე რიგს მივუთითოთ ფიქსირებული სიგანე პიქსელებში, ხოლო მეორე რიგმა ხელმისაწვდომი სივრცე ავტომატურად შეავსოს:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 100px auto 60px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
მაგალითი
ახლა კი თვისების grid-template-rows
გამოყენებით
გავაკეთოთ ისე, რომ პირველმა და მეორემ
რიგმა დაიკავოს კონტეინერის ერთი ნაწილი,
ხოლო მესამე რიგმა - სამი ნაწილი:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
მაგალითი
fr ერთეულებში მითითებული მნიშვნელობები
შეიძლება იყოს წილადი. მოდით შევცვალოთ
წინა მაგალითი, მივუთითოთ
მეორე და მესამე რიგებისთვის სიგანე
წილად რიცხვებში:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
მაგალითი
მოდით თვისებაში grid-template-rows
მივუთითოთ ფუნქცია repeat(),
რომელიც კონტეინერს აცნობებს, რომ ყველა
სამი რიგი უნდა ჰქონდეს ერთნაირი სიგანე:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
მაგალითი
ახლა კი მოდით შევცვალოთ წინა მაგალითი ისე, რომ სამ იდენტურ რიგს დაემატოს მეოთხე, რომელიც დაიკავებს კონტეინერის ორ ფრაქციას:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
მაგალითი
მოდით პირველ ორ რიგს დავაყენოთ სიგანე კონტეინერის ერთ ფრაქციაზე, ხოლო ბოლო ორ რიგს - ორ ფრაქციაზე:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
მაგალითი
ახლა მოდით დავაყენოთ რიგების სიგანე
ფუნქციის repeat() და თავისუფალი ერთეულების fr გამოყენებით
მითითებული მნიშვნელობების კომბინირებით:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
მაგალითი
ასევე ფუნქციაში repeat() შესაძლებელია მივუთითოთ
მნიშვნელობა auto-fill, რომელიც შეავსებს
ჩვენს კონტეინერს იდენტური რიგებით ჩვენთვის სასურველი სიგანით:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, 50px);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
მაგალითი
ძალიან მოსახერხებელია auto-fill-თან ერთად
მივუთითოთ ფუნქცია minmax,
რომელიც განსაზღვრავს რიგების სიგანის დიაპაზონს
მინიმალურიდან მაქსიმალურ მნიშვნელობამდე.
თუ კონტეინერის სიგანე ვერ ჩაატევს ყველა
რიგს, მაშინ ზოგიერთი მათგანი გადავა
ახალ ხაზზე, ამ შემთხვევაში რიგები ხაზში
თანაბრად გადანაწილდება მასში. მოდით შევცვალოთ
წინა მაგალითი, მივუთითოთ მასში ფუნქცია minmax:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
მაგალითი
ახლა მოდით მივუთითოთ თვისება auto-fit,
რომლის განსხვავება auto-fill-ისგან მდგომარეობს იმაში,
რომ ის არგებს რიგების რაოდენობას
კონტეინერის ხელმისაწვდომ სიგანეს, ფართოდებს ან
კუმშავს მათ:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
მაგალითი
ასევე fr-თან ერთად შესაძლებელია
გამოყენებული იყოს მნიშვნელობები %-ში, რომლებიც ასევე განსაზღვრავენ
კონტეინერის რა ნაწილს დაიკავებს რიგი.
ამ შემთხვევაში ჯერ გამოითვლება
რიგის ზომა %-ში, ხოლო დარჩენილი თავისუფალი სივრცე
დაიყოფა ფრაქციებად:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
მაგალითი
მოდით ერთად გამოვიყენოთ თვისებები
grid-template-columns და
grid-template-rows:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
მაგალითი
მოდით თვისებების
grid-template-columns და
grid-template-rows
გამოყენებით შევქმნათ ცხრა უჯრისგან შემდგარი ცხრილი, განლაგებული
სამ რიგში. ხოლო მეორე და მესამე რიგს ექნება ერთნაირი სიგანე,
ხოლო თითოეულ სვეტს - განსხვავებული სიგანე:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
მაგალითი
ახლა კი წინა მაგალითის ცხრილში ზედა რიგის სიგანე გავაკეთოთ ორ ფრაქციაზე, ხოლო პირველი სვეტი - ნახევარ ფრაქციაზე:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 2fr 1fr 1fr;
grid-template-columns: 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
იხილეთ აგრეთვე
-
თვისება
grid-template-columns,
რომელიც განსაზღვრავს ქსელში სვეტების რაოდენობას და სიგანეს -
თვისება
grid-auto-rows,
რომელიც განსაზღვრავს იმპლიციტურ ქსელში რიგების რაოდენობას და სიგანეს
