clase n°7

grids y media queries

recordá
poner a grabar la clase
 ¿qué es grid?
El CSS grid se puede utilizar para lograr muchos diseños diferentes. También se destaca por permitir
dividir una página en áreas o regiones principales, por definir la relación en términos de tamaño, posición
y capas entre partes de un control construido a partir de etiquetas HTML.

Una cuadrícula es un conjunto de líneas horizontales y verticales que se intersectan - un grupo define
columnas y el otro filas. Los elementos se pueden colocar en la cuadrícula respetando estas columnas y filas.

Grid contiene características de alineación para poder controlar la forma cómo se alinean los elementos
una vez colocados en un área de cuadrícula y cómo está alineada toda la cuadrícula.
Se puede colocar más de un elemento en una celda de la cuadrícula o área, las cuales pueden solaparse
o superponerse total o parcialmente entre sí, esto puede ser controlado con la propiedad z-index.

Grid es una poderosa especificación que, cuando se combina con otras partes de CSS como flexbox, puede
ayudar a crear diseños que antes eran imposibles de construir en CSS. Todo comienza creando una
cuadrícula en su contenedor de cuadrícula.
contenedor de grid
Creamos un contenedor de cuadrícula al declarar display: grid o display: inline-grid en un elemento.
Tan pronto como hagamos esto todos los hijos directos de ese elemento se convertirán en
elementos de la cuadrícula.

En este ejemplo, se tiene un contenedor div

con una clase “contenedor” y dentro <div class="contenedor">
hay cinco elementos hijos. <div>Uno</div>
<div>Dos</div>
<div>Tres</div>
<div>Cuatro</div>
<div>Cinco</div>
</div>

.contenedor {
display: grid;
}
vías, filas y columnas del Grid
�Definimos filas y columnas en nuestra cuadrícula con las propiedades grid-template-columns y
grid-template-rows. Éstas definen las vías de la cuadrícula. Una vía de cuadrícula es el área entre las
dos líneas -horizontales o verticales- dentro de la cuadrícula.

.contenedor {
display: grid;
grid-template-columns: 200px 200px 200px;
}
unidad FR�
La unidad fr representa una fracción del espacio disponible en el contenedor de la cuadrícula.

El siguiente código crearía tres vías con el mismo ancho,

.contenedor {
display: grid;
que se expanden y se encogen de acuerdo
grid-template-columns: 1fr 1fr 1fr; con el espacio disponible.
}

En el próximo ejemplo creamos una definición con una vía de 2fr

y luego dos vías de 1fr. El espacio disponible se divide en
.contenedor {
cuatro. Dos partes corresponden a la primera vía y una display: grid;
grid-template-columns: 2fr 1fr 1fr;
parte a cada una de las dos vías restantes de }
acuerdo con el espacio disponible.

En este ejemplo final mezclamos las vías de tamaño absoluto con

.contenedor { unidades de fracción(fr). La primera vía tiene 500 píxeles, por lo que
display: grid;
grid-template-columns: 500px 1fr 2fr; este ancho fijo se sustrae del espacio disponible.El espacio restante
} se divide en tres y se asigna en proporción a las dos vías flexibles.
 repeat�
Las cuadrículas grandes con muchas vías o celdas pueden utilizar la notación repeat() con el fin
de repetir todas o una sección de la lista de vías.
por ejemplo:

