Pixels and fr units in CSS grids
You can set the width of columns in pixels and fr at the same time:
<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;
}
:
Let's say you have three columns in your grid. Make the first column 100px, and make the other two columns the same size.
Let's say you have four columns in your grid. Make the first and last columns take up 100px, and the remaining columns divide the remaining space so that the third column is 1.5 times the size of the second.
