Hey there! Let's tackle that overlapping div issue you're facing. The root problem here is conflicting CSS settings: your grid container uses minmax(50px, 1fr) for columns, but your .card has a min-width: 200px that overrides this, causing layout breaks when the window shrinks. Additionally, the height: 90% on cards can lead to unexpected spacing issues. Let's fix this with both Grid and Flexbox solutions—pick whichever fits your needs better!

Solution 1: Responsive Grid Layout (Fixed) #

We'll align the grid column settings with your card's minimum width, remove conflicting height properties, and keep the spacing intact:

Updated CSS #

.App { 
  font-family: sans-serif; 
  text-align: center; 
} 
.grid-container { 
  display: grid; 
  /* Match the card's min-width here to avoid conflict */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
  grid-gap: 30px; /* Shorthand for column and row gap */
  margin-top: 50px; 
  padding: 0 15px; /* Add side padding to prevent cards touching screen edges */
} 
.card { 
  padding: 30px; 
  background-color: aqua; 
  min-width: 200px; 
  /* Remove fixed height; let content determine height or use min-height if needed */
  min-height: 150px; 
} 

This setup ensures that:

• Cards will automatically wrap to new rows when the screen can't fit them at 200px wide
• Grid gaps stay consistent regardless of window size
• Side padding prevents cards from touching the edges of small screens

Solution 2: Responsive Flexbox Layout #

If you prefer Flexbox, here's a clean implementation that achieves the same responsive behavior:

Updated CSS #

.App { 
  font-family: sans-serif; 
  text-align: center; 
} 
.grid-container { 
  display: flex; 
  flex-wrap: wrap; /* Enable wrapping */
  gap: 30px; /* Consistent spacing between cards */
  margin-top: 50px; 
  padding: 0 15px; 
  justify-content: center; /* Center cards horizontally */
} 
.card { 
  padding: 30px; 
  background-color: aqua; 
  /* Flex shorthand: grow, shrink, base width */
  flex: 1 1 200px; 
  max-width: 400px; /* Optional: limit maximum card width for large screens */
  min-height: 150px; 
} 

Key features of this Flexbox setup:

• flex-wrap: wrap forces cards to new rows when space is limited
• flex: 1 1 200px lets cards grow to fill available space but shrink no smaller than 200px
• justify-content: center keeps cards centered for a clean look on all screen sizes

Full Working Code Example #

Your React and HTML code doesn't need major changes—just swap in the CSS from either solution above. Here's the complete package for reference, with a small React best practice added:

React Code #

const gridTexts = [ 
  "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", 
  "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset", 
  "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's." 
]; 
const rootElement = document.getElementById("root"); 
ReactDOM.render( 
  <div className="App"> 
    <div className="grid-container" > 
      {gridTexts.map((gridText, index) => ( 
        {/* Add unique key for React list items (best practice) */}
        <div className="card" key={index}> 
          <span> {gridText} </span> 
        </div> 
      ))} 
    </div> 
  </div>, rootElement ); 

HTML Code #

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
  <meta name="theme-color" content="#000000"> 
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 
  <title>React App</title> 
  <style>
    {/* Paste your chosen CSS solution here */}
  </style>
</head> 
<body> 
  <noscript> 
    You need to enable JavaScript to run this app. 
  </noscript> 
  <div id="root"></div> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 
</body> 
</html>

内容的提问来源于stack exchange，提问作者uncomplicatedchad12