I am building or designing a website, I am using CSS Grid (I am learning it) and it occurred to me to do it in this way the site. I am practicing it.
I have a problem and I do not know how to position block number 3 (right) under block number 1 (left). All this, of course, when I change or shrink the size of the browser.
Actually if it is below, but the problem itself is when I add a lot of content to the block number 2 (main) and it's time to extend it down, then the block number 3 (right) also moves downwards. move or move.
.item1 { grid-area: header; }
.item2 { grid-area: left; height:100px; }
.item3 { grid-area: main; padding-bottom:500px; }
.item4 { grid-area: right; height:100px; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'left main main main right right'
'left main main main right right'
'left main main main right right';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
@media(max-width:500px){
.item1 { grid-area: header; }
.item2 { grid-area: left; }
.item3 { grid-area: main;height:auto; }
.item4 { grid-area: right; }
.grid-container{
display:grid;
grid-template-areas:
'header header header header header header'
'left left main main main main'
'right right main main main main';
grid-gap: 10px;
background-color: red;
}
.wrap{
height:800px;
}
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Grid Layout</h1>
<p>This grid layout contains six columns and three rows:</p>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">left</div>
<div class="item3">
<div class="wrap">
<p>
La Luna es el único satélite natural de la Tierra. Con un diámetro ecuatorial de 3474 km, es el quinto satélite más grande del Sistema Solar, mientras que en cuanto al tamaño proporcional respecto a su planeta es el satélite más grande: un cuarto del diámetro de la Tierra y 1/81 de su masa. Después de Ío, es además el segundo satélite más denso. Se encuentra en relación síncrona con la Tierra, siempre mostrando la misma cara hacia el planeta. El hemisferio visible está marcado con oscuros mares lunares de origen volcánico entre las brillantes montañas antiguas y los destacados astroblemas. A pesar de ser en apariencia el objeto más brillante en el cielo después del Sol, su superficie es en realidad muy oscura, con una reflexión similar a la del carbón. Su prominencia en el cielo y su ciclo regular de fases han hecho de la Luna un objeto con importante influencia cultural desde la antigüedad tanto en el lenguaje, como en el calendario, el arte o la mitología. La influencia gravitatoria de la Luna produce las mareas y el aumento de la duración del día. La distancia orbital de la Luna, cerca de treinta veces el diámetro de la Tierra, hace que se vea en el cielo con el mismo tamaño que el Sol y permite que la Luna cubra exactamente al Sol en los eclipses solares totales.
La Luna es el único cuerpo celeste en el que el ser humano ha realizado un descenso tripulado. Aunque el programa Luna de la Unión Soviética fue el primero en alcanzar la Luna con una nave espacial no tripulada, el programa Apolo de Estados Unidos realizó las únicas misiones tripuladas al satélite terrestre hasta la fecha, comenzando con la primera órbita lunar tripulada por el Apolo 8 en 1968, y seis alunizajes tripulados entre 1969 y 1972, siendo el primero el Apolo 11 en 1969, y el último el Apolo 17. Estas misiones regresaron con más de 380 kg de roca lunar, que han permitido alcanzar una detallada comprensión geológica de los orígenes de la Luna (se cree que se formó hace 4500 millones de años después de un gran impacto), la formación de su estructura interna y su posterior historia.
En 1970, la Unión Soviética puso en la superficie el primer vehículo robótico controlado desde la tierra: Lunojod 1. El rover fue enviando fotografías y vídeos de la superficie que recorrió (10 km) durante casi un año.
</p>
</div>
</div>
<div class="item4">Right</div>
</div>
</body>
</html>Please, reduce the size of the browser to see what I mean.