CSS Grid vs Flex vs manually setting width

[b-zurg]

Dear users of react-collapse-pane,

There are a few possible approaches to the css layout chosen when implementing a resizing library.
Currently what is used is flex box with a flex-basis being set to the pixel width of the different box elements.
However it is also possible to do the following

1. Use grid layout and set grid-template-columns to be the pixel values of the different panes as fractional elements (e.g. grid-template-columns: 123fr 22fr;
2. Use block layout and manually set the width of the different elements

Question:

What would be the drawbacks and benefits of each approach, especially in terms of flexibility and performance?