Skip to content

Latest commit

 

History

History
124 lines (97 loc) · 6.2 KB

sem3_gridsystem.md

File metadata and controls

124 lines (97 loc) · 6.2 KB
Raw

Conociendo el Grid System de Materialize

Documentación

La documentación específica para esta sección la encuentras aquí.

Grid System

Su traducción literal sería Sistema de Grillas, pero mejor no tratemos de traducirlo. Específicamente en Materialize se utiliza el tradicional sistema de 12 columnas, en el que, sin importar el ancho de la pantalla, se considera que esta se divide en 12 columnas. De esta manera, podemos agrupar y maquetear toda la web considerando distribuciones y agrupaciones de estas columnas.

Este es el código básico con el que empezaríamos a trabajar una web en Materialize:

<body>
  <div class="container">
    <div class="row">
        Acá van las columnas, dentro de row.
    </div>
  </div>
</body>

Si revisas el link de la documentación del grid system encontrarás que tenemos dos opciones para empezar a trabajar con este: Esta es una columna sin .containerdentro del div inicial: Sin Container

<body>
  <div>
    <div class="row">
        <div class="col s12"></div>
    </div>
  </div>
</body>

Esta es una columna con .container dentro del div inicial: Con Container

<body>
  <div class="container">
    <div class="row">
        <div class="col s12"></div>
    </div>
  </div>
</body>

Creando Columnas

Para crear una columna y definir su tamaño en un div, debemos utilizar uno de los siguiente Prefijos de Clases junto con el número de columnas que deseemos utilizar:

Dispositivos Móviles
<= 600px		 Tablets
<= 992px		 Dispositivos de Escritorio
> 992px
Prefijo de Clase .s .m .l
Ancho de Contenedor 85% 85% 70%
Número de Columnas 12 12 12

Descarga el ejemplo aquí: F-Ejemplo-3.1.zip ( 931 KB )

Dentro de la Sección Central del index.htmk del ejemplo que te acabas de descargar encontrarás el siguiente código:

<!--   Sección Central   -->
<div class="container">
<div class="row">
  <div class="col s12 m4">
    <div class="icon-block">
      <h2 class="center light-blue-text"><i class="material-icons">flash_on</i></h2>
      <h5 class="center">Agiliza el Desarrollo</h5>

      <p class="light">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

  <div class="col s12 m4">
    <div class="icon-block">
      <h2 class="center light-blue-text"><i class="material-icons">group</i></h2>
      <h5 class="center">Experiencia Enfocada en el Usuario</h5>

      <p class="light">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

  <div class="col s12 m4">
    <div class="icon-block">
      <h2 class="center light-blue-text"><i class="material-icons">settings</i></h2>
      <h5 class="center">Fácil Para Trabajar</h5>

      <p class="light">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
      cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

</div>
</div>

Verás que los <div class="col s12 m4"> las clases s12 y m4 indican que cuando la pantalla es pequeña o small (<= 600px) el div ocupará las 12 columnas de la pantalla. Pero, si la pantalla es mediana (<= 992px), el div ocupará únicamente 4 columnas. Además, como no se está usando ninguna propiedad para pantallas grandes o large, para pantallas de un tamaño > 992px, se seguirán utilizando las propiedades para pantallas medianas.

Este es un primer ejemplo bastante simple para que puedas ir entendiendo cómo se usa el Grid System de 12 columnas de Materialize.

A continuación un video para que pueda profundizar un poco más:

Grid System

Continuar a la siguiente sección