我们有隐式网格grid-auto-rows
and grid-auto-columns
。然而我们也可以使用grid-template-rows
/grid-template-columns
结合repeat
and auto-fit
创建显式隐式网格。
有什么我们可以做的吗only做与grid-auto-*
and not with grid-template-*
结合repeat
and auto-fill
/auto-fit
?
如果是,有没有办法指定显式^行/列after隐含的?
就像我有 3 个显式行,然后是隐式网格(因为我需要它,因为我无法使用显式网格做这件事),然后是一个显式行。
有什么是我可以用隐式网格做但不能用显式网格做的吗?
是的。隐式网格处理其存在或位置是不可预料的。这是隐式网格的主要好处。显式网格仅限于其存在或位置是可预测.
我们有隐式网格grid-auto-rows
and grid-auto-columns
。然而我们也可以使用grid-template-rows
/ grid-template-columns
结合repeat
and auto-fit
创建显式隐式网格。
你的第二句话并不完全正确。
没有什么是“隐含的”(术语是规范中定义 https://www.w3.org/TR/css3-grid-layout/#implicit-grids) about grid-template-rows
/ grid-template-columns
结合repeat
and auto-fit
or auto-fill
. The repeat()
符号表示可预测的轨道模式。这使得它完全“明确”(同样,正如术语一样规范中定义 https://www.w3.org/TR/css3-grid-layout/#explicit-grids).
有什么我们可以做的吗only做与grid-auto-*
and not with grid-template-*
结合repeat
and auto-fill
/auto-fit
?
如果事先知道网格的所有列和行,答案是否定的。
答案是肯定的,如果事先不知道网格的所有列和行。
如果是,有没有办法指定显式^行/列after隐含的?
就像我有 3 个显式行,然后是隐式网格(因为我需要它,因为我无法使用显式网格做这件事),然后是一个显式行。
可能吧。您必须展示代码示例。
想象一个具有三行的网格——标题、内容、页脚。
但内容部分的行数未知。
在这种情况下,你可以这样做:
#container {
display: grid;
grid-template-rows: 50px auto 50px;
}
#content {
display: grid;
grid-auto-rows: 200px;
}
这是一个完整的示例:
body {
display: grid;
grid-template-rows: 50px auto 50px;
height: 100vh;
margin: 0;
}
main {
display: grid;
grid-auto-rows: 200px;
overflow: auto;
background-color: gray;
}
main > article:nth-child(even) {
background-color: aqua;
}
header { background-color: lightgreen; }
main { background-color: orangered; }
footer { background-color: gray; }
body { font-size: 1.1em; margin: 0; }
<header>header</header>
<main>
<article>content</article>
<article>content</article>
<article>content</article>
<article>content</article>
<article>content</article>
<article>content</article>
<article>content</article>
</main>
<footer>footer</footer>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)