在CSS网格单元内定位/填充对象

Question

我正在创建定价卡，其中每个卡都是1列6行的网格。

我需要在文本单元格周围放置填充，以便它们的内容不会碰到边缘。我可以应用内联样式属性，但这不起作用：

  .plan-cost-details {
    text-align: center;
    padding: 20px;
  }

Nor不会嵌套div：

  .plan-cost-details > div {
    padding: 20px;
  }

我尝试将填充添加到网格单元无济于事。我尝试在其中嵌套第二个div并对其应用填充-也不是。

我正在尝试使用网格而不是flexbox，以便所有项目在卡片上对齐。

我在这里想念什么？我还有一个Codepen，在网格中有2张卡片。

卡：

<div class="pricing-plan-card">
      <div class="plan-title">Professional</div>
      <div class="plan-summary">
        Try out features that will get you up and running.
      </div>

      <div class="plan-price">
        <span class="currency">$</span>25
        <div class="plan-price-interval">per month</div>
      </div>
      <div class="plan-price-details">
        Billed annually or $12 month-to-month
      </div>
      <button class="btn btn-primary">Choose</button>

      <div class="plan-features">
        <p><strong>Free plus:</strong></p>
        <ul>
          <li>Feature item one and the benefits</li>
          <li>Feature item two and the benefits</li>
          <li>Feature item three and the benefits</li>
        </ul>

      </div>
    </div>

SCSS：

.pricing-plan-card {
  display: grid;
  padding: 1.5rem;
  background-color: #fff;
  grid-template-areas: 'title' 'summary' 'price' 'pricedetail' 'button' 'features';
  grid-template-columns: 1fr;
  grid-template-rows: 60px 60px 80px 60px 75px 1fr;

  .plan-title {
    color: magenta;
    font-family: helvetica;
    font-size: 1.5rem;
    text-align: center;
    grid-area: title;
  }

  .plan-summary {
    font-size: 1rem;
    text-align: center;
    grid-area: summary;
  }

  .plan-price {
    text-align: center;
    color: blue;
    font-family: helvetica;
    font-size: 3rem;
    letter-spacing: -.05em;
    grid-area: price;

    .currency {
      font-size: 2rem;
      vertical-align: text-top;
    }

    .plan-price-interval {
      display: block;
      font-family: arial;
      font-size: 14px;
      letter-spacing: normal;
    }

    .plan-price-details {
      text-align: center;
      grid-area: pricedetail;
    }

    button {
      display: block;
      grid-area: button;
    }

    .plan-features {
      grid-area: features;

      div {
        padding: 20px;
      }
    }
  }
}

Answer 1

将按钮放置在div内，并将按钮大小（高度和宽度）设置为100％。 （您甚至可以使用Flex做到这一点）

根据需要向外部div添加填充。

Codepen example

.pricing-plan-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.pricing-plan-card {
  display: grid;
  padding: 1.5rem;
  background-color: #fff;
  grid-template-areas: 'title' 'summary' 'price' 'pricedetail' 'button' 'features';
  grid-template-columns: 1fr;
  grid-template-rows: 60px 60px 80px 60px 75px 1fr;
}

.pricing-plan-card .plan-title {
  color: magenta;
  font-family: helvetica;
  font-size: 1.5rem;
  text-align: center;
  grid-area: title;
}

.pricing-plan-card .plan-summary {
  font-size: 1rem;
  text-align: center;
  grid-area: summary;
}

.pricing-plan-card .button-container {
  border: 2px solid red !important;
  padding: 20px;
}

.pricing-plan-card .button-container button {
  width: 100%;
  height: 100%;
}

.pricing-plan-card .plan-price {
  text-align: center;
  color: blue;
  font-family: helvetica;
  font-size: 3rem;
  letter-spacing: -0.05em;
  grid-area: price;
}

.pricing-plan-card .plan-price .currency {
  font-size: 2rem;
  vertical-align: text-top;
}

