gpt4 book ai didi

html - 适当的边距填充器,用于更宽宽度的响应式网格设计

转载 作者:行者123 更新时间:2023-11-27 23:43:57 25 4
gpt4 key购买 nike

我已经"working with one of the many frameworks or grid systems laying out sites on a 12-column flexible grid"自从使用 Bootstrap 几个月后,我既不是老手也不是学徒,所以我正在尝试仅使用网格和媒体查询来布置网站。以下代码是通过刚刚引用的 URL 上的漂亮教程提供的设计简化,还使用了来自 Rachel Andrew 的启发性 https://gridbyexample.com 的提示。 .

.box {
background-color: #ddd; color: #000; padding: 20px;
}
.main-head { grid-area: hd; }
.content { grid-area: ct; }
.main-nav { grid-area: nv; }
.wrapper {
display: grid;
grid-gap: 2px;
grid-template-areas:
"nv"
"ct";
}
@media (min-width: 600px) {
.wrapper {
grid-template-columns: 1fr 3fr;
grid-template-areas:
"nv nv"
"ct ct";
}
nav ul {
display: flex;
justify-content: space-between;
}
}
@media (min-width: 1000px) {
.wrapper {
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas:
"nv ct ct"
"nv ct ct";
}
nav ul {
flex-direction: column;
}
}
@media (min-width: 1200px) {
.wrapper {
grid-template-columns: 1fr 1fr 4fr 1fr 1fr;
grid-template-areas:
". nv ct ct ."
". nv ct ct .";
}
nav ul {
flex-direction: column;
}
}
<div class="wrapper">
<nav class="box main-nav">
<ul>
<li><a href="">Nav 1</a></li>
<li><a href="">Nav 2</a></li>
<li><a href="">Nav 3</a></li>
</ul>
</nav>
<article class="box content">
<h1>Main</h1>
</article>
</div>

上面的代码试图模拟在窗口超过某个 (1200) 宽度时插入两个边距,但是使用句点填充 grid-template-area 似乎是作弊。有没有更自然的方式来插入这些边距?

最佳答案

您可以像在其他任何地方一样使用 margin,不是吗?当然,如果您希望两侧的空间恰好为 1fr,则可以使用带有 的空单元格方法。

.box {
background-color: #ddd; color: #000; padding: 20px;
}
.main-head { grid-area: hd; }
.content { grid-area: ct; }
.main-nav { grid-area: nv; }
.wrapper {
display: grid;
grid-gap: 2px;
grid-template-areas:
"nv"
"ct";
transition: margin 0.5s ease-in-out;
}
@media (min-width: 600px) {
.wrapper {
grid-template-columns: 1fr 3fr;
grid-template-areas:
"nv nv"
"ct ct";
}
nav ul {
display: flex;
justify-content: space-between;
}
}
@media (min-width: 1000px) {
.wrapper {
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas:
"nv ct ct"
"nv ct ct";
}
nav ul {
flex-direction: column;
}
}
@media (min-width: 1200px) {
.wrapper {
grid-template-columns: 1fr 4fr 1fr;
grid-template-areas:
"nv ct ct"
"nv ct ct";
margin: 0 5%;
}
nav ul {
flex-direction: column;
}
}
<div class="wrapper">
<nav class="box main-nav">
<ul>
<li><a href="">Nav 1</a></li>
<li><a href="">Nav 2</a></li>
<li><a href="">Nav 3</a></li>
</ul>
</nav>
<article class="box content">
<h1>Main</h1>
</article>
</div>

关于html - 适当的边距填充器,用于更宽宽度的响应式网格设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56893602/

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