Sistema Grid
mdui ofrece un sistema de rejilla responsive de 12 columnas, pensado para dispositivos móviles.
Lectura relacionada
Contenedor de diseño
mdui requiere un contenedor envoltorio .mdui-container para el contenido de la página y el sistema de rejilla. Ofrecemos dos clases para este propósito.
La clase .mdui-container ocupa entre el 92% y el 96% del ancho de la pantalla, con un ancho máximo de 1280px.
<body>
<div class="mdui-container">
...
</div>
</body>La clase .mdui-container-fluid ocupará siempre el 100% del ancho de la pantalla.
<body>
<div class="mdui-container-fluid">
...
</div>
</body>Rejilla básica
.mdui-row debe incluirse dentro de un .mdui-container o .mdui-container-fluid para garantizar una alineación y un relleno correctos.
Incluye varias clases .mdui-col-xs-[1-12] dentro de un .mdui-row. Los números del nombre de la clase .mdui-col-xs-[1-12] indican cuántas columnas ocupa el elemento.
Si el número total de columnas en una fila supera 12, las columnas adicionales se pasarán a la siguiente línea.
<div class="mdui-row">
<div class="mdui-col-xs-3">.mdui-col-xs-3</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-9">.mdui-col-xs-9</div>
</div>
<div class="mdui-row">
<div class="mdui-col-xs-12">.mdui-col-xs-12</div>
</div>
Rejilla Responsive
.mdui-col-xs-[1-12]Se aplica en todos los dispositivos, como móviles y ordenadores..mdui-col-sm-[1-12]Se aplica en pantallas pequeñas y superiores, como tabletas..mdui-col-md-[1-12]Se aplica en pantallas medianas y superiores, como portátiles..mdui-col-lg-[1-12]Se aplica en pantallas grandes y superiores, como ordenadores de escritorio..mdui-col-xl-[1-12]Se aplica en pantallas muy grandes, como televisores.
Combina estas clases para lograr diseños responsive.
Los puntos de ruptura responsive son los siguientes:
| class | Rango | Ancho del espacio |
|---|---|---|
.mdui-col-xs-[1-12] | > 0px | 16px (8px a cada lado de cada columna) |
.mdui-col-sm-[1-12] | > 600px | |
.mdui-col-md-[1-12] | > 1024px | |
.mdui-col-lg-[1-12] | > 1440px | |
.mdui-col-xl-[1-12] | > 1920px |
<!-- En pantallas extra pequeñas, la primera columna ocupa el 100% de ancho y la segunda el 50%. En pantallas pequeñas y superiores, la primera columna ocupa el 66,6% y la segunda el 33,3%. -->
<div class="mdui-row">
<div class="mdui-col-xs-12 mdui-col-sm-8">.mdui-col-xs-12<br/>.mdui-col-sm-8</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>
<!-- En pantallas extra pequeñas, cada columna ocupa el 50% de ancho, y en pantallas pequeñas y superiores, cada columna ocupa el 33,3%. -->
<div class="mdui-row">
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
<div class="mdui-col-xs-6 mdui-col-sm-4">.mdui-col-xs-6<br/>.mdui-col-sm-4</div>
</div>
<!-- En todos los dispositivos, cada columna ocupa el 50% de ancho. -->
<div class="mdui-row">
<div class="mdui-col-xs-6">.mdui-col-xs-6</div>
<div class="mdui-col-xs-6">.mdui-col-xs-6</div>
</div>Espacio entre columnas
Por defecto, hay un espacio de 16px entre columnas. Solo tienes que añadir la clase .mdui-row-gapless a .mdui-row para eliminarlo.
<div class="mdui-row mdui-row-gapless">
<div class="mdui-col-xs-4">mdui-col-xs-4</div>
<div class="mdui-col-xs-4">mdui-col-xs-4</div>
<div class="mdui-col-xs-4">mdui-col-xs-4</div>
</div>Desplazamiento de columnas
Usa .mdui-col-offset-xs-[1-12], .mdui-col-offset-sm-[1-12], .mdui-col-offset-md-[1-12], .mdui-col-offset-lg-[1-12] y .mdui-col-offset-xl-[1-12] para desplazar columnas hacia la derecha. El número del nombre de la clase indica cuántas columnas desplazar.
<div class="mdui-row">
<div class="mdui-col-md-4">.mdui-col-md-4</div>
<div class="mdui-col-md-4 mdui-col-offset-md-4">.mdui-col-md-4 .mdui-col-offset-md-4</div>
</div>
<div class="mdui-row">
<div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
<div class="mdui-col-md-3 mdui-col-offset-md-3">.mdui-col-md-3<br/>.mdui-col-offset-md-3</div>
</div>
<div class="mdui-row">
<div class="mdui-col-md-6 mdui-col-offset-md-3">.mdui-col-md-6<br/>.mdui-col-offset-md-3</div>
</div>Columnas anidadas
Implementa columnas anidadas añadiendo nuevos elementos .mdui-row y .mdui-col-[*] dentro de las columnas existentes. El número de columnas de una fila anidada no puede superar 12.
<div class="mdui-row">
<div class="mdui-col-xs-9">
Level 1: .col-xs-9
<div class="mdui-row">
<div class="mdui-col-xs-8 mdui-col-sm-6">Level 2: .col-xs-8 .col-sm-6</div>
<div class="mdui-col-xs-4 mdui-col-sm-6">Level 2: .col-xs-4 .col-sm-6</div>
</div>
</div>
</div>Columnas de igual ancho
Incluye varios elementos con la clase .mdui-col dentro de .mdui-row-xs-[1-12], y estos elementos se repartirán por igual. Por ejemplo, cada elemento .mdui-col de .mdui-row-xs-5 ocupará el 20% del ancho.
<div class="mdui-row-xs-5">
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
<div class="mdui-col">5</div>
</div>Combina .mdui-row-xs-[1-12], .mdui-row-sm-[1-12], .mdui-row-md-[1-12], .mdui-row-lg-[1-12] y .mdui-row-xl-[1-12] para lograr diseños responsive.
Lista de clases CSS
| Nombre de clase | Descripción |
|---|---|
.mdui-container | Contenedor de diseño con límites de ancho |
.mdui-container-fluid | Contenedor de diseño de 100% de ancho |
.mdui-row | Define una fila |
.mdui-col-[xs|sm|md|lg|xl]-[1-12] | Define una columna |
.mdui-row-gapless | Elimina el espacio entre columnas |
.mdui-col-offset-[xs|sm|md|lg|xl]-[1-12] | Desplazamiento de columnas |
.mdui-row-[xs|sm|md|lg|xl]-[1-12] | Columnas de igual ancho |