无法正确对齐CSS网格

Here's my 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;

我的布局是这样的:

enter image description here

片剂,

enter image description here

但是,由于某种原因,我无法使其正常工作。另外,我不确定我的Tablet @media查询是否正确。

评论
  • 藕断丝却连
    藕断丝却连 回复

    I just specified 3 columns with grid-template-columns to the .root element and make the main element using the remaining width with grid-column-end. You can check jsfiddle.