gpt4 book ai didi

css - GRID CSS — 我怎么能不定义 grid-row-end?

转载 作者:行者123 更新时间:2023-11-28 13:56:57 25 4
gpt4 key购买 nike

我正在制作作品集,这是我第一次使用 Grid CSS。我对此很陌生,并且对网格行有疑问。我从来没有在互联网上看到解决方案,所以这就是我在这里问的原因。

我有一个容器,里面有大小相同的不同盒子。我想用 JavaScript(动态)扩展盒子的数量。我的问题是:我是否需要写一个网格行尾,即使我不知道容器的高度,因为我实际上不知道我会有多少个盒子?

我预览了我的问题,这里是预览。

* {
margin: 0;
padding: 0;
}

body {
font-family: -apple-system, roboto, sans-serif;
background: #222f3e;
color: #c8d6e5;
}

.container {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-auto-rows: 5rem;
grid-gap: 3rem 2rem;
}

.container header,
.container footer {
background: #576574;
grid-column: 1 / span 10;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}

.container header {
grid-row: 2 / span 1;
}

.container .content {
grid-column: auto / span 10;
background: #8395a7;
grid-row: auto / span 10;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 2.5rem;
grid-gap: 2.5rem 2.5rem;
grid-auto-flow: row;
}

.container .content .box {
grid-column: auto / span 3;
grid-row: auto / span 5;
background: #ff6b6b;
}

.container footer {
grid-row: auto / span 2;
}
<div class="container">
<header>
<h1> Grid CSS </h1>
</header>
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<footer>
<h2> Mon Footer </h2>
</footer>
</div>

非常感谢!

路易斯

最佳答案

您不需要定义所有这些模板。让它变得简单并依赖于高度,因为你确切地知道每个元素应该有多高并且保持内容自动:

body {
background: #222f3e;
color: #c8d6e5;
margin:0;
}
.container {
display: grid;
padding-top:8rem;
grid-row-gap: 3rem;
}
.container header, .container footer {
background: #576574;
display: flex;
align-items: center;
justify-content: center;
}
.container header {
height:5rem;
}
.container .content {
background: #8395a7;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 2.5rem;
}
.container .content .box {
height:22.5rem;
background: #ff6b6b;
}
.container footer {
height:13rem;
}
<div class="container">  
<header>
<h1> Grid CSS </h1>
</header>
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<footer>
<h2> Mon Footer </h2>
</footer>
</div>

关于css - GRID CSS — 我怎么能不定义 grid-row-end?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58383348/

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