我对网格的百分比有点困惑。
我知道,当容器a有一个特定的宽度,例如像素,那么任何孩子的宽度值为100%的孩子将采取相同的宽度的父亲。
但是,当父代带有显示网格,并且以像素为单位显示特定宽度时,除此之外,还有网格区域。如下例所示。然后每个子代都取网格的特定区域。
我的问题是,当给一个子节点指定宽度100%时,该宽度是父节点宽度的100%还是给该子节点的网格区域的100%?
main {
max-width: 1200px;
min-width: 750px;
display: grid;
grid-template-columns: minmax(6%, 8%) minmax(300px, 1fr) minmax(400px, 2fr);
grid-template-areas:
"sec_nav main_head main_head"
"sec_nav welcome welcome"
"sec_nav main_content main_content"
"sec_nav main_content main_content"
"sec_nav note .";
}
main .main-header {
grid-area: main_head;
width: 100%;
}
谢谢你的帮助
1条答案
按热度按时间h43kikqp1#
从规范中
网格项在包含块内的大小由其网格区域定义。
因此,包含块由网格区域定义,而不是父元素,并且包含块是用作宽度百分比计算参考的块
第一个月
指定百分比宽度。该百分比是根据生成的框的包含块. ref的宽度计算的