Grid布局下子元素设置width:100%的宽度参照对象疑问

当父容器设置display:grid并通过grid areas划分区域时，子元素设置width:100%的参照对象是该子元素所在的grid区域的宽度，而非父容器的整体宽度。

以你给出的代码为例：

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%;
}

• main容器的grid-template-areas中，main_head区域横跨了第二、第三列（对应minmax(300px, 1fr)和minmax(400px, 2fr)两列）。
• .main-header设置width:100%时，会完全填满main_head这个grid区域的宽度，也就是第二列加第三列的总宽度，而非main容器的max-width:1200px（因为第一列还占据了6%-8%的宽度）。

额外补充：Grid布局中，grid item默认会自动填满所在的grid区域宽度，若没有特殊样式需求，其实可以省略width:100%的设置。

内容的提问来源于stack exchange，提问作者Ameen Shamsan