.hero__grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: 1fr auto 1fr;
}
.vertical-line {
height: 169px;
width: 0.5px;
background-color: red;
}
.horizontal-line {
width: 300px;
height: 0.5px;
background-color: red;
}<div class="hero__grid">
<div class="hero__grid-cell"></div>
<div class="hero__grid-cell">
<div class="vertical-line"></div>
</div>
<div class="hero__grid-cell"></div>
<div class="hero__grid-cell">
<div class="horizontal-line"></div>
</div>
<div class="hero__grid-cell"><i class="far fa-heart"></i></div>
<div class="hero__grid-cell">
<div class="horizontal-line"></div>
</div>
<div class="hero__grid-cell"></div>
<div class="hero__grid-cell">
<div class="vertical-line"></div>
</div>
<div class="hero__grid-cell"></div>
</div>I'm attempting to achieve this design: https://i.sstatic.net/sMwom.png
Initially, I started by just trying:
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
and then adding in the lines and icon, but it doesn't quite seem to work as intended. What I am considering is creating a 3x3 grid layout :
grid-template-columns: 1fr auto 1fr;
grid-template-rows: 1fr auto 1fr;
Then placing the content in the auto (2nd) row and column divs, however, the visual result doesn't look correct to me. I understand that CSS can be finicky, so maybe this is actually the best approach?
How can I create borders (or lines) between grid cells to achieve this effect?
I've attempted usingborder-bottombut it spans the full width/height.How can I position the heart icon at the center of those borders?