如何为网格中的各个列着色答案

【问题标题】：How do you color individual columns in a grid如何为网格中的各个列着色
【发布时间】：2020-10-11 23:46:10
【问题描述】：

我尝试使用 flexbox 创建它，但是当正文副本中的文本数量不同时，我遇到了价格和 CTA 文本未与列的另一侧对齐的问题。我使用了一个网格来解决问题，但现在我似乎无法单独为列着色，而它们之间的间隙。我想如果我对 .column 类使用“背景颜色”，它会解决这个问题，但没有任何反应。任何帮助将不胜感激。 This is what I am trying to achieve

提前谢谢你。

.grid {
    display: grid;
    grid-gap: 25px;
    margin: auto;
    width: 70%;
    background-color: orange;
}

.column {
    display: contents;
    text-align: center;
}

.title {
    grid-row-start: 1;
}
.body {
    grid-row-start: 2;
}
.price {
    grid-row-start: 3;
}
.cta {
    grid-row-start: 4;
}

<div class="grid">
    <div class="column">
        <div class="title">
            <h2> GOLD MEMBERSHIP</h2>
        </div>
        <div class="body">
            <p>-For anyone who wants a better deal</p>
            <p>-Benefits</p>
            <p>-And other benefits</p>
        </div>  
        <div class="price">
            <p>$0 Membership Fee</p>
        </div>  
        <div class="cta">
            <p>JOIN NOW</p>
        </div>
    </div>

    <div class="column">
        <div class="title">
            <h2>REGULAR MEMBERSHIP</h2>
        </div>  
        <div class="body">
            <p>-For anyone who just wants the benefits of the buying group and imma add some more text to test if it will keep on aligning even with unequal text length to mess with the text length and on and on and on and whatnot</p>
            <p>-Benefits</p>
            <p>-And other benefits</p>
        </div>
        <div class="price">
            <p>$150 Membership Fee</p>
        </div>
        <div class="cta">
            <p>JOIN NOW</p>
        </div>
    </div>
</div>

【问题讨论】：

标签： html css css-grid

【解决方案1】：

只需将背景颜色单独应用于元素。我还考虑了一个盒子阴影来弥补差距：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 25px;
  margin: auto;
  width: 70%;
}

.column {
  display: contents;
  text-align: center;
}

.title {
  grid-row-start: 1;
  background:orange;
  box-shadow:0 25px 0 orange;
  border-radius:30px 30px 0 0;
}

.body {
  grid-row-start: 2;
  background:orange;
  box-shadow:0 25px 0 orange;
}

.price {
  grid-row-start: 3;
  background:orange;
  box-shadow:0 25px 0 orange;
}

.cta {
  grid-row-start: 4;
  background:orange;
  border-radius:0 0 30px 30px;
}

<div class="grid">
  <div class="column">
    <div class="title">
      <h2> GOLD MEMBERSHIP</h2>
    </div>
    <div class="body">
      <p>-For anyone who wants a better deal</p>
      <p>-Benefits</p>
      <p>-And other benefits</p>
    </div>
    <div class="price">
      <p>$0 Membership Fee</p>
    </div>
    <div class="cta">
      <p>JOIN NOW</p>
    </div>
  </div>

  <div class="column">
    <div class="title">
      <h2>REGULAR MEMBERSHIP</h2>
    </div>
    <div class="body">
      <p>-For anyone who just wants the benefits of the buying group and imma add some more text to test if it will keep on aligning even with unequal text length to mess with the text length and on and on and on and whatnot</p>
      <p>-Benefits</p>
      <p>-And other benefits</p>
    </div>
    <div class="price">
      <p>$150 Membership Fee</p>
    </div>
    <div class="cta">
      <p>JOIN NOW</p>
    </div>
  </div>
</div>

【讨论】：

非常感谢，这是一个非常酷的使用阴影扩展盒子的方法。