თვისება grid-template

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

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

სინტაქსი

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

მაგალითი

მოდით, თვისების grid-template-ის საშუალებით შევქმნათ ცხრილი:

<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: 1fr 1fr 1fr / 1fr 1fr 1fr;
	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: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 300px;
}
#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: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

ასევე იხილეთ

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