Columnas para un componente

En la parte anterior aprendimos a controlar el flujo del documento y a distribuir los grandes bloques de una página. Ahora trabajaremos en las distribuciones dentro de componentes, es decir, bloques que aparecen a menudo en los sitios web. Practicaremos con una navegación y una lista de tarjetas.

La distribución dentro de un componente depende menos del diseño de referencia y más del contenido que la distribución general de una página.

Empezaremos con una navegación formada por un logotipo y una lista de enlaces. El enlace a la página actual debe distinguirse de los demás. Supongamos que estamos creando la navegación de la página principal:

Hay que distribuir el contenido de la navegación en dos columnas y dejar un espacio entre ellas. La columna izquierda debe tener un tamaño fijo y la derecha debe ocupar todo el espacio restante.

Para crear esta distribución conviene usar grid. Esta tecnología permite crear fácilmente columnas de ancho fijo o flexible y controlar el espacio que las separa.

En la parte anterior vimos cómo cambiar el tipo de caja, definir las columnas y filas de un contenedor grid, trabajar con el espacio libre y separar las columnas. Usaremos esos conocimientos para distribuir la navegación.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 50px;
  column-gap: 5px;
}

Primero conectaremos una hoja de estilos que resalta las cajas para verlas mejor.

Después convertiremos el elemento con la clase navigation en un contenedor grid y dividiremos su contenido en dos columnas con la propiedad grid-template-columns. Luego usaremos column-gap para separar las columnas.