未正确对齐 CSS 网格

Question

这是我的 JSFiddle：https://jsfiddle.net/zgdmhr35/

CSS,

.container {
    display: grid; 
    /* grid-template-columns: 100px autp; 
    grid-template-rows: 100px 1fr 200px 50px; */
    grid-template-areas: 
    "header header"
    "nav nav"
    "main main"
    "footer footer";
    grid-gap: .2em;

但是，出于某种原因，我无法让它正常工作。另外，我不确定我的 Tablet @media 查询是否正确。

Answer 1

我刚刚为 .root 元素指定了带有 grid-template-columns 的 3 列，并使用带有 grid-column-end 的剩余宽度制作了 main 元素。您可以查看 jsfiddle.

未正确对齐 CSS 网格

Not aligning correctly CSS Grid

html

css

responsive-design