如何让同一行列的Grid网格项不重叠？无需外层容器

Great question! When you assign the same grid-row: 1 and grid-column: 1 to multiple grid items, they stack on top of each other by default—that's core to how CSS Grid's cell-based layout works. To get that clean, side-by-side Flex-style behavior without wrapping them in an extra container, here are two practical approaches:

Approach 1: Let Grid Auto-Generate Columns (Simplest Fix) #

If you can adjust the grid-column property on your items, this is the most straightforward solution. Instead of locking both items to the same column, tell Grid to create new columns horizontally for items in the same row:

<div class="some-grid-container" style="display: grid; grid-auto-flow: column; gap: 1rem;">
  <div style="grid-row: 1;">Item 1</div>
  <div style="grid-row: 1;">Item 2</div>
</div>

• grid-auto-flow: column tells Grid to add columns (instead of rows) when it needs to place extra items, mimicking Flex's flex-direction: row.
• The optional gap property adds space between items, just like Flex's gap—no need for messy margins.

Approach 2: Keep grid-row:1 and grid-column:1 (For Strict Requirements) #

If you have to keep both items assigned to the exact same grid cell, you can make the cell's content behave like inline elements and adjust the cell width to fit everything:

Option A: Use inline-block for Items #

<div class="some-grid-container" style="display: grid; grid-template-columns: fit-content(100%);">
  <div style="grid-row: 1; grid-column: 1; display: inline-block;">Item 1</div>
  <div style="grid-row: 1; grid-column: 1; display: inline-block;">Item 2</div>
</div>

• grid-template-columns: fit-content(100%) makes the grid cell expand to fit the total width of both inline-block items.
• display: inline-block forces the items to sit side-by-side inside the cell instead of stacking.

Option B: Use inline-grid for the Container #

<div class="some-grid-container" style="display: inline-grid; place-content: start;">
  <div style="grid-row: 1; grid-column: 1;">Item 1</div>
  <div style="grid-row: 1; grid-column: 1;">Item 2</div>
</div>

• display: inline-grid makes the container shrink to fit its content, and items in the same grid cell will naturally arrange side-by-side (like inline elements) instead of stacking.
• place-content: start ensures items align to the top-left of the container, matching default Flex behavior.

Bonus: Flex-like Flexible Widths #

If you want items to split the container's width evenly (like Flex's flex: 1), you can define explicit columns instead:

<div class="some-grid-container" style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
  <div style="grid-row: 1;">Item 1</div>
  <div style="grid-row: 1;">Item 2</div>
</div>

This makes each item take up half the container's width, just like a Flex layout with flex: 1 on both items.

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