Medidas relativas en CSS: vh y vw

Estas unidades dependen del tamaño de la ventana del navegador:

• 1vh = 1% del alto de la pantalla
• 1vw = 1% del ancho de la pantalla

<style> #e1 { background-color: lightblue; height: 30vh; } #e2 { background-color: lightgreen; width: 50vw; } #e3 { background-color: blue; width: 80vw; height: 50vh; } </style> <div id="e1">Ejercicio 1</div> <div id="e2">Ejercicio 2</div> <div id="e3">Ejercicio 3</div>
Ver resultado

---

Diseño Visual con CSS

Cuando entramos a una página como YouTube, vemos que todo está ordenado: el menú a la izquierda, los videos en el centro y las recomendaciones a la derecha. Ese orden no es casualidad, es el resultado de un diseño visual pensado y hecho con CSS.

El diseño visual con CSS consiste en organizar los elementos de una página para que se vean bien, estén en su lugar y sean fáciles de entender. Para eso, usamos herramientas como CSS Grid, que nos permite crear filas, columnas y cuadrículas, tal como lo hace la interfaz de YouTube.

CSS Grid nos ayuda a pasar de un simple bloque de contenido a una página organizada como si la hubiéramos dibujado sobre una cuadrícula.

¡Ahora vamos a aprender cómo usar CSS Grid para crear nuestros propios diseños!

Grid permite dividir un contenedor en filas y columnas con más control.

La propiedad display: grid; convierte el contenedor en una cuadrícula (grid), lo que permite organizar los elementos hijos en filas y columnas. La línea grid-template-columns: 25% 25% 25% 25%; indica que se crearán cuatro columnas, cada una ocupando el 25% del ancho total del contenedor. Es decir, el espacio se divide equitativamente en cuatro partes. Si se desea controlar también las filas, se puede usar grid-template-rows para definir la altura de cada fila dentro de la cuadrícula. A continuación se puede ver un ejemplo:

<style> #e1 { background-color: blue; height: 30vh; display:grid; grid-template-columns: 25% 25% 25% 25%; } #e1>div { background-color: lightblue; margin-left:10px; margin-top: 20px; margin-bottom: 30px; margin-right: 10px; display:flex; justify-content: center; align-items: center; } </style> <div id="e1"> <div></div> <div></div> <div></div> <div></div> </div>
Ver resultado

---

Esta estructura básica te permite comenzar cualquier sitio web de forma organizada. Puedes cambiar los colores o secciones según tu proyecto.

---