CSS网格尺寸&amp；对齐

Question

目标

我想要一个具有以下规格的UI卡片组件。

多张卡片的高度相同，无论内容如何变化，以便：

• 卡片
• 卡头
• 卡体
  • 量规(SVG元素)
    • 必须与压力表的底部对齐
  • 桌子
• 卡底
  • 必须与卡片底部对齐

问题

• 在正文内容和页脚之间呈现了太多的额外空间，以至于卡片明显比卡片内容高。
• 额外的空间似乎来自于 .card {grid-template-rows: minmax(0, 1fr) 3fr auto;}但到目前为止，对此的改变还没有成功。
• 在全屏时，当视口宽度减小，卡片被包裹到下一行时，额外的空间是最明显的。

/*--------------------
Global
--------------------*/

*, ::after, ::before {
  box-sizing: border-box;
}

body {
  padding: 1.5rem;
  font: 1rem/1.5 Tahoma, Geneva, sans-serif;
  background-color: #f0f1f2;
}

h1, h2, h3, p, table, svg {
  margin: 0 0 1.5rem 0;
}

table {min-width: 100%;}
th {text-align: left;}
td {text-align: right;}

svg {
  width: 100%;
  height: auto;
}

/*--------------------
Container
--------------------*/

main {
  align-content: safe center;
  padding: 1.5rem;
  background-color: #fff;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  grid-gap: 1.5rem 1.5rem;
  margin-bottom: 1.5rem;
}

/*--------------------
Card
--------------------*/

.card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 3fr auto;
  border: solid 1px rgba(0, 0, 0, 0.3);
}

.card-header {
  padding: 1.5rem;
  outline: solid 1px red;
}

.card-header * {margin: 0;}

.card-header + .card-body {padding-top: 0;}

.card-body {
  display: grid;
  grid-template-rows: 0.5fr 1fr;
  padding: 1.5rem;
  outline: solid 1px lime;
}

.card-body .gauge {
  display: grid;
  align-content: end;
  outline: solid 1px aqua;
}

.card-body .table {
  outline: solid 1px fuchsia;
}

.card-footer {
  padding: 1.5rem;
  outline: solid 1px blue;
}

.card-footer * {margin: 0;}

<main>
  <div class="container">
    <section class="card">
      <header class="card-header">
        <h3>Header content. </h3>
        <p>Information text.</p>
      </header>
      <div class="card-body">
        <div class="gauge">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
            <defs>
              <style>
                .circle-1 {
                  fill: #ccc;
                }
              </style>
            </defs>
            <path d="M 0,99.999995 A 100,100 0 0 1 100,0 100,100 0 0 1 200,100 l -100,0 z" class="circle-1" />
          </svg>
        </div>
        <div class="table">
          <table>
            <tbody>
              <tr>
                <th>Th 1</th>
                <td>Td 1</td>
              </tr>
              <tr>
                <th>Th 2</th>
                <td>Td 2</td>
              </tr>
              <tr>
                <th>Th 3</th>
                <td>Td 3</td>
              </tr>
              <tr>
                <th>Th 4</th>
                <td>Td 4</td>
              </tr>
              <tr>
                <th>Th 5</th>
                <td>Td 5</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <footer class="card-footer">
        <p><a href="#">Footer link</a></p>
      </footer>
    </section>
    <section class="card">
      <header class="card-header">
        <h3>Header content. </h3>
      </header>
      <div class="card-body">
        <div class="gauge">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
            <defs>
              <style>
                .circle-1 {
                  fill: #ccc;
                }
              </style>
            </defs>
            <path d="M 0,99.999995 A 100,100 0 0 1 100,0 100,100 0 0 1 200,100 l -100,0 z" class="circle-1" />
          </svg>
        </div>
        <div class="table">
          <table>
            <tbody>
              <tr>
                <th>Th 1</th>
                <td>Td 1</td>
              </tr>
              <tr>
                <th>Th 2</th>
                <td>Td 2</td>
              </tr>
              <tr>
                <th>Th 3</th>
                <td>Td 3</td>
              </tr>
              <tr>
                <th>Th 4</th>
                <td>Td 4</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <footer class="card-footer">
        <p><a href="#">Footer link</a></p>
      </footer>
    </section>
    <section class="card">
      <header class="card-header">
        <h3>Header content. </h3>
      </header>
      <div class="card-body">
        <div class="gauge">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
            <defs>
              <style>
                .circle-1 {
                  fill: #ccc;
                }
              </style>
            </defs>
            <path d="M 0,99.999995 A 100,100 0 0 1 100,0 100,100 0 0 1 200,100 l -100,0 z" class="circle-1" />
          </svg>
        </div>
        <div class="table">
          <table>
            <tbody>
              <tr>
                <th>Th 1</th>
                <td>Td 1</td>
              </tr>
              <tr>
                <th>Th 2</th>
                <td>Td 2</td>
              </tr>
              <tr>
                <th>Th 3</th>
                <td>Td 3</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <footer class="card-footer">
        <p><a href="#">Footer link</a></p>
      </footer>
    </section>
    <section class="card">
      <header class="card-header">
        <h3>Header content. </h3>
      </header>
      <div class="card-body">
        <div class="gauge">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
            <defs>
              <style>
                .circle-1 {
                  fill: #ccc;
                }
              </style>
            </defs>
            <path d="M 0,99.999995 A 100,100 0 0 1 100,0 100,100 0 0 1 200,100 l -100,0 z" class="circle-1" />
          </svg>
        </div>
        <div class="table">
          <table>
            <tbody>
              <tr>
                <th>Th 1</th>
                <td>Td 1</td>
              </tr>
              <tr>
                <th>Th 2</th>
                <td>Td 2</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <footer class="card-footer">
        <p><a href="#">Footer link</a></p>
      </footer>
    </section>
  </div>
