I'm currently using the following grid-layout:
display: -ms-grid;
-ms-grid-columns: 400px 100px max-content 1fr 50px;
-ms-grid-rows: 1fr 1fr;
Which resembles this layout:
| <----------------- this has a fixed width --------------------------> |
+----------+----------+-------------------+-----------------+-----------+
|<- fix -> |<- fix -> | <--- growing ---> | <- shrinking -> | <- fix -> |
+----------+----------+-------------------+-----------------+-----------+
| | | max-width content | | |
+----------+----------+-------------------+-----------------+-----------+
Now, to be a bit more browser-supportig I could either use a polyfill or switch to flexbox layout (which is supported in most modern browsers). Is the above layout possible to do using flexbox?
To make this short:
It is imposible to create a layout based on the flexbox
layout-model which has more than one row and equal-sized "columns" if one or more of the cells have a dynaic width.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With