Curso HTML 13.3 HTML preparado para diseño responsivo (contenedores, wrappers, grids)

13.3 HTML preparado para diseño responsivo (contenedores, wrappers, grids)

En diseño responsivo es esencial estructurar el HTML de manera semántica y modular. Los tres pilares de esta preparación son:

• Contenedores: áreas que limitan el ancho del contenido.
• Wrappers: envoltorios que centran y dan separación extra.
• Grids: sistemas de columna para distribuir contenido en filas y columnas.

1. Contenedores

Un contenedor define un ancho máximo y aplica relleno horizontal para que el contenido no toque los bordes del viewport. Existen dos variantes comunes:

Ejemplo de uso en HTML:

<div class='container-fixed'>
  <header class='site-header'>
    <h2>Mi sitio responsivo</h2>
  </header>
</div>
  

En pantallas pequeñas, .container-fixed se ajuste al 100% del ancho disponible. En pantallas grandes, se queda en el valor máximo definido en CSS.

2. Wrappers

El wrapper (envoltorio) suele proporcionar un max-width y centrado automático. Se usa para limitar aún más secciones específicas.

• Clases comunes: .wrapper, .section-wrapper.
• Propósito: crear bloques centrados con separación superior e inferior.

Ejemplo de estructura:

<div class='container-fixed'>
  <div class='wrapper'>
    <h3>Título de sección</h3>
    <p>Este párrafo está limitado por el wrapper.</p>
  </div>
</div>
  

3. Sistemas de Grid

Un grid divide el espacio horizontal en columnas. La convención más extendida es un grid de 12 columnas:

Es habitual combinar estas clases con puntos de ruptura (breakpoints):

• .col-sm-* para ≥576px
• .col-md-* para ≥768px
• .col-lg-* para ≥992px
• .col-xl-* para ≥1200px

Ejemplo de grid básico:

<div class='container-fixed'>
  <div class='row'>
    <div class='col-12 col-md-6 col-lg-4'>
      <article>
        <h4>Artículo A</h4>
        <p>Contenido del artículo A.</p>
      </article>
    </div>
    <div class='col-12 col-md-6 col-lg-4'>
      <article>
        <h4>Artículo B</h4>
        <p>Contenido del artículo B.</p>
      </article>
    </div>
    <div class='col-12 col-md-12 col-lg-4'>
      <aside>
        <h4>Sidebar</h4>
        <p>Información adicional.</p>
      </aside>
    </div>
  </div>
</div>
  

Comportamiento:

• En pantallas pequeñas: cada col-12 ocupa toda la fila.
• En pantallas medianas: dos columnas de 6+6 y luego la tercera (12) va en nueva fila.
• En pantallas grandes: tres columnas de igual ancho (4/12 cada una).

4. Ejemplo completo de layout responsivo

A continuación una plantilla semántica con header, nav, main, aside y footer.

<div class='container-fixed'>

  <header class='wrapper header'>
    <h2>Mi Blog Responsivo</h2>
  </header>

  <nav class='wrapper nav'>
    <ul>
      <li><a href='#'>Inicio</a></li>
      <li><a href='#'>Sobre mí</a></li>
      <li><a href='#'>Contacto</a></li>
    </ul>
  </nav>

  <main class='wrapper main-content'>
    <div class='row'>

      <section class='col-12 col-md-8'>
        <article>
          <h3>Entrada de Blog</h3>
          <p>Texto de ejemplo de la entrada.</p>
        </article>
      </section>

      <aside class='col-12 col-md-4'>
        <h4>Enlaces útiles</h4>
        <ul>
          <li><a href='#'>Recurso 1</a></li>
          <li><a href='#'>Recurso 2</a></li>
        </ul>
      </aside>

    </div>
  </main>

  <footer class='wrapper footer'>
    <p>© 2024 Mi Blog Responsivo</p>
  </footer>

</div>
  

Con esta estructura, añadiendo las reglas CSS apropiadas (.container-fixed, .row, .col-*, .wrapper, puntos de ruptura), conseguimos un sitio perfectamente responsivo, modular y semántico.