CODEWITHSUNDEEP
csscss-grid
Steve
Steve

Reputation: 14912

Positioning/padding objects inside CSS Grid cells

I am creating pricing cards, where each card is a grid with 1 column and 6 rows.

enter image description here

I need to put padding around the text cells so they contents don't touch the edges. I can apply an inline style attribute, but this does not work:

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

Nor does a nested div:

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

I've tried adding padding to the grid cells to no avail. I've tried nesting a second div inside and applying padding to that — also nothing.

I am trying to use grid instead of a flexbox so that all the items line up across the cards.

What am I missing here? I also have a Codepen with 2 cards in a grid.

Card:

<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;
      }
    }
  }
}

Upvotes: 0

Views: 301

Answers (2)

disinfor
disinfor

Reputation: 11533

Here is the corrected code with what I believe you are looking for. I added a container for the button, but it also corrects the SCSS nesting error with the .plan-price div.

.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>

Correct 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;

}

Upvotes: 0

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

Place button inside of a div and give button sizing(height and width) on 100%. (You can even do it with Flex)

Add padding to outer div as required.

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>

Upvotes: 1

Related Questions