.pricing-plan-card .plan-price .plan-price-interval {
  display: block;
  font-family: arial;
  font-size: 14px;
  letter-spacing: normal;
}

.pricing-plan-card .plan-price .plan-price-details {
  text-align: center;
  grid-area: pricedetail;
}

.pricing-plan-card .plan-price button {
  display: block;
  grid-area: button;
}

.pricing-plan-card .plan-price .plan-features {
  grid-area: features;
}

.pricing-plan-card .plan-price .plan-features div {
  padding: 20px;
}

body {
  background-color: #ccc;
  margin: 20px;
}

.container {
  max-width: 1140px;
  width: 100%;
  padding-right: 16px;
  padding-left: 16px;
  margin-right: auto;
  margin-left: auto;
}

<div class="container">

  <div class="pricing-plan-cards">


    <div class="pricing-plan-card">
      <div class="plan-title">Trial</div>
      <div class="plan-summary">
        Try out features that will get you up and running.
      </div>

      <div class="plan-price">
        FREE
      </div>
      <div class="plan-price-details">
        Billed annually or $12 month-to-month
      </div>
      <div class="button-container">
        <button class="btn btn-primary">Choose</button>
      </div>


      <div class="plan-features">
        <div>
          <p><strong>Free plus:</strong></p>
          <ul>
            <li>Feature item one and the benefits</li>
            <li>Feature item two and the benefits</li>
          </ul>
        </div>

      </div>
    </div>


    <div class="pricing-plan-card">
      <div class="plan-title">Basic</div>
      <div class="plan-summary">
        Grow with more features that deliver value.
      </div>

      <div class="plan-price">
        <span class="currency">$</span>10
        <span class="plan-price-interval">per month</span>
      </div>
      <div class="plan-price-details">
        Billed annually or $12 month-to-month
      </div>
      <div class="button-container">
        <button class="btn btn-primary">Choose</button>
      </div>

      <div class="plan-features">
        <p><strong>Free plus:</strong></p>
        <ul>
          <li>Feature item one and the benefits</li>
          <li>Feature item two and the benefits</li>
        </ul>

      </div>
    </div>


    <div class="pricing-plan-card">
      <div class="plan-title">Professional</div>
      <div class="plan-summary">
        Try out features that will get you up and running.
      </div>

      <div class="plan-price">
        <span class="currency">$</span>25
        <div class="plan-price-interval">per month</div>
      </div>
      <div class="plan-price-details">
        Billed annually or $12 month-to-month
      </div>
      <div class="button-container">
        <button class="btn btn-primary">Choose</button>
      </div>
      <div class="plan-features">
        <p><strong>Free plus:</strong></p>
        <ul>
          <li>Feature item one and the benefits</li>
          <li>Feature item two and the benefits</li>
          <li>Feature item three and the benefits</li>
        </ul>

      </div>
    </div>


    <div class="pricing-plan-card">
      <div class="plan-title">Basic</div>
      <div class="plan-summary">
        Try out features that will get you up and running.
      </div>

      <div class="plan-price">
        <span class="currency">$</span>99
        <div class="plan-price-interval">per month</div>
      </div>
      <div class="plan-price-details">
        Billed annually or $12 month-to-month
      </div>
      <div class="button-container">
        <button class="btn btn-primary">Choose</button>
      </div>

      <div class="plan-features">
        <div>
          <p><strong>Free plus:</strong></p>
          <ul>
            <li>Feature item one and the benefits</li>
            <li>Feature item two and the benefits</li>
            <li>Feature item three and the benefits</li>
            <li>Feature item four and the benefits</li>
          </ul>
        </div>

      </div>
    </div>


  </div>
</div>

Answer 2

我测试了您的代码，一切都按预期显示。您是否正确添加了CSS文件？

我知道这不是答案，但是我没有足够的声誉来评论您的问题。

还要使用什么浏览器？

Answer 3

