How do you color individual columns in a grid

user_14405130 0
Viewed 83

I tried creating this using flexbox but I ran into an issue of the price and CTA text not aligning to the other side of the column when it had a different amount of text in the body copy. I used a grid instead which fixed the problem but now I can't seem to color the columns individually with the gaps in between. I thought if I use 'background-color' to the .column class, it would fix the issue but nothing happens. Any help would be greatly appreciated. This is what I am trying to achieve Like this, sorry for the poor explanation

Thank you in advance.

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

css-grid css html
1 Answers

Simply apply the background coloration to the element individually. I also consdiered a box-shadow to cover the gap:

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

user_86203330
Related