</main>

Answer 1

我已经去掉了paddings和margin，我想现在可以用了。

/*--------------------
Global
--------------------*/

body {
    padding: 0 !important;
}

main {
    padding: 0 !important;
}

.container {
  margin-bottom: 0 !important;

}

*, ::after, ::before {
  box-sizing: border-box;
}

body {
  padding: 1.5rem;
  font: 1rem/1.5 Tahoma, Geneva, sans-serif;
  background-color: #f0f1f2;
}

h1, h2, h3, p, table, svg {
  margin: 0 0 1.5rem 0;
}

table {min-width: 100%;}
th {text-align: left;}
td {text-align: right;}

svg {
  width: 100%;
  height: auto;
}

/*--------------------
Container
--------------------*/

main {
  align-content: safe center;
  padding: 1.5rem;
  background-color: #fff;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  grid-gap: 1.5rem 1.5rem;
  margin-bottom: 1.5rem;
}

/*--------------------
Card
--------------------*/

.card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) 3fr auto;
  border: solid 1px rgba(0, 0, 0, 0.3);
}

.card-header {
  padding: 1.5rem;
  outline: solid 1px red;
}

.card-header * {margin: 0;}

.card-header + .card-body {padding-top: 0;}

.card-body {
  display: grid;
  grid-template-rows: 0.5fr 1fr;
  padding: 1.5rem;
  outline: solid 1px lime;
}

.card-body .gauge {
  display: grid;
  align-content: end;
  outline: solid 1px aqua;
}

.card-body .table {
  outline: solid 1px fuchsia;
}

.card-footer {
  padding: 1.5rem;
  outline: solid 1px blue;
}

.card-footer * {margin: 0;}

<main>
  <div class="container">
    <section class="card">
      <header class="card-header">
        <h3>Header content. </h3>
        <p>Information text.</p>
      </header>
      <div class="card-body">
        <div class="gauge">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
            <defs>
              <style>
                .circle-1 {
                  fill: #ccc;
                }
              </style>
            </defs>
            <path d="M 0,99.999995 A 100,100 0 0 1 100,0 100,100 0 0 1 200,100 l -100,0 z" class="circle-1" />
          </svg>
        </div>
        <div class="table">
          <table>
            <tbody>
              <tr>
                <th>Th 1</th>
                <td>Td 1</td>
              </tr>
              <tr>
                <th>Th 2</th>
                <td>Td 2</td>
              </tr>
              <tr>
                <th>Th 3</th>
                <td>Td 3</td>
              </tr>
              <tr>
                <th>Th 4</th>
                <td>Td 4</td>
              </tr>
              <tr>
                <th>Th 5</th>
                <td>Td 5</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <footer class="card-footer">
        <p><a href="#">Footer link</a></p>
      </footer>
    </section>
    <section class="card">
      <header class="card-header">
        <h3>Header content. </h3>
      </header>
      <div class="card-body">
        <div class="gauge">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
            <defs>
              <style>
                .circle-1 {
                  fill: #ccc;
                }
              </style>
            </defs>
            <path d="M 0,99.999995 A 100,100 0 0 1 100,0 100,100 0 0 1 200,100 l -100,0 z" class="circle-1" />
          </svg>
        </div>
        <div class="table">
          <table>
            <tbody>
              <tr>
                <th>Th 1</th>
                <td>Td 1</td>
              </tr>
              <tr>
                <th>Th 2</th>
                <td>Td 2</td>
              </tr>
              <tr>
                <th>Th 3</th>
                <td>Td 3</td>
              </tr>
              <tr>
                <th>Th 4</th>
                <td>Td 4</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <footer class="card-footer">
        <p><a href="#">Footer link</a></p>
      </footer>
    </section>
    <section class="card">
      <header class="card-header">
        <h3>Header content. </h3>
      </header>
      <div class="card-body">
        <div class="gauge">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
            <defs>
              <style>
                .circle-1 {
                  fill: #ccc;
                }
              </style>
            </defs>
            <path d="M 0,99.999995 A 100,100 0 0 1 100,0 100,100 0 0 1 200,100 l -100,0 z" class="circle-1" />
          </svg>
        </div>
        <div class="table">
          <table>
            <tbody>
              <tr>
                <th>Th 1</th>
                <td>Td 1</td>
              </tr>
              <tr>
                <th>Th 2</th>
                <td>Td 2</td>
              </tr>
              <tr>
                <th>Th 3</th>
                <td>Td 3</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <footer class="card-footer">
        <p><a href="#">Footer link</a></p>
      </footer>
    </section>
    <section class="card">
      <header class="card-header">
        <h3>Header content. </h3>
      </header>
      <div class="card-body">
        <div class="gauge">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
            <defs>
              <style>
                .circle-1 {
                  fill: #ccc;
                }
              </style>
            </defs>
            <path d="M 0,99.999995 A 100,100 0 0 1 100,0 100,100 0 0 1 200,100 l -100,0 z" class="circle-1" />
          </svg>
        </div>
        <div class="table">
          <table>
            <tbody>
              <tr>
                <th>Th 1</th>
                <td>Td 1</td>
              </tr>
              <tr>
                <th>Th 2</th>
                <td>Td 2</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <footer class="card-footer">
        <p><a href="#">Footer link</a></p>
      </footer>
    </section>
  </div>
</main>