containers - Prevent CSS Grid Columns from Overlapping - Stack Overflow

admin管理员组

文章数量:1122832

I am fairly new to CSS and have always had issues with layout.

I've been trying to implement some Grid layouts but am having trouble as I collapse the browser. I have 2 columns set to 40% 60% respectively. I simply want the second column to not overlap the first column as I make the browser smaller horizontally. I just want the text in column two to wrap until it can't anymore and then the browser just cover it instead of the second column moving to the left and taking up the space in column 1.

I tried including code but I keep getting an error so hoping for some direction without it.

I've tried pretty much everything I can think of to try preventing overflow, setting min and max sizes. I have not ventured into the mediaquery stuff as this seems like it should be simple enough to not have content go beyond its set container.

I am fairly new to CSS and have always had issues with layout.

I've been trying to implement some Grid layouts but am having trouble as I collapse the browser. I have 2 columns set to 40% 60% respectively. I simply want the second column to not overlap the first column as I make the browser smaller horizontally. I just want the text in column two to wrap until it can't anymore and then the browser just cover it instead of the second column moving to the left and taking up the space in column 1.

I tried including code but I keep getting an error so hoping for some direction without it.

I've tried pretty much everything I can think of to try preventing overflow, setting min and max sizes. I have not ventured into the mediaquery stuff as this seems like it should be simple enough to not have content go beyond its set container.

• css
• containers
• overflow
• css-grid

Share Improve this question Follow asked Nov 21, 2024 at 23:02 Melissa ParkerMelissa Parker 11 3

• 1 Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it in the question itself preferably in a Stack Snippet using the <> icon. See How to create a Minimal, Reproducible Example – Paulie_D Commented Nov 21, 2024 at 23:20
• " I just want the text in column two to wrap until it can't anymore and then the browser just cover it instead of the second column moving to the left and taking up the space in column 1." Pretty sure this would be really hard without setting a min-width on column2 – Paulie_D Commented Nov 21, 2024 at 23:25
• @Paulie_D Thank you so very much! Just updated my grid-template-columns to minmax(600px, 600px) 2fr and got the results I was looking for. Finally was able to connect the dots in my mind! – Melissa Parker Commented Nov 22, 2024 at 0:03

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Was able to ensure column 1 kept a min-width using the minmax attribute:

grid-template-columns: minmax(600px, 600px) 2fr;

本文标签： containersPrevent CSS Grid Columns from OverlappingStack Overflow