I'm weird, so I want the 1st column to have a fixed size (say, 400px). I checked answers to other weirdos like me but I couldn't find them too helpful.

Now, I'm pretty sure there's a very good reason I cannot manually set the width of the column, as I have a hunch that it interferes with the whole grid concept.

So when I try to "cheat" (after exporting) by applying the a min-width property to the 1st column class within main.css, it *almost* behaves as I'd want it too except that when the screen size falls below max-width of the grid, the 5th (and last) column folds under the first four.

Obviously, my approach is wrong. Any suggestions? I tried to play around with absolute/relative/etc but with no success (see I want my layout max width at 1400px centered on the browser window).

Place a container inside the column and set the max and min width to 400px.

Done that. But then it overlaps the neighbouring column, making its content slide under it as total screen width decreases.

You'll need to publish your page as your adding request that weren't part of the original question and it hard to see what your doing without actually seeing it. You''ll have to adjust the other contents styling to make it not get affected. Set widths,margins, padding and or possibly fixed position.

Try something like this. Set the column/container width, then change the gird to accommodate that 400 px for your breakpoint. That will involve changing the span width of the first column, and the remaining columns (if 1st column is 2 spans of a grid of 12, then the 2nd column would traditionally be 10 before being divided up. One the first column is set, the 2nd column can be divided. The 2nd column will need an offset to get past the fixed column/container. Your layout will still break at some point. Then, you may have to change the span-width of the first column, and the offsets of the rest Depending on what you are doing to the right of this fixed column, you might want to start out with subgrids in some rows to place content as the viewport gets smaller, or increase the number of spans for the entire grid

Does that work? I haven't done that before and I am crash coursing with the grid system myself. I used to just code like you did in CSS files. Right now, I am starting to work on a similar concept, where I have an image that I do not want to scale down unnecessarily until a certain breakpoint is reached. I have not fleshed out the layout, but I am spanning that first column for the number of span widths I need. Reducing the span width of the 2nd column, then dividing it up as I need it.

What about having
(a) the column full width (i.e. the whole of the row / max number of spans) and Display:Flex;
(b) a container as suggested by Eric (min and max widths 400px) and Flexbox Order:0;
(c) the balance of the column taken up by a subgrid (width 100%; Flexbox Order:1) containing in its subgrid column(s) the other items?

Frank

Thank you all for your responses. I solved the issue by making the page hybrid-half-responsive

post a test file.

This is what I did, hopefully the file will go through, before - when I was unregistered, files were stripped from attachment when I posted them. I followed the flex system That Mr. Cook suggested. But column to the right of that were still scaling smaller and underneath the column, so I did this. I created another column in the that row. I made a max grid of 1200. Set the first column span to be 4 (400 px). Then for the second column, I set the position to absolute, with a left of 400px. That prevents a collapse underneath the first column. But - that will only work for that column in top row, and that is pixel based. See if this works, or if I am doing something wrong. I just mashed this up.

"Sorry, we couldn't add your post for the following reasons:
Your attachment must be one of: .TXT, .SNP, .ZIP, .RSD, .RLM, .RLMP, .RED, .GIF, .JPG, or .PNG format."

Well, it is a .rsd. But I also put it here Drop boxed

Could you elaborate on this? When you say the balance of the column, what do you mean? Are you dividing the column or putting the subgrid into the container?

I meant the remainder/rest of the column, i.e. the right-hand portion of the column. The column is therefore divided into
(a) the fixed-width container on the left, and
(b) the responsive subgrid on the right.

Frank