html - 未正确对齐 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 查询是否正确。

标签： htmlcssresponsive-design

Answer 1

grid-template-columns我刚刚为.root元素指定了 3 列，并main使用grid-column-end. 你可以检查jsfiddle。