body {
margin: 0;
}
.App {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
grid-template-areas: "col1 col2 col3";
height: 100vh;
}
.column1 {
background-color: aquamarine;
grid-area: col1;
}
.column2 {
background-color: rebeccapurple;
grid-area: col2;
overflow: auto;
}
.column3 {
background-color: orange;
grid-area: col3;
}
@media only screen and (max-width: 800px) {
.App {
height:auto;
color: red;
grid-template-areas:
"col1 col1 col1"
"col3 col3 col3"
"col2 col2 col2";
}
}
<div class="App">
<div class="column1">Column 1</div>
<div class="column2">
<h1>Column 2</h1>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Ut ex purus, lobortis eget dapibus sed, elementum nec tortor.
Fusce vehicula lobortis maximus. Phasellus eu ante ut massa molestie
laoreet non eget ante. Duis diam nisi, porttitor eu libero eget, commodo
tincidunt velit. Quisque a urna a quam eleifend faucibus. Integer id est
et sem placerat scelerisque. Ut tempor condimentum euismod. Phasellus a
faucibus sem. Vestibulum id interdum ligula. Proin vel tellus eget
libero convallis finibus sit amet vel tellus. Suspendisse potenti.
Mauris at eros nec nulla luctus interdum. Sed non cursus diam, vitae
commodo quam. Nam viverra quam non imperdiet sagittis. Vestibulum quis
justo ut risus varius hendrerit ac et ex. Vestibulum volutpat a felis ac
porta. Sed faucibus vitae sapien a tincidunt. Quisque ut magna in ligula
scelerisque tincidunt et ac est. Proin vitae interdum felis. Ut sem
enim, dapibus cursus vulputate commodo, venenatis ut turpis. In
dignissim sapien sit amet lorem aliquam posuere. Suspendisse vel enim
commodo, posuere orci quis, eleifend mi. Quisque in massa vitae metus
rhoncus sollicitudin. Vestibulum auctor pharetra orci non eleifend.
Donec ornare mauris mi, non sagittis odio posuere ut. Nunc quis ultrices
ex. Vestibulum massa dui, congue eu vestibulum id, cursus sit amet
turpis. Donec posuere, mauris id finibus cursus, lacus tortor fermentum
odio, vel tempor leo velit ut velit. Mauris rhoncus tempor nunc, a
aliquam purus tempus in. Cras imperdiet laoreet nunc, et efficitur odio
bibendum sit amet. Cras mattis sem non ex gravida, id suscipit nisl
lobortis. Nunc efficitur vehicula nisi ac gravida. Ut auctor dignissim
quam, at pulvinar velit vestibulum ut. Fusce nisi augue, porttitor at
commodo sit amet, porttitor a quam. Vestibulum sit amet lobortis ipsum,
a sodales tellus. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec efficitur consequat risus, vel
dignissim orci vehicula auctor. Mauris congue justo non augue
scelerisque, et imperdiet elit faucibus. Nam velit sem, luctus sit amet
nunc vel, feugiat eleifend justo. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Pellentesque sodales est eget dui accumsan
laoreet. Aenean tincidunt tempor volutpat. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Aenean
nec viverra leo. Cras ut sapien scelerisque, fermentum ex nec, dapibus
velit. Vestibulum rhoncus et est nec accumsan. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Curabitur a eros justo. Vivamus efficitur eros vel sollicitudin blandit.
Vivamus non elementum purus, vitae eleifend eros. Ut sed sodales leo, ac
pharetra quam. Nunc non libero orci. Duis dapibus lacus eu tortor
feugiat finibus. Nulla laoreet aliquet commodo. Nam mauris nunc, varius
sit amet faucibus vitae, facilisis porta nulla. Donec id eleifend metus,
a laoreet ex. Praesent ac nisi pulvinar, ullamcorper ligula ac,
imperdiet ligula. Nullam diam justo, vulputate vitae ligula et, placerat
condimentum lorem. Cras bibendum lectus a eleifend feugiat. Proin
bibendum eget massa at pulvinar. Ut vel aliquam urna. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Ut ex purus, lobortis eget
dapibus sed, elementum nec tortor. Fusce vehicula lobortis maximus.
Phasellus eu ante ut massa molestie laoreet non eget ante. Duis diam
nisi, porttitor eu libero eget, commodo tincidunt velit. Quisque a urna
a quam eleifend faucibus. Integer id est et sem placerat scelerisque. Ut
tempor condimentum euismod. Phasellus a faucibus sem. Vestibulum id
interdum ligula. Proin vel tellus eget libero convallis finibus sit amet
vel tellus. Suspendisse potenti. Mauris at eros nec nulla luctus
interdum. Sed non cursus diam, vitae commodo quam. Nam viverra quam non
imperdiet sagittis. Vestibulum quis justo ut risus varius hendrerit ac
et ex. Vestibulum volutpat a felis ac porta. Sed faucibus vitae sapien a
tincidunt. Quisque ut magna in ligula scelerisque tincidunt et ac est.
Proin vitae interdum felis. Ut sem enim, dapibus cursus vulputate
commodo, venenatis ut turpis. In dignissim sapien sit amet lorem aliquam
posuere. Suspendisse vel enim commodo, posuere orci quis, eleifend mi.
Quisque in massa vitae metus rhoncus sollicitudin. Vestibulum auctor
pharetra orci non eleifend. Donec ornare mauris mi, non sagittis odio
posuere ut. Nunc quis ultrices ex. Vestibulum massa dui, congue eu
vestibulum id, cursus sit amet turpis. Donec posuere, mauris id finibus
cursus, lacus tortor fermentum odio, vel tempor leo velit ut velit.
Mauris rhoncus tempor nunc, a aliquam purus tempus in. Cras imperdiet
laoreet nunc, et efficitur odio bibendum sit amet. Cras mattis sem non
ex gravida, id suscipit nisl lobortis. Nunc efficitur vehicula nisi ac
gravida. Ut auctor dignissim quam, at pulvinar velit vestibulum ut.
Fusce nisi augue, porttitor at commodo sit amet, porttitor a quam.
Vestibulum sit amet lobortis ipsum, a sodales tellus. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Donec efficitur consequat risus, vel dignissim orci vehicula
auctor. Mauris congue justo non augue scelerisque, et imperdiet elit
faucibus. Nam velit sem, luctus sit amet nunc vel, feugiat eleifend
justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque sodales est eget dui accumsan laoreet. Aenean tincidunt
tempor volutpat. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Aenean nec viverra leo. Cras ut
sapien scelerisque, fermentum ex nec, dapibus velit. Vestibulum rhoncus
et est nec accumsan. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Curabitur a eros justo.
Vivamus efficitur eros vel sollicitudin blandit. Vivamus non elementum
purus, vitae eleifend eros. Ut sed sodales leo, ac pharetra quam. Nunc
non libero orci. Duis dapibus lacus eu tortor feugiat finibus. Nulla
laoreet aliquet commodo. Nam mauris nunc, varius sit amet faucibus
vitae, facilisis porta nulla. Donec id eleifend metus, a laoreet ex.
Praesent ac nisi pulvinar, ullamcorper ligula ac, imperdiet ligula.
Nullam diam justo, vulputate vitae ligula et, placerat condimentum
lorem. Cras bibendum lectus a eleifend feugiat. Proin bibendum eget
massa at pulvinar. Ut vel aliquam urna.
</div>
<div class="column3">Column 3</div>
</div>
