Clase 11 - Grilla Bootstrap CSS

Bootstrap Grid

Trabajamos en clase para la resolución del TP5 de Pantallas Responsivas.

Para resolver el primer ejercicio, lo vamos pensando en etapas, enfocandonos en un breakpoint a la vez.

Layout 1

Dejo un detalle del paso a paso del primer ejercicio:

Paso 0: Estado Inicial

Empezamos con una estructura en HTML:

<div class="container-sm g-0">
    <div class="row g-0">
        <div class="col">
            <div class="content s1">sección 1</div>
        </div>
        <div class="col">
            <div class="content s2">sección 2</div>
        </div>
        <div class="col">
            <div class="content s3">sección 3</div>
        </div>
        <div class="col">
            <div class="content s4">sección 4</div>
        </div>
        <div class="col">
            <div class="content s5">sección 5</div>
        </div>
        <div class="col">
            <div class="content s6">sección 6</div>
        </div>
    </div>
</div>

Se ve de la siguiente manera:

sección 1
sección 2
sección 3
sección 4
sección 5
sección 6

Paso 1: Breakpoint Inicial

Modificamos el HTML para que cumpla el layout en su breakpoint inicial, esto es que cada elemento ocupe el 100% del ancho disponible.

Para esto usamos col-12 en cada columna (modificamos la clase inicial).

<div class="container-sm g-0">
    <div class="row g-0">
        <div class="col-12">
            <div class="content s1">sección 1</div>
        </div>
        <div class="col-12">
            <div class="content s2">sección 2</div>
        </div>
        <div class="col-12">
            <div class="content s3">sección 3</div>
        </div>
        <div class="col-12">
            <div class="content s4">sección 4</div>
        </div>
        <div class="col-12">
            <div class="content s5">sección 5</div>
        </div>
        <div class="col-12">
            <div class="content s6">sección 6</div>
        </div>
    </div>
</div>

Se ve de la siguiente manera:

sección 1
sección 2
sección 3
sección 4
sección 5
sección 6

Con este cambio “tomamos el control” del comportamiento de las columnas, y ya no permitimos que se ajusten al tamaño disponible de forma automática (ese es el funcionamiento de la clase col) sino que forzamos a que siempre tengan el tamaño que definimos nosotros.

En este caso el tamaño es 100% del ancho, como lo define la clase col-12.

Paso 2: Segundo Breakpoint (sm)

Agregamos las modificaciones para el segundo breakpoint. En este caso queremos que las secciones ocupen el 50% de la pantalla.

Para esto vamos a usar la clase col-6, pero con un infijo de breakpoint sm, quedando col-sm-6.

<div class="container-sm g-0">
    <div class="row g-0">
        <div class="col-12 col-sm-6">
            <div class="content s1">sección 1</div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="content s2">sección 2</div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="content s3">sección 3</div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="content s4">sección 4</div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="content s5">sección 5</div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="content s6">sección 6</div>
        </div>
    </div>
</div>

Se ve de la siguiente manera:

sección 1
sección 2
sección 3
sección 4
sección 5
sección 6

Paso 3: Tercer Breakpoint (md)

Ahora tenemos que agregar una clase más, para que cada sección ocupe un tercio de la pantalla disponible. Para esto, podemos usar col-4, pero otra vez con un breakpoint responsive, nos queda col-md-4.

<div class="container-sm g-0">
    <div class="row g-0">
        <div class="col-12 col-sm-6 col-md-4">
            <div class="content s1">sección 1</div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <div class="content s2">sección 2</div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <div class="content s3">sección 3</div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <div class="content s4">sección 4</div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <div class="content s5">sección 5</div>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <div class="content s6">sección 6</div>
        </div>
    </div>
</div>

Se ve de la siguiente manera:

sección 1
sección 2
sección 3
sección 4
sección 5
sección 6

Layout 2

Para el segundo layout vimos que puede resultarnos útil separar la primera sección a su propia row, dejando el resto de secciones en una segunda row.

Con esto nos aseguramos que aunque “no se completen las 12 unidades” de la row, la primera sección se muestra siempre sola.

<div class="container-sm g-0">
    <div class="row g-0">
        <div class="col">
            <div class="content s1">sección 1</div>
        </div>
    </div>
    <div class="row g-0">
        <div class="col">
            <div class="content s2">sección 2</div>
        </div>
        <div class="col">
            <div class="content s3">sección 3</div>
        </div>
        <div class="col">
            <div class="content s4">sección 4</div>
        </div>
        <div class="col">
            <div class="content s5">sección 5</div>
        </div>
        <div class="col">
            <div class="content s6">sección 6</div>
        </div>
    </div>
</div>