CSS grid span row to all rows [duplicate]

Question

I want to make like this layout. but I can not make the .head element full rows. I also try with grid-row: 1 / 6, but it is not responsive when width change it not properly span rows. grid-column: 1 / -1 working fine grid-row: 1 / -1 this not working.

.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(91px, 1fr)); grid-gap: 4px; } .head { background: blue; font-weight: bold; color: #fff; grid-row: 1 / -1; } .item { background: red; }

<div class="mgrid"> <div class="head">My Text</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> </div>

not able to find the duplicate but you either use grid-row: 1/99 (and replace the gap with margin) or consider position: absolute — Temani Afif
– Temani Afif, Commented May 20, 2023 at 20:04
If you're okay to nest one grid within another, then that would seem the easiest solution: demo, but I will admit that it's non-ideal. — David Thomas
– David Thomas, Commented May 20, 2023 at 22:25

Temani Afif · Accepted Answer · 2023-05-20 20:06:13Z

You can solve this using position: absolute

.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(91px, 1fr)); grid-gap: 4px; padding-left: 95px; /* 91px + gap */ position: relative; } .head { position: absolute; top: 0; bottom: 0; left: 0; width: 91px; /* same as the template */ background: blue; font-weight: bold; color: #fff; } .item { background: red; }

<div class="mgrid"> <div class="head">My Text</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> <div class="item">item</div> </div>

<div class="flex"><div class="head">My Text</div><div class="mgrid"><div class="item">item</div>... ...</div></div>
@Abhijit if you are able to adjust the HTML then it's another story, we have a ton of different ways to do this

Collectives™ on Stack Overflow

CSS grid span row to all rows [duplicate]

1 Answer 1

2 Comments

Hot Network Questions