Skip to main content
corregir el ancho del media query + añadir descripción del orden
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

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>


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>

corregir el ancho del media query + añadir descripción del orden
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

Puedes dejar el order: 3 para el bloque B, porque se seguirá aplicando con grid también. Y si no especificas columnas, entonces automáticamente ocuparán todo el ancho (al ser secciones) y harás que B aparezca al final sin afectar a su posicionamiento cuando la pantalla sea más grande de 720px.

Aquí lo puedes ver funcionando:

* {
  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: 768px720px) {
  .principal_container {
    grid-template-columns: [col1-start] auto [col2-end] 10em;
    grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
  }
  .content_01 {
    grid-column: col1-start;
    grid-row: row1-start;
  }
  .content_02 {
    grid-column: col2-end;
    grid-row: row1-start / row2-end;
  }
  .content_03 {
    grid-column: col1-start;
    grid-row: row2-start;
  }
}
<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>

</div>

Aquí lo puedes ver funcionando:

* {
  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: 768px) {
  .principal_container {
    grid-template-columns: [col1-start] auto [col2-end] 10em;
    grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
  }
  .content_01 {
    grid-column: col1-start;
    grid-row: row1-start;
  }
  .content_02 {
    grid-column: col2-end;
    grid-row: row1-start / row2-end;
  }
  .content_03 {
    grid-column: col1-start;
    grid-row: row2-start;
  }
}
<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>

</div>

Puedes dejar el order: 3 para el bloque B, porque se seguirá aplicando con grid también. Y si no especificas columnas, entonces automáticamente ocuparán todo el ancho (al ser secciones) y harás que B aparezca al final sin afectar a su posicionamiento cuando la pantalla sea más grande de 720px.

Aquí lo puedes ver funcionando:

* {
  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: [col1-start] auto [col2-end] 10em;
    grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
  }
  .content_01 {
    grid-column: col1-start;
    grid-row: row1-start;
  }
  .content_02 {
    grid-column: col2-end;
    grid-row: row1-start / row2-end;
  }
  .content_03 {
    grid-column: col1-start;
    grid-row: row2-start;
  }
}
<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>

</div>
Publicación recuperada por Alvaro Montoro
Publicación eliminada por Alvaro Montoro
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

Alinear al centro en pantallas XL es simple (y todas en general). Al contenedor principal principal_container le debes indicar que es un elemento de bloque (como es un div es automático, así que simplemente le quito el inline-block), poner un ancho máximo y luego indicar que los márgenes sean auto. El navegador centrará automáticamente el contenedor.

Aquí lo puedes ver funcionando (las secciones las veremos abajo):

* {
  box-sizing: border-box;
}

body {
  background: #f1f2f2;
  font-family: arial;
}

.principal_container {
  background: white;
  padding: 5px;
  margin: auto auto;
  max-width: 1024px;
}
<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>

</div>

En tu caso, el ancho máximo no sería 1024px, sino 960px (el máximo de A/C) + 10em de B + 20px de los márgenes de las secciones. De ese modo estarías imponiendo un ancho máximo efectivo de 960px a A y C, sin especificarlo de manera explicita.

Ahora, para lo que quieres de maquetar las secciones, puedes usar un grid. Y para ser sincero: lo tenías básicamente hecho, lo único que he cambiado con respecto a tu ejemplo ha sido un valor y ya funciona. Quita el calc del ancho de la columna en grid-template-columns y dale el valor auto para que A y C siempre ocupen el espacio disponible.

Aquí lo puedes ver funcionando:

* {
  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: 768px) {
  .principal_container {
    grid-template-columns: [col1-start] auto [col2-end] 10em;
    grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
  }
  .content_01 {
    grid-column: col1-start;
    grid-row: row1-start;
  }
  .content_02 {
    grid-column: col2-end;
    grid-row: row1-start / row2-end;
  }
  .content_03 {
    grid-column: col1-start;
    grid-row: row2-start;
  }
}
<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>

</div>