.contenedor {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

La notación de repetición se puede utilizar para una parte del listado de vías. En este siguiente
ejemplo se creó una cuadrícula con una vía inicial de 20 píxeles, luego una sección repetitiva de
6 vías de 1fr y luego una vía final de 20 píxeles.

.contenedor {
display: grid;
grid-template-columns: 20px repeat(6, 1fr) 20px;
}
 posicionando elementos
de acuerdo a las líneas
Estaremos explorando la colocación basada en líneas, el siguiente ejemplo demuestra cómo hacer
esto de una manera sencilla.
index.html style.css
Se tiene un contenedor div con una clase
<div class="boxes"> .boxes {
“boxes”, dentro hay cinco elementos hijos con <div class="box1">Uno</div> display: grid;
clases de box1 a box5 y posteriormente vemos <div class="box2">Dos</div> grid-template-columns: repeat(3, 1fr);
<div class="box3">Tres</div> grid-auto-rows: 100px;
su CSS. <div class="box4">Cuatro</div> }
<div class="box5">Cinco</div>
Posicionamos los dos primeros elementos en la </div> .box1 {
cuadrícula de tres vías de columna, usando las grid-column-start: 1;
grid-column-end: 4;
propiedades grid-column-start, grid-column-end, grid-row-start y grid-row-end. grid-row-start: 1;
grid-row-end: 3;
Trabajando de izquierda a derecha, el primer elemento se coloca partiendo de la línea de }
.box2 {
la columna 1, y se extiende a la línea de la columna 4, que en nuestro caso es la línea que grid-column-start: 1;
está más a la derecha en la cuadrícula. Y comienza en la línea de la fila 1 y termina en la grid-row-start: 3;
grid-row-end: 5;
línea de la fila 3, por lo tanto, se extiende sobre dos filas. }

El segundo elemento comienza en la línea de la columna 1 de la cuadrícula y se extiende

por toda la fila. Este es el valor por defecto, por lo que no necesito especificar la línea final.
También se extiende dos vías de fila de la línea de fila 3 a la línea de fila 5. Los otros elementos se colocarán a sí mismos en
espacios vacíos en la cuadrícula.
canaletas�
Las canaletas o callejones entre las celdas de la cuadrícula se pueden crear usando las propiedades
grid-column-gap y grid-row-gap, o la propiedad abreviada grid-gap.

.boxes { En el siguiente ejemplo, creamos una brecha

display: grid;
grid-template-columns: repeat(3, 1fr); de 10 píxeles entre columnas y
grid-column-gap: 10px;
grid-row-gap: 1em; una brecha de 1em entre filas.
}
 ?
media queries
¿qué son las medias queries?
Son una técnica de CSS que nos permite adaptar el diseño de un sitio web a las características
de la pantalla del dispositivo en el que se está visualizando.
Es como un interruptor que activa o desactiva ciertos estilos en función de las condiciones que
especifiquemos.
Por ejemplo, si queremos que nuestro sitio se vea diferente en una pantalla grande que en una
pantalla pequeña, podemos usar media queries para especificar qué estilos se aplican en cada caso.
modos de uso
Para usar media queries en CSS, se debe incluir una regla @media al principio del archivo CSS o en una
hoja de estilos externa. Dentro de la regla @media se especifican las condiciones para las cuales se
aplicarán los estilos. Por ejemplo, si quieres aplicar un estilo solo para pantallas con un ancho de
pantalla de al menos 600px, se puede usar la siguiente regla:

@media (min-width: 600px) {

/* estilos para pantallas con un ancho de al menos 600px */
}

También se pueden especificar múltiples condiciones en una sola regla @media. Por ejemplo, si quieres
aplicar un estilo solo para pantallas con un ancho de pantalla entre 600px y 800px,
se puede usar la siguiente regla:

@media (min-width: 600px) and (max-width: 800px) {

/* estilos para pantallas con un ancho entre 600px y 800px */
}
propiedades max-width y mix-width
Hay dos cosas que debes tener en cuenta al crear media queries para diferentes tamaños de pantalla:
las propiedades max-width y min-width.
Cuando se pasa una propiedad max-width a un media query, CSS lo interpreta como un ancho que
comienza en cero – eso sí aún no se ha establecido una propiedad de ancho mínimo.
Una vez que la propiedad max-width tiene un valor asignado, todos los estilos dentro de esa media query
particular se aplicarán a cualquier dispositivo cuyo tamaño de pantalla abarque desde 0px hasta
el ancho máximo especificado.

La propiedad min-width, por otro lado, toma el valor inicial que le has asignado y aplica los estilos dentro
de la regla del media query hasta que se proporcione el siguiente max-width.

@media only screen and (min-width: 576px) {

// aplicar los estilos aquí a partir de este ancho mínimo de
// 576px (dispositivos con tamaño de pantalla medio)
} Los estilos que se escriban en el media query anterior
sólo serían aplicables a los dispositivos que se
encuentren dentro del ancho mínimo
especificado y superior.
medidas estandar

320px — 480px 481px — 768px

dispositivos móviles iPads, tabletas

769px — 1024px 1025px — 1280px

pantallas pequeñas, portátiles Computadoras de escritorio
pantallas grandes
mobile first
Mobile first es un enfoque de diseño y desarrollo de sitios web en el cual se prioriza la experiencia de
usuario en dispositivos móviles y luego se adapta el diseño para dispositivos de escritorio.
Esto significa que se diseña y desarrolla primero para pantallas pequeñas y luego se adapta el diseño
para pantallas más grandes.

El enfoque mobile first se ha vuelto cada vez más importante en los últimos años
debido al aumento del uso de dispositivos móviles para navegar en Internet.

Esto significa que es cada vez más probable que los usuarios accedan a un
sitio web desde un dispositivo móvil, por lo que es esencial ofrecer una
experiencia de usuario óptima en estos dispositivos.
 ejemplo con flexbox
index.html style.css
<!DOCTYPE html> .contenedor {
<html lang="en"> display: flex;
<head> flex-wrap: wrap;
<title>Ejemplo de Media query</title> width: 980px;
<link rel="stylesheet" href="style.css" /> margin: 0 auto;
</head> margin-top: 40px;
<body> }
<div class="contenedor"> @media only screen and (min-width: 320px) and (max-width: 576px) {
<div class="cajas caja1"> .contenedor {
<h1>Primera Caja</h1> width: 100%;
<p> padding-left: 23px;
Información en la primera caja flex-direction: column-reverse;
</p> }
</div> .cajas {
<div class="cajas caja2"> width: 100%;
<h1>Segunda Caja</h1> }
<p> }
Información en la segunda caja
</p>
</div> La media query tiene un ancho mínimo de 320px y un ancho máximo de 576px.
</body>
</html> Esto sólo significa que todos los estilos que irán en esta regla sólo serán aplicables
a los dispositivos con anchos extra-pequeños y pequeños.
El diseño de las cajas también cambia en este rango de ancho particular. Eso se
debe a que el selector .container tiene su propiedad flex-direction cambiada de
row a column-reverse.