თვისება grid-template-columns

თვისება grid-template-columns განსაზღვრავს ცხრილის ელემენტის სვეტების რაოდენობას და სიგანეს. თვისება მითითებულია მშობელ ელემენტში და განსაზღვრავს შვილი ელემენტების სვეტების სიგანეს. თვისების მნიშვნელობაში ჩვენ მითითებთ სვეტების სიგანეს ნებისმიერ ზომის ერთეულში.

თვისებებში პიქსელებში მნიშვნელობების მითითებისას სვეტების ზომები ზუსტად მათ შეესაბამება. თუ ჩვენ მივუთითებთ სიტყვას auto, მაშინ სვეტები შეავსებენ ყველა ხელმისაწვდომ სივრცეს. ერთეულის fr (ფრაქცია) გამოყენება ნიშნავს, რომ მთელი სივრცე დაიყოფა თანაბარ წილებად. fr-ის უპირატესობა არის მისი ადაპტირებადობა სხვადასხვა კონტეინერების ან ეკრანის გარჩევადობის მიმართ, რადგან fr უბრალოდ ყოფს მათ მითითებულ ფრაქციების რაოდენობაზე პიქსელებში ზუსტი ზომის მითითების გარეშე.

სინტაქსი

სელექტორი {
	grid-template-columns: სვეტის სიგანე;
}

მაგალითი

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

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50px 100px 200px 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-columns: 100px auto 150px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

მაგალითი

ახლა კი თვისების grid-template-columns გამოყენებით გავაკეთოთ ისე, რომ პირველმა და მეორემ სვეტმა დაიკავოს კონტეინერის ერთი ნაწილი, ხოლო მესამე სვეტმა - სამი ნაწილი:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#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-columns: 1fr 0.5fr 2.5fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

მაგალითი

მოდით, თვისებაში grid-template-columns მივუთითოთ ფუნქცია repeat(), რომელიც კონტეინერს აცნობებს, რომ სამივე სვეტს უნდა ჰქონდეს ერთნაირი სიგანე:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	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>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 2fr;
	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>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#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-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#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-columns: repeat(auto-fill, 200px);
	border: 2px solid #696989;
	padding: 10px;
}
#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-columns: repeat(auto-fill, minmax(150px, 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-columns: repeat(auto-fit, minmax(150px, 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-columns: 50% 1fr 2fr 30%;
	border: 2px solid #696989;
	padding: 10px;
	width: 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-rows,
რომელიც განსაზღვრავს ცხრილის რიგების რაოდენობას და სიგანეს
თვისება grid-auto-columns,
რომელიც განსაზღვრავს იმპლიციტური ცხრილის სვეტების რაოდენობას და სიგანეს