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