Advertisements
I have these cards, and I want the first card to stand out from the rest. So my idea was to align it to the center vertically. I tried using align-items: center;
but it didn’t work? I also had an idea of adding a vertical line in-between the basic block and the rest of the blocks. Any suggestions or improvements I can make? Thanks
.select-plan-wrapper {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 15px;
}
.select-plan-wrapper-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.select-plan-block {
background: #ffffff;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;
border-radius: 4px;
align-self: start;
text-align: center;
}
.select-plan-block-two {
display: flex;
align-items: center;
background: blue;
}
<section class="select-plan-section select-plan-wrapper">
<article class="select-plan-block select-plan-block-two">
<header class="select-plan-block-header">
<h1>Basic Plan</h1>
</header>
<fieldset>
<ul class="select-plan-list">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</fieldset>
</article>
<div class="select-plan-wrapper-two">
<article class="select-plan-block" style="background: silver;">
<header class="select-plan-block-header">
<h1>Silver plan</h1>
</header>
<fieldset>
<ul class="select-plan-list">
<li>Lorem ipsum>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</fieldset>
</article>
<article class="select-plan-block" style="background: gold;">
<header class="select-plan-block-header">
<h1>Gold plan</h1>
</header>
<fieldset>
<ul class="select-plan-list">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</fieldset>
</article>
<article class="select-plan-block" style="background: #02d3cc;">
<header class="select-plan-block-header">
<h1>Platinum plan</h1>
</header>
<fieldset>
<ul class="select-plan-list">
<li>Lorem ipsum>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</fieldset>
</article>
<article class="select-plan-block" style="background: skyblue;">
<header class="select-plan-block-header">
<h1>Diamond plan</h1>
</header>
<fieldset>
<ul class="select-plan-list">
<li>Lorem ipsum>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</fieldset>
</article>
</div>
>Solution :
Try using align-self: center;
. Align items is set at the level above and affects all children.