css-grid | Guia de CSS Grid Layout con proyecto demostrativo , en el | Grid library

I basically have the question as this one, except that every answer seems to think the OP wants the container .row element to grow to effectively have width: 100% (which they never state that they want, but nor have they corrected the assumption of any of the answers). This question also seems to be similar, if not the same, as mine, but has no accepted answer and the upvoted answer didn't work for me.

I'm trying to achieve sibling elements in a row where each sibling's width is the width of the widest sibling (auto-fit to its contents), but crucially where the parent row element itself does not grow to 100% of its own parent but rather grows only to the total combined width of its children.

I've tried dozens of suggestions without any success. Here's what I consider the closest I've managed:

I have this css-grid example...

I was wondering if I could use css-grid or something as simple to limit the width of my content in a superwide screen but then allow it to show full width in smaller screens.

I don't want to use media queries.

Here is my jsfiddle

My idea is something like

I want to fit the main element to full width if aside is not present.

Not familiar with CSS Grid I'm trying to create a two column layout. Per reading tutorials it was suggested to use minmax() but for some reason I cannot figure out how to break column 1's full height that matches column 2, example:

I want to make a row-column-row layout using css flexbox, here's the code:

Say, I have the following HTML with some grid CSS. What would be a good way to have them stacked onto each other on smaller screens (e.g. 360x720)?

For some reason I can't come to think of a good way on what I think is they line

grid-template-columns: minmax(min(0, 100%), 1fr)) 1fr 1fr 1fr;

likely with a media query.

I have been reading https://web.dev/one-line-layouts/, https://evanminto.com/blog/intrinsically-responsive-css-grid-minmax-min/ and some others on how it could be done, but for a reason or another it eludes me.

I would like to switch the 3rd and 4th column of my grid on desktop.

I know that I could assign grid-order to each item or use a own row for two of the divs and then set the order, but I would like to avoid both to reduce code.

Is there any way to achieve this with css-grid? I am open for solutions via css-flex, if that would be easier.

My current code looks like this:

I have a project build with Gradle, it's actually a Vaadin project, with a servlet where I use Jetty. At the startup (i.e gradle run) I have a lot of different warning message from AnnotationParser about duplication of classes. I copy only one because the log is quite verbose: