gpt4 book ai didi

html - CSS Grid 在设置 grid-row 时不会包裹 child

转载 作者:太空狗 更新时间:2023-10-29 16:03:40 28 4
gpt4 key购买 nike

CODEPEN

背景:

我正在尝试使用 Grid CSS 并尝试实现目前实现的这种布局

预期布局 enter image description here

问题:在桌面上,元素标题应为 8 列宽,如果我不将网格行添加到 element-headerelement<div class="element">1</div>将在element-header旁边填写.现在,如果我添加 grid-rows我的element将不再换行。

当前布局(问题) enter image description here enter image description here

问题如何修复我的网格以匹配上面的“预期布局”屏幕截图?即 .element将换行并从第二个网格行开始

代码:

HTML:

<section class="section">
<div class="container">
<div class="samba-grid">
<div class="element-header"><h1>I am a lot of header text that only goes 8 columsn wide</h1></div>
<div class="element">1</div>
<div class="element">2</div>
<div class="element">3</div>
<div class="element">4</div>
</div>
</div>
</section>

CSS:

.section {
width: 100%;
display: block;
background: red;
box-sizing: border-box;
padding: 40px 24px;

@media screen and (min-width: 600px) and (max-width: 1139px) {
background: orange;
padding: 56px 48px;
}

@media screen and (min-width: 1140px) {
padding: 64px 48px;
background: green;
}
}

.container {
margin: 0 auto;
background: rgba(244,244,244, .25);
max-width: 599px;

@media screen and (min-width: 600px) and (max-width: 1139px) {
max-width: 1039px;
background: rgba(244,244,244, .25);
}

@media screen and (min-width: 1140px) {
max-width: 1032px;
background: rgba(244,244,244, .25);
}
}

.samba-grid {
display: grid;
background: inherit;
width: 100%;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 'auto auto';
grid-gap: 24px;

@media screen and (min-width: 600px) and (max-width: 1139px) {
grid-template-columns: repeat(6, 1fr);
grid-gap: 48px;
}

@media screen and (min-width: 1140px) {
grid-template-columns: repeat(12, 1fr);
grid-gap: 48px;
}
}

h1 {
font-size: 52px;
}
.element-header {
grid-row: 1;
grid-column: span 8; // SET THIS TO "span 12" TO SEE EXPECTED BEHAVIOR
}

.element {
display: grid; // important to do this.
background: rgba(0,0,0,.3);
grid-column: span 3;
grid-row: 2; // REMOVE THIS TO SEE EXPECTED BEHAVIOR

@media screen and (min-width: 600px) and (max-width: 1139px) {
grid-column: span 3;
}

@media screen and (min-width: 1140px) {
grid-column: span 4;
}
}

最佳答案

您可以使文本占据整行,然后在内部减小其宽度,使其仅占据所需的宽度。这样你会阻塞第一行,没有元素可以去那里。

这是一个简化的例子:

.samba-grid {
display: grid;
background: inherit;
width: 100%;
grid-template-columns: repeat(12, 1fr);
grid-gap: 24px;
border:1px solid;
}

.element-header {
grid-row: 1;
grid-column: 1/-1;
}
.element-header > h1 {
/*we take 8 colmuns (without gaps) + 7 gaps*/
width:calc(8*(100% - 11*24px)/12 + 7*24px);
background:red;
margin:0;
}
.samba-grid > span {
height:50px;
grid-column: span 2;
background:green;
}
<div class="samba-grid">
<div class="element-header">
<h1>I am a lot of header text that only goes 8 columsn wide</h1>
</div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

为了使其更加动态且易于处理,您可以考虑使用 CSS 变量:

:root {
--grid:12;
--gap:24px;
}

.samba-grid {
display: grid;
background: inherit;
width: 100%;
grid-template-columns: repeat(var(--grid), 1fr);
grid-gap: var(--gap);
border:1px solid;
}

.element-header {
grid-row: 1;
grid-column: 1/-1;
--grid-column:8; /*simply adjust this value to control the column*/
}
.element-header > h1 {
width:calc(var(--grid-column)*(100% - (var(--grid) - 1)*var(--gap))/var(--grid) + calc(var(--grid-column) - 1)*var(--gap));
background:red;
margin:0;
}
.samba-grid > span {
height:50px;
grid-column: span 2;
background:green;
}
<div class="samba-grid">
<div class="element-header">
<h1>I am a lot of header text that only goes 8 columsn wide</h1>
</div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

另一个想法是考虑一个隐藏元素,它将占据第一行的剩余空间:

.samba-grid {
display: grid;
background: inherit;
width: 100%;
grid-template-columns: repeat(12, 1fr);
grid-gap: 24px;
border:1px solid;
}

.element-header {
grid-row: 1;
grid-column: span 8;
background:red;
order:-2;
}

.samba-grid:before {
content:"";
order:-1;
grid-column: span 4;
background:blue;
height:2px;
}

.samba-grid > span {
height:50px;
grid-column: span 2;
background:green;
}
<div class="samba-grid">
<div class="element-header">
<h1>I am a lot of header text that only goes 8 columsn wide</h1>
</div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>


作为旁注,设置 grid-row: 2 并不意味着从第二行开始,而是意味着在第二行内 em> 这是造成问题的原因。

关于html - CSS Grid 在设置 grid-row 时不会包裹 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55152465/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com