[Grid] #layout #template

grid.elm

div [ class "container" ]
    [ div [ class "header" ]
        [ text "HEADER" ]
    , div [ class "menu" ]
        [ text "MENU" ]
    , div [ class "content" ]
        [ text "CONTENT" ]
    , div [ class "footer" ]
        [ text "FOOTER" ]
    , node "style" []
        [ text ".container {display: grid;grid-template-columns: repeat(12, 1fr);grid-template-rows: 50px 350px 50px;grid-gap: 5px;grid-template-areas:\"h h h h h h h h h h h h\"\"c c c c c c c c c c m m\"\"f f f f f f f f f f f f\";}.header {grid-area: h;}.menu {grid-area: m;}.content {grid-area: c;}.footer {   grid-area: f;}/* basic styling */.header {background-color: #96ceb4;}.menu {background-color: #ff6f69;}.content {background-color: #ffcc5c;}.footer {background-color: #88d8b0;}.title {color: #ff6f69;    background-color: #ffeead;text-align: center;padding: 30px 0 10px;margin: 0px}.wrapper > div {    padding-left: 20px;color: #ffeead;display: flex;align-items: center;font-size: 20px;}.row > div {    padding-left: 20px;color: #ffeead;display: flex;align-items: center;font-size: 20px;}.row > .content  {height: 100px;}html {padding: 0 10px;margin: 0 10px;}body > .row {margin: 0px;}.row > .menu  {    height: 100px;}.row > .header {height: 40px;}.row > .footer {height: 40px;}html, body  {background: #ffeead;}" ]