I have quite a specific issue with grid. I was trying to make with all grid items the same size. stretch
is not an option in this case, because some of the items span across two rows. When I added align-items: center
, that didn't solve the issue. I really didn't find anything to be of help.
#cards {
padding: 0 7vw;
margin-top: 3vh;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
align-items: center;
justify-content: center;
}
.card:nth-child(1),
.card:nth-child(3) {
grid-row: span 2;
}
.card {
display: block;
border: solid 5px #000;
box-shadow: 0 20px 30px -15px hsl(215, 49%, 82%);
border-radius: 8px;
margin: 5%;
overflow: hidden;
text-align: center;
}
<div id="cards">
<div class="card">
<div class="card-content">
<h2 class="card-title">Item 1</h2>
</div>
</div>
<div class="card">
<div class="card-content">
<h2 class="card-title">Item 2</h2>
</div>
</div>
<div class="card">
<div class="card-content">
<h2 class="card-title">Item 3</h2>
<p>Hello world</p>
</div>
</div>
<div class="card">
<div class="card-content">
<h2 class="card-title">Item 4</h2>
<p>I built this two line paragraph oh yes I really want it to be two lines or yes finally.</p>
</div>
</div>
</div>
Thank you very much for your ideas. (I am new on Stack Overflow so feel free to give any other suggestions to help me further improve the question)
You can add more rows like this:
grid-template: ". two ." 1fr
"one two three" 1fr
"one four three" 1fr
". four ." 1fr /
1fr 1fr 1fr;
With the appropriate grid-area
on children.
Here is the snippet (I have also added a height: 90%;
on children to make them fit the cells height but keeping the margin):
#cards {
padding: 0 7vw;
margin-top: 3vh;
display: grid;
grid-template: ". two ." 1fr
"one two three" 1fr
"one four three" 1fr
". four ." 1fr /
1fr 1fr 1fr;
align-items: center;
justify-content: center;
}
.card:nth-child(1){
grid-area: one;
}
.card:nth-child(2){
grid-area: two;
}
.card:nth-child(3){
grid-area: three;
}
.card:nth-child(4){
grid-area: four;
}
.card {
display: block;
border: solid 5px #000;
box-shadow: 0 20px 30px -15px hsl(215, 49%, 82%);
border-radius: 8px;
margin: 5%;
overflow: hidden;
text-align: center;
height: 90%;
}
<div id="cards">
<div class="card">
<div class="card-content">
<h2 class="card-title">Item 1</h2>
</div>
</div>
<div class="card">
<div class="card-content">
<h2 class="card-title">Item 2</h2>
</div>
</div>
<div class="card">
<div class="card-content">
<h2 class="card-title">Item 3</h2>
<p>Hello world</p>
</div>
</div>
<div class="card">
<div class="card-content">
<h2 class="card-title">Item 4</h2>
<p>I built this two line paragraph oh yes I really want it to be two lines or yes finally.</p>
</div>
</div>
</div>