2

Tengo este auto reto y quisiera saber qué creen en esta comunidad sobre cuál sería mejor estructurar o maquetar el HTML y CSS para un diseño como el de la siguiente imagen:

introducir la descripción de la imagen aquí

Teniendo en cuenta, además, las siguientes condiciones:

  • Código HTML con el menor número de elementos o anidaciones.
  • Usando técnicas CSS modernas y sin tantas líneas de código.
  • No usar JavaScript como reto.

Estuve tratando de lograrlo usando grid, pero aún no tengo tan claro cómo funciona y no sé cómo centrar el contenido al centro en pantallas superiores a los 1080px. Otra cosa, cuando decida seguir agregando más bloques a la columna 1 se sitúa en la misma fila que el elemento C y no entiendo por qué, además que no se si haya alguna forma de alterar el orden de los elementos para lograr la el diseño "SM":

*{
  box-sizing: border-box;
}

body{
  background: #f1f2f2;
}

.principal_container{
  background: white;
  display: grid;
  padding: 10px;
  grid-gap: 10px;
}

.section{
  border: 5px solid blue;
  padding: 5px;
}

.content_01,
.content_03{
  max-width: 960px;
}

@media (min-width: 720px){

  .principal_container{
    grid-template-columns: 
      [col1-start] calc(100% - 10em - 10px)  
      [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 ;
  }

}
<body>

  <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>

</body>

Por lo que después opte por flex y usar calc para lograr mi objetivo. Lo consideré un poco más fácil de usar, pero no sé cómo hacer para que el bloque B se estire hasta la base del contenedor, sin embargo si decido colocar más elementos a la columna 1, si puedo hacerlo sin producir errores. Ejemplo:

*{
  box-sizing: border-box;
}

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

.principal_container{
  display: inline-block;
  background: white;
  display: flex;
  flex-wrap: wrap; 
  padding: 5px;
  justify-content: left;
}

.section{
  border: 5px solid blue;
  margin: 5px;
  padding: 5px;
  color: purple;
  width: 100%;
  order: 2;
}

.content_02{
  order: 3;
}



@media (min-width: 720px){
  .content_01, .content_03{
    width: calc(100% - 10em - 20px);
    max-width: 960px;
  }

  .content_02{
    width: 10em;
    order: 2;
  }
}
<body>

  <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>

</body>

Pero, pienso que no es la solución más óptima, ya que creo que grid podría ser la mejor opción, lo único es que no se como solucionar el inconveniente de agregar más elementos posteriores a la columna 1 o alinear al centro en pantallas "XL".

Otra solución que se me ocurrio, es usar position: absolute y jugar con el padding del principal_container, pero quisiera lograrlo sin alterar el flujo de los elementos.

¿Como lo solucionarían ustedes?

1
  • Yo veo dos columnas, una formada por A+C y otra con B. Lo que haría sería crear, por tanto, dos elementos y en el primero meter A y C. El resto es relativamente sencillo: cuando la pantalla se estreche demasiado las dos columnas ocupan todo el ancho, pasando a ser una. Commented el 18 sept. 2018 a las 12:02

1 respuesta 1

1

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.

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>


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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.