Grillas

Las grillas de Poncho se basan en las de bootstrap, pero recomendamos usar sólo las siguientes combinaciones para mantener una lógica entre los diferentes sitios del Gobierno.

---

Cómo usar las grillas

Las grillas siempre tienen que tener esta estructura.

• container
  • row
    • col

Si se omiten elementos pueden haber diferencias de márgenes y otros comportamientos inadecuados.

---

Grillas recomendadas

12 columnas

Se usa para tablas con mucha información, y para headers y footers de página.

Ancho de 12 columnas

                        <div class="container">
                            <div class="row">
                                <div class="col-sm-12">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit iure quod, quae architecto animi corporis dolorum odio? Assumenda itaque eos laboriosam at? Voluptatem maxime quam quas error possimus tempore ullam!</p>
                                </div>
                            </div>
                        </div>
                      

8 columnas

Se usa para casi todo tipo de contenido (párrafos, imagenes, videos, tablas con poca información). Se puede usar centrado o alineado a la izquierda.

Centrado

Ancho de 8 columnas

                        <div class="container">
                            <div class="row">
                                <div class="col-sm-8 col-sm-offset-2">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit iure quod, quae architecto animi corporis dolorum odio? Assumenda itaque eos laboriosam at? Voluptatem maxime quam quas error possimus tempore ullam!</p>
                                </div>
                            </div>
                        </div>
                      

Alineado a la izquierda

Ancho de 8 columnas

                        <div class="container">
                            <div class="row">
                                <div class="col-sm-8">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit iure quod, quae architecto animi corporis dolorum odio? Assumenda itaque eos laboriosam at? Voluptatem maxime quam quas error possimus tempore ullam!</p>
                                </div>
                            </div>
                        </div>
                      

4 columnas

Se usa en conjunto con 8 columnas, para mostrar navegación (a la izquierda) o información relacionada (a la derecha).

A la izquierda

Ancho de 4 columnas

Ancho de 8 columnas

                        <div class="container">
                            <div class="row">
                                <div class="col-sm-4">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                </div>
                                <div class="col-sm-8">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                </div>
                            </div>
                        </div>
                      

A la derecha

Ancho de 8 columnas

Ancho de 4 columnas

                        <div class="container">
                            <div class="row">
                                <div class="col-sm-8">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                </div>
                                <div class="col-sm-4">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                </div>
                            </div>
                        </div>