CSS
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: minmax(100px, auto) 1fr auto;
justify-items: center;
}
.content {
padding: 20px;
display: grid;
background-color: tan;
max-width: 1000px;
width: 100%;
}
.header {
background-color: red;
width: 100%;
grid-row-start: 1;
grid-row-end: 2;
justify-items: center;
text-align: center;
display: grid;
}
.header .container {
display: grid;
grid-template-columns: 1fr 2fr;
width: minmax(auto, 1000px);
height: 100%;
background-color: green;
max-width: 1000px;
}
.footer {
grid-row-start: 3;
grid-row-end: 4;
width: 100%;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font: 16px Sans-Serif;
}
h1 {
margin: 0 0 20px 0;
}
p {
margin: 0 0 20px 0;
}
.footer {
background: #42A5F5;
color: white;
padding: 20px;
}
