我想我现在已经知道了这个问题的明确答案。到目前为止，答案存在的问题是它们没有解释如何处理位于主要内容左侧的侧边栏（主要是因为我在原始问题中并未提出要求）。
<div > <nav> <p>navigation</p> </nav> <main> <p>content</p> </main> <aside> <p>sidebar</p> </aside></div>
您可以使用以下CSS：
.grid { display: grid; grid-template-columns: fit-content(200px) 1fr fit-content(200px);}nav, aside { width: 100%;}nav { grid-column: 1; }main { grid-column: 2; }aside { grid-column: 3; }这也是网格区域的好用例
.grid { display: grid; grid-template-columns: fit-content(200px) 1fr fit-content(200px); grid-template-areas: "nav content sidebar";}nav, aside { width: 100%;}nav { grid-area: nav; }main { grid-area: content; }aside { grid-area: sidebar; }IE兼容版本如下所示：
.grid { display: -ms-grid; display: grid; -ms-grid-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;}nav, aside { width: 100%; max-width: 200px; }nav { -ms-grid-column: 1; grid-column: 1;}main { -ms-grid-column: 2; grid-column: 2;}aside { -ms-grid-column: 3; grid-column: 3;}
