CSS Grid-də auto-fill dəyəri
Grid-konteynerin eyni sütunlarının ölçüsünü təyin etmək üçün
repeat funksiyasında
auto-fill dəyərini göstərmək çox rahatdır,
onun sayəsində
bizim konteynerimiz eyni sütunlarla
lazım olan eni ilə dolacaq.
Gəlin səkkiz elementdən ibarət cədvəl edək və
hər bir sütuna 200px eyni eni təyin edək.
Eyni zamanda, auto-fill dəyəri özü
lazım olan sütunların sayını hesablasın:
<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-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Sütunun enini 200px olaraq təyin edin.
Valideynin enini dəyişdirin və
sütunların sayının necə dəyişdiyinə
baxın.
