# Lack of CSS grid support makes complex layouts impossible **URL:** \ **Category:** Photoshop\ **Tags:** ui, feature-request, css\ **Created:** [October 27, 2021, 6:38am UTC](https://forums.creativeclouddeveloper.com/t/lack-of-css-grid-support-makes-complex-layouts-impossible/3802 "2021-10-27T06:38:34Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\ **Post date:** [October 27, 2021, 6:38am UTC](https://forums.creativeclouddeveloper.com/t/lack-of-css-grid-support-makes-complex-layouts-impossible/3802/1 "2021-10-27T06:38:34Z")
I’m back with panel layouts and CSS flex… Here’s [the example fiddle](https://jsfiddle.net/Karmalakas/qm72rkax/) Everything seems fine, except two issues: - Buttons in rows do not wrap (even if row has plenty of space at the bottom), unless row becomes full viewport width: - Buttons in columns do not shrink when viewport shrinks (if I make parent row of that column `display:block`, then buttons shrink 🤔): I believe with grid these wouldn’t be an issue. Any CSS gurus here? ---
**Author:** ![Jarda](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/jarda/32/1909_2.png) [@Jarda](https://forums.creativeclouddeveloper.com/u/Jarda)\ **Post date:** [October 27, 2021, 10:30am UTC](https://forums.creativeclouddeveloper.com/t/lack-of-css-grid-support-makes-complex-layouts-impossible/3802/2 "2021-10-27T10:30:50Z")
check `flex-wrap` and `flex-grow`, `min-height`, `max-height` also consider using media queries and assigning different styles to different panel widths. ---
**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\ **Post date:** [October 27, 2021, 10:42am UTC](https://forums.creativeclouddeveloper.com/t/lack-of-css-grid-support-makes-complex-layouts-impossible/3802/3 "2021-10-27T10:42:54Z")
> [@Jarda](#): > > check `flex-wrap` > and `flex-grow` , `min-height` , `max-height` I did and I’m already using these. Doesn’t help * * * > [@Jarda](#): > > also consider using media queries and assigning different styles to different panel widths. Can’t really do that, because buttons labels might be both short and very long, so it should just shrink, but it doesn’t in columns if column holders is flex row (shrinks if that row is `block`) ---
**Author:** ![kerrishotts](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kerrishotts/32/8_2.png) [@kerrishotts](https://forums.creativeclouddeveloper.com/u/kerrishotts)\ **Post date:** [October 27, 2021, 3:44pm UTC](https://forums.creativeclouddeveloper.com/t/lack-of-css-grid-support-makes-complex-layouts-impossible/3802/4 "2021-10-27T15:44:08Z")
It’s not clear to me what you want the layout to look like in your examples. What should the Button 5, 6, 8, and 9 areas look like? Also it might be useful to understand what this complex layout is trying to serve – what does the UI you’re trying to create look like? Flexbox is not Grid, and there are things one or the other is better at. That said, many complex layouts at Adobe and in 3P plugins have been accomplished with Flex and the existing layout models, but it may take some additional work when compared to Grid. This is why I’m asking for your desired UI layout – sometimes you may need to invoke more than just flexbox to get what you’re after. ---
**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\ **Post date:** [October 27, 2021, 4:05pm UTC](https://forums.creativeclouddeveloper.com/t/lack-of-css-grid-support-makes-complex-layouts-impossible/3802/5 "2021-10-27T16:05:44Z")
So in the first image, if I try to shrink viewport right past that width, Button 5 and 6 rows drop down bellow instead of wrapping buttons (like they do in second screenshot when row takes full viewport width). I’d want buttons to wrap if they can’t fit in a single row the same as what happens when row is in full viewport width. For the second image, Button 1/2/3/4/8 columns do not allow buttons to shrink like rows (5, 6, 9) do. Buttons labels should be truncated with ellipsis, like in rows, but instead they stay the same smallest size. I’m fine with adding some other solutions, but I need this to be responsive as much as possible with as less HTML as possible. I don’t see how media queries would help here, because buttons can have any length labels and rows/columns can have any number of buttons, which I don’t know… ---
**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\ **Post date:** [October 28, 2021, 3:22pm UTC](https://forums.creativeclouddeveloper.com/t/lack-of-css-grid-support-makes-complex-layouts-impossible/3802/6 "2021-10-28T15:22:40Z")
So… As for the row wrap I think there might not be a good way to solve this. As for the second part of the question - I’ve [updated the Fiddle](https://jsfiddle.net/Karmalakas/qm72rkax/) to make it as simple as possible. - **R** (Row) - Buttons shrink - **C** (Column) - Buttons shrink - **M** (Mixed) - Buttons in columns inside a row do not shrink Any idea about this one? ☹ ---
**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\ **Post date:** [October 28, 2021, 3:32pm UTC](https://forums.creativeclouddeveloper.com/t/lack-of-css-grid-support-makes-complex-layouts-impossible/3802/7 "2021-10-28T15:32:53Z")
```auto .column { min-width: 0; } ``` should solve the second problem. ---
**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\ **Post date:** [October 28, 2021, 3:35pm UTC](https://forums.creativeclouddeveloper.com/t/lack-of-css-grid-support-makes-complex-layouts-impossible/3802/8 "2021-10-28T15:35:15Z")
OMG, it does solve 😮 Thank you so much for such a simple solution Why would column (in a row specifically) have some default `min-width`? Never would’ve figured this out by myself If it were so simple with the first issue… 🙂 ---
**Author:** ![simonhenke](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/simonhenke/32/957_2.png) [@simonhenke](https://forums.creativeclouddeveloper.com/u/simonhenke)\ **Post date:** [October 28, 2021, 3:47pm UTC](https://forums.creativeclouddeveloper.com/t/lack-of-css-grid-support-makes-complex-layouts-impossible/3802/9 "2021-10-28T15:47:07Z")
> An initial setting on flex items is `min-width: auto` . This means that a flex item, by default, cannot be smaller than the size of its content. > > Therefore, `text-overflow: ellipsis` cannot work because a flex item will simply expand, rather than permit an overflow. (Scroll bars will not render either, for the same reason.) > > To override this behavior, use `min-width: 0` or `overflow: hidden` > I probably googled “flex child overflowing parent width” 10 times in my life already, because I always forget about this fix 😃 * * * **Regarding your first problem:** I don’t think either that there’s a solution for that, other than controlling the wrapping with media queries. If I understand the problem correctly, you have two wrapping elements which are “in competition” with each other. While resizing the viewport, the browser calculates the necessary space and checks it against the available space. Once there isn’t enough space, it has to decide whether it will wrap the outer container or the contents of the inner row. Unfortunately, there’s no way to set wrapping priority, so you can’t control the order in which elements wrap. I found [this example](https://jsfiddle.net/20sLc5hs/), which seems to show the opposite behavior of what your code does (inside wraps before outside). This makes me assume that wrapping simply happens in chronological order. ---
**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\ **Post date:** [October 28, 2021, 3:50pm UTC](https://forums.creativeclouddeveloper.com/t/lack-of-css-grid-support-makes-complex-layouts-impossible/3802/10 "2021-10-28T15:50:29Z")
Thank you so much for this detailed explanation. Will check that example and maybe I could make use of it 🙂