英文:
CSS grid span row to all rows
问题
以下是您提供的内容的翻译：
.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">我的文本</div>
<div class="item">项目</div>
<div class="item">项目</div>
<div class="item">项目</div>
<div class="item">项目</div>
<div class="item">项目</div>
<div class="item">项目</div>
<div class="item">项目</div>
<div class="item">项目</div>
<div class="item">项目</div>
<div class="item">项目</div>
<div class="item">项目</div>
<div class="item">项目</div>
<div class="item">项目</div>
<div class="item">项目</div>
<div class="item">项目</div>
</div>
英文:
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.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案1
得分: 1
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>
英文:
You can solve this using position: absolute
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论