Procenat i fr jedinice u CSS gridovima
Takođe pored fr mogu se
koristiti vrednosti u %,
koje takođe određuju koji deo
kontejnera će kolona da zauzme.
Pritom će se prvo izračunati veličina
kolone u %, a preostali slobodni
prostor će se podeliti na frakcije:
<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: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Neka u vašem gridu postoje tri kolone.
Postavite tako da prva kolona
zauzima 20%, a preostale
dve kolone su iste veličine.
Neka u vašem gridu postoji pet kolona.
Postavite tako da prva
kolona zauzima 100px,
druga kolona 20%,
a preostale kolone dele preostali
prostor tako da svaka kolona
bude dva puta veća od prethodne.
