Sobre añadir nuevos elementos: si añades nuevos bloques a tu estructura, estos elementos van a afectar el tamaño y la estructura del grid
y tendrías que cambiar el CSS porque ahora mismo es específico para 3 elementos.
Lo que podrías hacer sería especificar que va a haber dos columnas (1 auto y la otra de 10em) y que todas las filas van a ser auto
. Para todas las secciones, la columna será la 1, y no hace falta especificar un row, que será auto
por defecto. Luego para .content_02
especificar que su columna va a ser la 2 y para la fila lo que puedes hacer es especificar que va a empezar en la primera y terminar en un número muy grande (más grande que el número de nuevos elementos que se vayan a añadir), de ese modo crecerá automáticamente hasta ocupar todo el espacio disponible (tiene que haber un modo mejor de hacerlo, esto es demasiado hacky).
* {
box-sizing: border-box;
}
body {
background: #f1f2f2;
font-family: arial;
}
.principal_container {
display: grid;
background: white;
padding: 5px;
margin: auto auto;
max-width: calc(960px + 10em + 20px);
}
.section {
border: 5px solid blue;
padding: 5px;
margin: 5px;
}
.content_02 {
order: 3;
}
@media all and (min-width: 720px) {
.principal_container {
grid-template-columns: auto 10em;
}
section {
grid-column: 1;
}
.content_02 {
grid-column: 2;
grid-row: 1 / 999999;
}
}
<div class="principal_container">
<section class="section content_01">
A
</section>
<section class="section content_02">
B
</section>
<section class="section content_03">
C
</section>
<section class="section content_04">
D
</section>
<section class="section content_05">
E
</section>
</div>