simple css grid holy grail layout

css-grid-grail.css

#grid {
    display: grid;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    grid-template-columns: 
        [start] minmax(auto, min-content) 
        [center] auto 
        [end] minmax(auto, min-content);
    grid-template-rows: 
        [header] 2em 
        [middle] auto 
        [footer] 2em;
    padding: 0;
    grid-column-gap: 1px;
    grid-row-gap: 1px;
    background-color: #333;
}

.start { grid-column-start: start; }
.center { grid-column-start: center; }
.end { grid-column-start: end; }
.header { grid-row-start: header; }
.middle { grid-row-start: middle; }
.footer { grid-row-start: footer; }