F I L A
C
O
L
U
M
N
A
Clase 2
El diseño de cuadrícula CSS o cuadrícula CSS es una técnica en CSS que permite a los desarrolladores web crear diseños de diseño web complejos y receptivos de forma más fácil y consistente en todos los navegadores.
Clase 3
Grid Container: va a ser el elemento padre que va a tener puesto un nuevo tipo de display: grid. Nos permite colocar otras propiedades para manipular nuestro layaout.
Ejemplo:
<div class="container">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
</div>
Grid Item: Son nuestro componentes, contenido, lo que vamos a manejar. Nuestras filas o columnas que vamos a mover a nuestro gusto. Son hijos directos de grid.
Ejemplo:
<div class="container">
<div class="item"></div>
<div class="item">
<p class="sub-item"></p>
</div>
<div class="item"></div>
</div>
Grid Line: Lineas divisorias horizontales y verticales.
Grid Track: Espacio entre dos líneas adyacentes. Filas y columnas.
Grid Cell: Celdas, espacio en dos filas adyacentes y 2 columnas adyacentes.
Grid Area: Espacio rodeado por 4 grid lines
Clase 4
Creamos una carpeta "Columna" y dentro "index.html"
Designar columnas :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Columnas</title>
<style>
body {
font-family: Arial;
}
.container {
display: grid;
grid-template-columns: 25% 200px 25%;
}
.item {
background: lightblue;
padding: 10px;
border: 1px solid red;
}
</style>
</head>
<body>
<section class="container">
<div class="item">contenido #1</div>
<div class="item">contenido #2</div>
<div class="item">contenido #3</div>
<div class="item">contenido #4</div>
<div class="item">contenido #5</div>
<div class="item">contenido #6</div>
<div class="item">contenido #7</div>
<div class="item">contenido #8</div>
<div class="item">contenido #9</div>
<div class="item">contenido #10</div>
<div class="item">contenido #11</div>
<div class="item">contenido #12</div>
</section>
</body>
</html>
Clase 5 👽
Carpeta: "Filas", Archivo: "index.html"
Para definir las filas:
grid-template-rows: valores;
Definir filas y columnas:
grid-template: filas / columnas;
grind implicito: Es cuando tenemos filas y/o columnas que no definimos pero forman parte de nuestro grid
grid explicito: Es cuando definimos el numero de columnas y/o filas.
Clase 6
Carpeta: "Displays", Archivo: "index.html"
Display subgrid para heredar la configuración del grid padre (cuando se esten anidando grids).
display: subgrid; // No disponible aun
Display inline-grid muestra el grid en una sola linea:
display: inline-grid; // No disponible aun
Clase 7
Carpeta: "Displays", Archivo: "index.html"
Espaciado entre columnas
column-gap: value;
Espaciado entre filas
row-gap: value;
Espaciado entre filas y columnas
gap: rows columns;
Notas
grid-column-gap: value;
Espaciado entre columnas
grid-row-gap: value;
Espaciado entre filas
grid-gap:
rows columns Espaciado
Clase 8
Carpeta: "Funciones", Archivo: "index.html"
Unidad de medida: fracciones fr
distrubuye el espacio disponible en formas iguales.
Si tenemos tres columnas, y a cada una de ella le asignamos un valor de 1fr, el ancho del grid track vertical se repetirá por igual hasta ocupar el ancho total.
Si en lugar de ser tres columnas con un mismo ancho le asignamos a una de ellas el valor 2fr, esta ocupará el doble de ancho que las columnas a las que le hemos asignado el valor 1fr.
Este valor lo podemos asignar tanto a columnas como a filas.
Funciones:
repeat(cantidad, valor)
Para usar el mismo valor varias veces
minmax(min, max)
Agregar un valor minimo y maximo para el tamaño al hacer responsive
Clase 9
Carpeta: "Areas", Archivo: "index.html"
Empezamos !!
¿Cuantas filas y columnas se observan en la siguiente imagen?
Vamos a construir el siguiente grid como ejemplo para conocer algunas propiedades y valores:
Partimos de un html simple.
<section class="container">
<div class="item header">header</div>
<div class="item left">left</div>
<div class="item contenido">contenido</div>
<div class="item footer">footer</div>
</section>
En el CSS o en mi caso la etiqueta <style>
ponemos lo siguiente
¡Empezamos!
Establecemos las columnas y filas con la propiedad grid-template
. Esta propiedad se le asigna el grid
al container
Con la propiedad grid-template-areas
definimos los nombres de las áreas de contenido.
La propiedad grid-area asigna
a un **item**
el nombre de area que creamos con grid-template-areas
haciendole referencia y así poder utilizarlo.
En el ejemplo grid-template
ponemos 3 filas /
2 columnas y en grid-template-areas
definimos los nombres y como estaran establecidas cada aréa, mas abajo defino su color y a que aréa pertenece.
.container {
display: grid;
grid-template: 100px 1fr 150px/ 200px 1fr;
gap: 10px;
height: 100vh;
grid-template-areas: "header header"
"left contenido"
"footer footer";
}
.header {
background-color: #5f4d68;
grid-area: header;
}
.left {
background-color: #9d7eae;
grid-area: left;
}
.contenido {
background-color: #7dc7db;
grid-area: contenido;
}
.footer {
background-color: #b6e585;
grid-area: footer;
}
.item {
padding: 10px;
border: 1px;
}
.item:nth-of-type(4){
overflow: auto;
display: grid;
grid-template: 50px 50px 50px / 100px 100px 100px;
}
La disposición de los item según el código anterior es la siguiente:
Nota:
vh
y vw
: Las medidas vh y vw son medidas relativas de acuerdo al viewport. Vh
hace referencia a la centésima parte de la altura del viewport y vw a la centésima parte del ancho del viewport.
- 1vh = 1% de la altura del viewport
- 100vh = altura del viewport
- 1vw = 1% del ancho del viewport
- 100vw = ancho del viewport.
Clase 10
Carpeta: "Tamaño", Archivo: "index.html"
Si conocemos bien el número de líneas que ocupa cada elemento no hay riesgo a equivocarnos.
Sintaxis sin resumir:
grid-column-start: 1;
grid-column-end: 3;
Sintaxis resumida:
grid-column: 1 / 3;
grid-column: inicio / final;
Sintaxis definiendo por líneas:
grid-column: 1 / 3;
Sintaxis definiendo por columnas:
grid-column: 1 / span 2;
++Sintaxis para ocupar todo el ancho dinamicamente: ++
grid-column: 1 / -1;
Nota:
Para jugar y complementar esta clase
Clase 11
Carpeta: "Row-size", Archivo: "index.html"
grid-row-start: valor;
grid-row-end: valor;
Igual que las columnas para escribir esto en una sola linea:
grid-row: inicio / final;
El negativo significa que comienza contando desde el final. Por ejemplo si quieres que contenga todo el ancho hasta que empieza la ultima columna utilizarías
grid-column: 1 / -2;
Para definir las columnas utilizamos
grid-column-star:1; /*en que columna iniciara nuestor elemento*/
grid-column-end: 3; /*en que columna terminara recordemos que se cuenta desde el primer grid line*/
grid-column: 1/3; /*esta es la forma de agrupar el start y el end en una sola linea de codigo start/end */
grid-column: 2/span 2; /*Con span indicamos los lugares que va a ocupar */
grid-column: 1/-1; /* Con esto lograremos que el elemento ocupe todo el espacio de mis columnas */
Para definir filar utilizamos
grid-row-star:1; /*en que fila iniciara nuestor elemento*/
grid-row-end: 3; /*en que fila terminara recordemos que se cuenta desde el primer grid line*/
grid-row: 1/3; /*esta es la forma de agrupar el start y el end en una sola linea de codigo start/end */
grid-row: 2/span 2; /*Con span indicamos los lugares que va a ocupar */
grid-row: 1/-1; /* Con esto lograremos que el elemento ocupe todo el espacio de mis filas*/
grid-column: [# columna donde inicia] / [#columna donde termina]
Clase 12
Carpeta: "Nombre-linea", Archivo: "index.html"
Podemos usar nombres para darle tamaño a las celdas definiendo de que linea a que linea vamos
Lo que hacemos es confeccionar manualmente (sin repeat) las filas y columnas y luego entre parentesis recto le ponemos el nombre a cada linea que componen la grilla.
[lo que está entre parentesis recto es el nombre que pasará a tener la linea]
Clase 13
Carpeta: "Grid-implicito", Archivo: "index.html"
Para cambiar el flujo automático de mi grid:
grid-auto-flow: column;
Por defecto viene grid-auto-flow: row;
Para asignar el valor por defecto de el espacio de las columnas o filas que no han sido asignadas:
grid-auto-columns: valores;
grid-auto-rows: valores;
grid-auto-rows
: especifica la altura de las filas añadidas del grid implícito.
grid-auto-colums
: especifica el ancho de las columnas añadidas del grid implícito
Clase 14
Carpeta: Alineando-items / Archivo: index.html
Para alinear contenido padre:
justify-items: valor;
para alineación horizontal
align-items: valor;
para alineación vertical
Los valores que toman por defecto es stretch el cual hace que tomen todo el valor asignado en la fila o columna.
Para asignar la alineación de un solo elemento podemos usar (items dentro de padre):
justify-self: valor;
que manipula el objeto en sentido horizontal.
align-self: valor;
que manipula el objeto en sentido vertical.
Stretch:
Estira el contenido al espacio que nos de el grid.
Start:
Coloca el contenido hacia el inicio(izquierda), y los elementos ocupan el ancho que tienen de contenido.
End:
Coloca el contenido hacia la derecha, igual que start los elementos ocuparán el ancho que tienen de contenido.
Center:
Los elementos quedarán al centro de la pantalla.
Clase 15
Carpeta: Alineando-contenidos / Archivo: index.html
Para alinear mis items del grid utilizamos
-
justify-items: Los alinea con respecto a la horizontal.
-
align-items: Los alinea con respecto al eje vertical.
Pero con las anteriores propiedades que definimos en nuestro container, afectaran a todos sus hijos, si queremos que solo afecte en especifico a uno utilizamos:
.item:nth-of-type(5){
align-self;:
justify-self:;
}
Los valores que pueden recibir dichas propiedades son.
- start, center, end, stretch
Para alinear toda nuestro grid utilizamos las propiedades
-
justify-content: Lo alinea con respecto a el eje horizontal.
-
align-content: Lo alinea con respecto al eje vertical.
Estas propiedades pueden recibir de valores:
start, center, end, stretch, space-around, space-between, space-evenly