CSS Grid'de Kesirli fr Birimleri
fr birimlerinde belirtilen değerler
kesirli formda olabilir. Haydi bir önceki
örneği, ikinci ve üçüncü sütunların genişliğini
kesirli sayılarla belirterek değiştirelim:
<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-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Grid'inizde üç sütun olduğunu varsayalım.
Üçüncü sütunun, birinci ve ikinci sütunun
1.5 katı kadar olmasını sağlayın.
Grid'inizde üç sütun olduğunu varsayalım.
İkinci sütunun birinci sütundan 1.5
kat, üçüncü sütunun ise birinci sütundan
2.5 kat daha büyük olmasını sağlayın.