以下是经过纠正的代码，其中包含我认为您想要的代码。我为按钮添加了一个容器，但它也通过.plan-price div纠正了SCSS嵌套错误。

.pricing-plan-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.pricing-plan-card {
  display: grid;
  padding: 1.5rem;
  background-color: #fff;
  grid-template-areas: 'title' 'summary' 'price' 'pricedetail' 'button' 'features';
  grid-template-columns: 1fr;
  grid-template-rows: 60px 60px 80px 60px 75px 1fr;
}

.pricing-plan-card .plan-title {
  color: magenta;
  font-family: helvetica;
  font-size: 1.5rem;
  text-align: center;
  grid-area: title;
}

.pricing-plan-card .plan-summary {
  font-size: 1rem;
  text-align: center;
  grid-area: summary;
}

.pricing-plan-card .plan-price {
  text-align: center;
  color: blue;
  font-family: helvetica;
  font-size: 3rem;
  letter-spacing: -.05em;
  grid-area: price;
}

.pricing-plan-card .currency {
  font-size: 2rem;
  vertical-align: text-top;
}

.pricing-plan-card .plan-price-interval {
  display: block;
  font-family: arial;
  font-size: 14px;
  letter-spacing: normal;
}

.pricing-plan-card .plan-price-details {
  text-align: center;
  grid-area: pricedetail;
}

.pricing-plan-card .button-wrap {
  grid-area: button;
}

.pricing-plan-card .plan-features {
  grid-area: features;
}

.pricing-plan-card .plan-features div {
  padding: 20px;
}

body {
  background-color: #ccc;
  margin: 20px;
}

.container {
  max-width: 1140px;
  width: 100%;
  padding-right: 16px;
  padding-left: 16px;
  margin-right: auto;
  margin-left: auto;
}

<div class="container">
  <div class="pricing-plan-cards">
    <div class="pricing-plan-card">
      <div class="plan-title">Trial</div>
      <div class="plan-summary">
        Try out features that will get you up and running.
      </div>

      <div class="plan-price">
        FREE
      </div>
      <div class="plan-price-details">
        Billed annually or $12 month-to-month
      </div>
      <div class="button-wrap">
        <button class="btn btn-primary">Choose</button>
      </div>

      <div class="plan-features">
        <div>
          <p><strong>Free plus:</strong></p>
          <ul>
            <li>Feature item one and the benefits</li>
            <li>Feature item two and the benefits</li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</div>

正确的SCSS：

.pricing-plan-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.pricing-plan-card {
  display: grid;
  padding: 1.5rem;
  background-color: #fff;
  grid-template-areas: 'title' 'summary' 'price' 'pricedetail' 'button' 'features';
  grid-template-columns: 1fr;
  grid-template-rows: 60px 60px 80px 60px 75px 1fr;

  .plan-title {
    color: magenta;
    font-family: helvetica;
    font-size: 1.5rem;
    text-align: center;
    grid-area: title;
  }

  .plan-summary {
    font-size: 1rem;
    text-align: center;
    grid-area: summary;
  }

  .plan-price {
    text-align: center;
    color: blue;
    font-family: helvetica;
    font-size: 3rem;
    letter-spacing: -.05em;
    grid-area: price;


    .currency {
      font-size: 2rem;
      vertical-align: text-top;
    }

    .plan-price-interval {
      display: block;
      font-family: arial;
      font-size: 14px;
      letter-spacing: normal;
    }
 }

    .plan-price-details {
      text-align: center;
      grid-area: pricedetail;
    }

  .button-wrap {
    grid-area: button;
    button {
      // display: block;
    }
  }

    .plan-features {
      grid-area: features;

      div {
        padding: 20px;
      }
    }
}



body {
  background-color: #ccc;
  margin: 20px;
}
.container {
  max-width:1140px;
      width: 100%;
    padding-right: 16px;
    padding-left: 16px;
    margin-right: auto;
    margin-left: auto;

}