CSS Grids - Introducción a Grids
Hola a todos 😄 , En este apartado les Enseñare un poco o por lo menos lo que se y entiendo del sistema de grillas de CSS puro, cabe recalcar que este nuevo sistema de grillas que fue un gran avance para el diseño web, ya que puede decirse que su implementacion nace a partir de Flexbox y de ahi se empezaron a añadir nuevas caracteristicas a CSS3.
Podemos decir que CssGrids es la evolución o el siguiente nivel de Flexbox, y gracias a ello podemos agilizar y ser mas objetivos con nuestros diseños, por lo que ahora en la actualidad, creo yo, ese sera el nuevo modelaje de los diseños web.
He aqui lo Teorico de la clase:
“El Módulo de diseño de cuadrícula CSS ofrece un sistema de diseño basado en cuadrículas, con filas y columnas, lo que facilita el diseño de páginas web sin tener que usar flotadores y posicionamiento.”
Pues vamos a iniciar por lo mas basico: como puedo usarlo?
CssGrid se implementa con el famosísimo “Display”, ejemplo:
.grid-container{
display: grid;
}
o tambien:
.grid-container{
display: inline-grid;
}
al colocar solo “display: grid;” estamos declarando una cuadricula que puede abarcar todo el ancho de la pagina, es decir como un “display: block;”, y al decir que es un “display: inline-grid” es como decir un “display: inline-block” con lo cual podemos colocar un sistema de grillas pegado a otro en la misma “fila”, por decir algo.
Y debido a esto, todos los elementos (etiquetas, clases, id, etc…) dentro del sistema de grillas de Css se vuelven “elementos de la cuadricula”. Ejemplo:
<divclass="grids">
<divclass="caja caja-1">1</div>
<divclass="caja">2</div>
<divclass="caja">3</div>
<divclass="caja">4</div>
<divclass="caja caja-5">5</div>
<divclass="caja">6</div>
<divclass="caja">7</div>
<divclass="caja">8</div>
<divclass="caja caja-9">9</div>
<divclass="caja">10</div>
<divclass="caja">11</div>
<divclass="caja caja-12">12</div>
</div>
Aqui ponemos de ejemplo que el “div” con la clase “grids” es la caja de la cuadricula o el contenedor de las filas y columnas.
Todos los elementos con "class=‘caja’ " dentro de la clase “grids” son los elementos de la cuadricula, es decir cada “div” con la clase “caja” es un contenedor, en el cual ya podremos colocar todo el contenido que necesitemos.
Pero todavia faltan mucho mas cosas y mas interesantes que ahora te las explico:
Sí nosotros colocamos a la clase “grids” el “display= grid;”, lo que ocurrira es absolutamente NADA!!
el display requiere de varios estilos extras para que funcionen, ya me explico cuales son, pero primero antes vamos a darle unos toques hogareños al tema, vamos a colocarles colores de fondo y bordes para que se aprecien mejor las cosas:
.grids{
margin: 50px;
padding: 10px;
background: #7dc800;
border: 2px solid black;
border-radius: 15px;
display: grid; /*Aqui entra el la Magia!!*/
}
.caja{
margin: 10px;
padding: 10px;
text-align: center;
background-color: lightgreen;
border: 1px solid black;
border-radius: 15px;
}
Aqui solo estamos definiendo un diseño basico de los items, Oberva tu mismo como nos va quedando!.
Si te puedes fijar, como dije antes, no solo con el “display: grid;” quedara bien, hay que agregar dos estilos mas los cuales son los siguientes:
grid-template-columnsgrid-template-rows
Ejemplo:
.grid-container{
display: grid;
grid-template-columns: auto 50px auto 200px;
grid-template-rows: 400px auto auto auto;
}
Y ahora que rayos pasa?:
lo que sucede con “grid-template-columns” es que en ese estilo podemos definir en cuantas columnas se dividira el sistema de grillas, es decir:
.grid-container{
display: grid;
grid-template-columns: /* 1 columna / 2 columnas / 3 columnas / etc...*/;
}
Podemos colocar tantas columnas queramos!!, pero vamos a tener en cuenta algunos datos:
-Podemos utilizar dos valores: “auto” o “dimesión del ancho de la columna (porcentaje, pixeles o “ems”)”.
-Al especificar “grid-template-columns” estamos hablando de un “Ancho”, por lo cual entran los dos valores que antes mencione:
|auto| - Nos indica que el ancho de las columnas sera definido automaticamente dependiendo del ancho total del contenedor “grids” y de cuantas columnas establecimos.
|Valor definido| - Con este valor indicamos un valor concreto sobre el ancho de todo la columna (aqui depende donde lo coloques, si es la primera columna ahi colocas el valor, si es la cuarta columna, en el cuarto espacio o introduces el valor).
-Por obvias razones, la mejor opcion es colocar el valor de “auto” ya que te ayudara no solo a que se acomoden adecuadamente, sí no que ademas te ayudara con el sistema de Responsive Design.
-Para especificar CORRECTAMENTE este estilo basta con colocar el valor (ya sea “auto” o “definido”) en la posición de la columna que querramos y para ir separando los valores basto con un simple “espacio”.
Pero que rayos quisite decir con el monton de letras que estan arriba?; Bueno 😄 dejame explicartelo un poco mejor, ejemplo:
.grid-container{
display: grid;
grid-template-columns: auto 50px auto 200px auto;
}
Aqui en este ejemplo, ya colocamos nuestro “display: grid;” y seguido colocamos el “grid-template-columns” con los valores de la siguiente manera:
–De entrada podemos observar que colocamos 5 COLUMNAS, porque tenemos 5 valores:
columna 1.- auto
columna 2.- 50px
columna 3.- auto
columna 4.- 200px
columna 5.- auto
–Podemos ver que el primer valor es “auto”, es decir, que este tomara un ancho equivalente a lo que dispongan las otra columnas con respecto al ancho total del sitema de grillas o por lo menos el contenedor que las contiene.
–En el segundo valor definimos que toda esa columna tendra un ancho fijo de “50px”.
–De igual manera que la primera columna, este dispondra de un ancho dependiendo de las demas columnas.
–Aqui en la cuarta posición la columna tomara “200px” del total del ancho del sistema.
–Y por ultima este tomara un ancho automatico.
Vamos a ponernos un poco mas matematicos, si es que aun no me logro explicar bien:
Sí tenemos nuestro sistema de grillas con un ancho total “1000px”, entonces solamente restemos los valores que tenemos:
1000px - 200px (de la columna 4) = 800px restantes.
800px - 50px (de la columna 2) = 750px restantes.
750px / 3 (es decir las 3 columnas restantes que tiene un ancho de automatico) = 250px para cada columna.
Oberva los resultados tu mismo (espero que vallas sigueindo los pasos o por lo menos copiando y peguando como todo un profesional 😄 )
Y ahora se preguntaran: Oye pero yo vi que en el ejemplo que nos colocaste tambien hay un estilo similar que se llama “grid-template-rows”, que pasa con el?
Como ya te imaginaras, es el mismo pastel pero viendolo acostado en el sillón; me explico, es lo mismo que con las columnas, nada mas que ahora cambia el nombre de “columnas” por el nombre de “filas” y si no me crees, has lo mismo que te acaba de explicar pero en lugar de colocar “grid-template-columns” coloca “grid-template-rows”, para que me entiendas mejor, solo cambia la palabra de “…-columns” por “…-rows”, veras que pasa los mismo pero ahora con las filas (rows), es decir, parados, pero con la novedad que solo ocurre en las primeras 5 filas y ahi te lo dejo de tarea y entiendas por que pasa asi.
Super Nota: Me falto agregar una cosa curiosa:
–Si nosotros ya establecimos por ejemplo 3 columnas y 4 filas:
.grid-container{
display: grid;
grid-template-columns: auto 130px auto;
grid-template-rows: 400px auto auto auto;
}
–Y si nosotros seguimos agregando elememtos al sistema de grillas, es decir, agregamos mas “divs”, estos se reajustaran automaticamente a esa configuración.
Pero estaras pensando, y si al agregar mas elementos “divs” y alcanzo a contar que sobrepasaran mi numero de filas establecidos “rows”, que pasara?, pues muy facil, el mismo sistema repartira los nuevos elementos en tantas filas nuevas como necesites 😄
Ejemplo:
Sí tu colocaste 3 columnas y 3 filas para tu sistema, solo hechale coco, 3 columnas por 3 filas (3 x 3) nos da un total de 9 casillas o elemtos para que este completo tu sistema, pero resulta que dentro del sistema tu tienes un total de 15 “divs”, lo unico que hara el sistema es que te agregara 2 filas nuevas repartiendo los 6 nuevos “divs” o elementos dentro del sistema, y esto devido a que tu limite de columnas es 3 y recuerda que el flujo de la pagina siempre es en vertical.
Por que no intentas hacer este ultimo ejemplo por tu cuenta, te aseguro que en cuento lo acabes y te des cuenta de que realmente pasa asi, ya estaras listo para empezar a utilizar el nuevo “Display: grid” adecuadamente.
Saludos.
Lenin Felix.
