CSS Grid-də auto-fit dəyəri

İndi isə auto-fit dəyərinə nəzər salaq, hansı ki, eyni ölçülü sütunları təyin edərkən repeat funksiyası ilə birlikdə tətbiq olunur. Onun auto-fill dəyərindən fərqi ondadır ki, auto-fit sütunların sayını konteynerin mövcud eninə uyğunlaşdırır, onları genişləndirir və ya sıxır.

Nümunə

Gəlin auto-fit dəyərinin işini səkkiz elementli konteyner nümunəsində araşdıraq. auto-fit dəyəri ilə yanaşı, əvvəlki dərsdən tanış olduğunuz minmax funksiyasını tətbiq edək:

<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>

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Nümunə

İndi isə grid konteynerinin enini 400px-ə qədər azaldaq:

<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>

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Praktiki tapşırıqlar

Tutaq ki, sizin doqquz elementdən ibarət cədvəliniz var. auto-fit dəyərindən istifadə edərək onlar üçün elə sütun eni və grid konteynerinin eni təyin edin ki, bütün uşaq elementlər üç sırada yerləşsin.

İndi isə əvvəlki tapşırığı elə dəyişin ki, bütün elementlər iki sırada yerləşsin.