Grid

La Grid es un sistema estándar que divide la pantalla en 12 columnas

El container la clase que agrega o centraliza nuestro contenido. Todo lo que contenga el div container quedara centrado en la pagina, creando unos márgenes a los lados

Sigamos con el Grid. Cuando trabajamos con layaut, podemos trabajar con Flexbox, SSGrid u ocupar estos frameworks.
Imaginemos que queremos dividir el sitio en 3 partes , dos mas estrechas y la central mas ancha. Ocuparemos 3 columnas, 6 columnas, 3 columnas.
Lo primero es envolver todo en un div con clase row. Con esto indicamos que vamos a hacer una fila y utilizar el sistema de columnas.

Para crear una columna creamos un div con la clase col s3. Asi indicamos que ocupe 3 columnas del Grid
El col es que será una columna, la s que es una pantalla small, y 3 que será una columna la que ocupe

<div class="row"> <div class="col s12 blue">columna 12</div> </div> <div class="row"> <div class="col s6 yellow">columna 6</div> <div class="col s6 green">columna 6</div> </div> <div class="row"> <div class="col s12 m3 orange">columna izkierda 3</div> <div class="col s12 m6 blue">columna central 6</div> <div class="col s12 m3 orange">columna derecha 3</div> </div>

Puntos de Ruptura

En el ejemplo anterior se vera igual en cualquier pantalla superior a 600px porque no le hemos definido ninguna otra disposición mas que esas dos la s y la m