Unidad 14. Técnicas de diseño web (XII)

14.4. Diseños mixtos

En realidad los diseños de páginas web no siguen un modelo estricto, la mayoría de los diseños son mixtos, aunque la estructura general tenga un tipo diseño de los que hemos visto, luego para cada parte concreta puede interesar utilizar un diseño específico distinto al de la estructura general. Respecto al posicionamiento ocurre lo mismo, se suelen mezclar diversos tipos de posicionamiento (fijo, flotante, rejilla, ...)

Por ejemplo, a continuación hemos utilizado el diseño líquido con rejilla para la estructura general y un diseño con cajas flexibles para la zona principal.

En el siguiente código HTML podemos ver que hemos definido un contenedor general para la rejilla (contenedor_mixto_grid), y un contenedor para cada elemento (cabecera_mixto_grid, menu_mixto_grid, principal_mixto_grid, lateral_mixto_grid y pie_mixto_grid), estos contenedores están definidos dentro de la rejilla, pero el contenedor principal_mixto_grid, tiene dentro del él un contendor de tipo caja flexible (contenedor_mixto_flex) que a su vez contiene ocho elementos.

<div class="contenedor_mixto_grid">
  <div class="cabecera_mixto_grid">Cabecera </div>

  <div class="menu_mixto_grid">  menu</div>
  <div class="principal_mixto_grid">
    <div class="contenedor_mixto_flex">
      <div class="mixto_flex">principal 1</div>
      <div class="mixto_flex">principal 2</div>
      <div class="mixto_flex">principal 3</div>
      <div class="mixto_flex">principal 4</div>
      <div class="mixto_flex">principal 5</div>
      <div class="mixto_flex">principal 6</div>
      <div class="mixto_flex">principal 7</div>
      <div class="mixto_flex">principal 8</div>
    </div>
  </div>
  <div class="lateral_mixto_grid">lateral</div>
  <div class="pie_mixto_grid"> pie</div>
</div>

En la siguiente hoja de estilo podemos ver como el contenedor general para la rejilla (contenedor_mixto_grid), es de tipo rejilla (display: grid;) y el contenedor contenedor_mixto_flex es de tipo caja flexible (display: flex;) con lo cual tenemos un diseño mixto combinando rejilla y cajas flexibles.

De esta forma hemos conseguido asignar a los ocho elementos de la zona principal las características deseadas, y que estaban disponibles en el modelo de cajas flexibles. En este caso con estas propiedades: flex-wrap: wrap; flex:auto; justify-content: space-around; align-items: center

.contenedor_mixto_grid {
  display: grid;
  grid-template-columns: 15% 65% 20%;
  grid-template-rows: 1fr 4fr 1fr;
}
.cabecera_mixto_grid {
  grid-row: 1;
  grid-column: 1 / 4;
}
.menu_mixto_grid {
  grid-row: 2;
  grid-column: 1 ;
}
.principal_mixto_grid {
  grid-row: 2;
  grid-column: 2 ;
}
.lateral_mixto_grid {
  grid-row: 2;
  grid-column: 3 ;
}
.pie_mixto_grid {
  grid-row: 3;
  grid-column: 1/4;
}
.contenedor_mixto_flex {
  display: flex;
  flex-wrap: wrap;
  flex:auto;
  justify-content: space-around;
  align-items: center
}
.mixto_flex {
  width: 100px;
  height: 50px;
}

Y este es el resultado del diseño líquido mixto (grid + flexbox):

 

De forma similar podríamos crear diseños adaptativos mixtos combinando los diferentes tipos de posicionamiento (fijos, flotantes, rejilla, cajas flexibles) que es lo que en realidad sucede en los sitios web del mundo real.

Para practicar lo aprendido realiza el ejercicio Diseño líquido

Para saber más sobre los temas de esta unidad ...

 

Diseños con float, flex y grid: w3schools

Menús, barras de navegación: w3schools

Unidades viewport, vh, vmin: YouTube , Alligator.

 

Ejercicio propuesto de la Unidad 14

Prueba evaluativa de la Unidad 14