如何在Bootstrap Card中嵌入图片网格？解决布局错位留白问题

Got it, let's sort out this layout problem you're hitting with your ASP.NET Core MVC project. When you swapped the single card image for a grid, the misalignment and extra spacing came from a couple of style conflicts between your custom grid and Bootstrap's default Card styles, plus fixed column widths that didn't match the Card's size.

Why This Happened #

• Your .grid-container used fixed 100px columns, but the Card is set to 18rem (~288px). The fixed columns only took up 200px, leaving awkward empty space.
• Bootstrap Cards have default padding and border styles that clashed with your grid's unreset margins/paddings, causing misalignment.
• The original card-img-top class has built-in border-radius and overflow handling that your grid didn't inherit, making the layout look inconsistent.

Fixed Full Code #

HTML #

<div class="card" style="width: 18rem;">
  <div class="grid-container">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
  </div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

CSS #

.grid-container {
  display: grid;
  /* Use fr units to split space evenly, no fixed widths */
  grid-template-columns: 1fr 1fr;
  grid-gap: 0;
  /* Reset padding/margin to match Card's top edge */
  padding: 0;
  margin: 0;
  /* Match original card-img-top rounded corners */
  border-top-left-radius: calc(.25rem - 1px);
  border-top-right-radius: calc(.25rem - 1px);
  overflow: hidden; /* Prevent image corners from spilling outside */
}

.grid-container img {
  width: 100%;
  height: auto;
  padding: 0;
  border: none;
}

Key Fixes Explained #

1. Elastic Grid Columns: Replaced fixed 100px columns with 1fr 1fr — this makes the grid columns automatically split the full width of the Card, eliminating blank space.
2. Match Card Styling: Added border-radius and overflow rules to the grid container to replicate the look of Bootstrap's card-img-top, so the grid blends seamlessly with the Card.
3. Reset Conflicting Styles: Cleared padding/margin on the grid and images to avoid clashes with Bootstrap's default Card spacing, fixing misalignment.

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