Pixels og fr-enheder i CSS grids
Det er muligt at angive bredden af kolonner
samtidig i pixels og
fr:
<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: 100px 1fr 50px;
border: 2px solid #696989;
padding: 10px;
width: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Antag at dit grid har tre kolonner.
Gør så den første kolonne optager
100px, og de resterende
to kolonner har samme
størrelse.
Antag at dit grid har fire kolonner.
Gør så den første og den sidste
kolonne optager 100px,
og de resterende kolonner deler den tiloversstående
plads, så den tredje kolonne er 1.5
gange større end den anden.
