如何用CSS Grid或Table实现三卡片布局：一行两卡第三卡居下

Hey there! Let's walk through how to create this 3-card layout using both CSS Grid (my top recommendation for layout tasks) and HTML tables. Here's the breakdown:

CSS Grid is perfect here because it's flexible, responsive, and built for modern layouts. Here's a straightforward approach:

First, set up your HTML structure with a container and three card elements:

<div class="card-container">
  <div class="card card-1">Card 1</div>
  <div class="card card-2">Card 2</div>
  <div class="card card-3">Card 3 (can be a different size!)</div>
</div>

Then add the CSS to define the grid layout:

.card-container {
  display: grid;
  /* Create two equal-width columns for the first row */
  grid-template-columns: 1fr 1fr;
  gap: 1rem; /* Add space between cards */
  padding: 1rem;
}

.card {
  padding: 2rem;
  border-radius: 8px;
  background: #f5f5f5;
  border: 1px solid #ddd;
}

/* Make the third card span both columns */
.card-3 {
  grid-column: 1 / -1; /* This tells it to start at column 1 and end at the last column */
  /* Adjust height or other styles here if you want a different size */
  min-height: 150px;
}

This setup lets the first two cards sit side-by-side in equal-width columns, and the third card takes up the full width of the row below. You can easily tweak the column widths (like using 200px 1fr instead of 1fr 1fr for unequal first-row cards) or adjust the third card's size with height, min-height, or even grid-row if needed.

While tables are designed for tabular data (not layout), here's how you could do it if you absolutely need to:

<table class="card-table">
  <tr>
    <td class="card">Card 1</td>
    <td class="card">Card 2</td>
  </tr>
  <tr>
    <!-- Use colspan="2" to make this cell span both columns -->
    <td colspan="2" class="card card-3">Card 3 (can be a different size!)</td>
  </tr>
</table>

And the corresponding CSS:

.card-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 1rem;
  padding: 1rem;
}

.card {
  padding: 2rem;
  border-radius: 8px;
  background: #f5f5f5;
  border: 1px solid #ddd;
}

.card-3 {
  /* Adjust size here */
  height: 150px;
}

Just a heads-up: using tables for layout can make your code less maintainable and harder to make responsive compared to CSS Grid. Stick with Grid unless you're working with legacy systems that require table-based layouts.

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