Grid básico sí lo vas a usar: la grilla de tarjetas del Trabajo 1 se hace con
Grid (en Tailwind, grid grid-cols-1 md:grid-cols-3). El menú también: es el cierre
de la página.
position es de reconocimiento: se ve para que lo entiendas al leer código
ajeno y sepas que existe, pero el mini sitio no lo necesita.
Grid
Flexbox acomoda una fila (o una columna). Grid acomoda filas y columnas a la
vez: galerías, tarjetas, tableros.
flowchart TB
subgraph G["3 columnas"]
direction TB
subgraph F1["fila 1"]
direction LR
U1["1"] ~~~ U2["2"] ~~~ U3["3"]
end
subgraph F2["fila 2"]
direction LR
U4["4"] ~~~ U5["5"] ~~~ U6["6"]
end
F1 ~~~ F2
end
En el HTML solo hay un contenedor y seis hijos: no se escriben las filas. Los hijos
se van acomodando solos y, cuando se llenan las tres columnas, empieza una fila
nueva.
Pieza
Qué hace
display: grid
Activa Grid, en el contenedor igual que Flexbox
grid-template-columns
Declara la forma de la cuadrícula
1fr
”Una parte”: 1fr 1fr 1fr son tres columnas del mismo ancho
gap
Separa las celdas, igual que en Flexbox
Un hijo puede ocupar varias columnas
.destacada { grid-column: span 2;}
Esa ficha ocupa dos columnas y las demás se reacomodan. Es justo lo que Flexbox no
hace bien.
Para pasar de 3 a 4 columnas cambias una línea
Solo grid-template-columns: 1fr 1fr 1fr 1fr. El HTML no se toca. Ahí se ve
para qué sirve separar estructura de presentación.
Flexbox o Grid: cuál
Flexbox cuando las cosas van en una línea: una barra de navegación, una fila
de botones, un pie de página.
Grid cuando hay filas y columnas: una galería de imágenes, una cuadrícula de
tarjetas.
En Tailwind esto mismo se escribe grid grid-cols-3 gap-4.
position
Decide cómo se coloca un elemento respecto del flujo normal de la página.
Valor
Qué hace
static
Lo normal: cada elemento en el orden en que está escrito
relative
Se corre respecto de su propio lugar, sin afectar a los demás
absolute
Sale del flujo y se pega a una esquina de su contenedor
Eso pega una insignia “Nuevo” sobre la esquina de una tarjeta.
Para que absolute funcione, el padre necesita position: relative
Es la regla de oro, y el error que todo el mundo comete una vez: si el contenedor
no la tiene, el elemento no se pega a la tarjeta sino a la esquina de la página
entera, y aparece flotando en un sitio absurdo.
Una barra fixed tapa el contenido
nav { position: fixed; top: 0; width: 100%;}body { padding-top: 70px;} /* sin esto, el nav tapa el inicio */
Al sacar la barra del flujo, el resto de la página sube y queda debajo de ella. Hay
que compensarlo con un padding-top en el body del alto de la barra.
El menú: de lista a barra
La navbar que escribiste en HTML es una lista dentro de un <nav>. Por defecto se ve
como lo que es: una lista con viñetas, en vertical.
Cuatro declaraciones sobre la <ul> la convierten en una barra, y los enlaces
necesitan un par más:
nav ul { display: flex; /* en fila */ gap: 24px; /* espacio entre enlaces */ list-style: none; /* sin viñetas */ padding: 0; /* la ul trae relleno por defecto */}nav a { color: #1b1a19; text-decoration: none; /* sin subrayado */}nav a:hover,nav a:focus { color: #12a5ce;}nav a.activa { color: #12a5ce; font-weight: 700;}
Regla
Qué arregla
display: flex
Pone los <li> en fila en vez de uno bajo otro
list-style: none
Quita los puntos de la lista
padding: 0
Quita la sangría que el navegador le da a toda <ul>
text-decoration: none
Quita el subrayado de los enlaces
:hover y :focus
Dan respuesta visual con el ratón y con el teclado
.activa
Marca en qué vista estás
La clase .activa cierra un cabo suelto
En la página de la navbar quedó dicho que convenía marcar la vista actual “con una
clase, aunque el estilo lo daremos en CSS”. Esto es ese estilo: en cada archivo, el
enlace que apunta a esa misma vista lleva class="activa".
Esto mismo, en Tailwind
<ul class="flex gap-6">…</ul>
Las mismas propiedades, escritas como clases en el HTML. Solo hacen falta dos,
porque Tailwind ya quita las viñetas y el relleno de las listas por defecto. Ese es
todo el cambio de enfoque del próximo tópico (y por eso convenía entender antes qué
hace cada una).
Checkpoint
Intenta responder antes de desplegar cada pregunta.
¿Para qué sirve Grid y en qué se diferencia de Flexbox?
Flexbox acomoda una línea: una barra, una fila de botones. Grid acomoda
filas y columnas a la vez: galerías, cuadrículas de tarjetas.
Los dos se activan en el contenedor (display: flex / display: grid) y los dos
usan gap.
¿Qué significa 1fr en grid-template-columns: 1fr 1fr 1fr?
Una parte del espacio disponible. Tres 1fr son tres columnas del mismo ancho,
que se reparten todo el contenedor.
Para pasar a cuatro columnas basta con agregar otro 1fr: el HTML no se toca.
¿Qué hacen relative, absolute y fixed?
relative (corre el elemento respecto de su propio lugar, sin mover a los demás).
absolute (lo saca del flujo y lo pega a una esquina de su contenedor).
fixed (lo deja fijo en la pantalla aunque se haga scroll).
Lo normal, sin escribir nada, es static.
Pusiste position: absolute y el elemento se fue a la esquina de la página. ¿Por qué?
Porque el contenedor no tiene position: relative. Sin eso, absolute busca
hacia arriba hasta encontrar un padre posicionado y, si no hay ninguno, se pega a la
página entera.
La regla: el padre lleva relative, el hijo lleva absolute.
¿Cómo conviertes una lista de enlaces en un menú horizontal?
Cuatro declaraciones sobre la <ul>:
nav ul { display: flex; /* en fila */ gap: 24px; /* espacio entre enlaces */ list-style: none; /* sin viñetas */ padding: 0; /* sin la sangría por defecto */}
Y en los enlaces, text-decoration: none para quitar el subrayado.
Pusiste el nav con position: fixed y tapa el inicio de la página. ¿Cómo se arregla?
Con un padding-top en el body del alto de la barra: