Muchos diseños populares de currículum aprovechan al máximo el espacio disponible en la página al colocar las secciones en forma de cuadrícula. Usemos CSS Grid para crear un diseño que se vea genial cuando se imprima y en diferentes tamaños de pantalla. De esa manera, podemos usar el currículum en línea y fuera de línea, ¡lo que podría ser útil durante el nuevo año!
Primero, crearemos un contenedor de currículum y nuestras secciones de currículum.
<article class="resume">
<section class="name"></section>
<section class="photo"></section>
<section class="about"></section>
<section class="work"></section>
<section class="education"></section>
<section class="community"></section>
<section class="skills"></section>
</article>Para comenzar a usar Grid, agregamos display: grid a nuestro elemento de currículum exterior. A continuación, describimos cómo deben colocarse las cosas en la cuadrícula. En este caso, especificaremos dos columnas y cuatro filas.
Estamos usando CSS Grid fr unidad para especificar cuántas fracciones en el espacio disponible para dar. Daremos a las filas el mismo espacio (1fr cada una), y haz la primera columna dos veces más ancha que la segunda (2fr).
.resume {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
}
A continuación, describiremos cómo deben colocarse estos elementos en la cuadrícula utilizando el grid-template-area propiedad. Primero necesitamos definir un nombre grid-area para cada una de nuestras secciones. Puede usar cualquier nombre, pero aquí usaremos el mismo nombre que nuestras secciones:
.name {
grid-area : name;
}
.photo {
grid-area : photo;
}
/* define a grid-area for every section */Ahora viene la parte divertida, que hace que cambiar el diseño sea muy fácil. Coloque las áreas de la cuadrícula en el grid-template-areas propiedad cómo desea que se distribuyan. Por ejemplo, aquí agregaremos el name sección en la parte superior izquierda de la grid-template-area colocar nuestro nombre en la parte superior izquierda del currículum. Nuestra work La sección tiene mucho contenido, por lo que la agregamos dos veces, lo que significa que se extenderá sobre dos de las celdas de la cuadrícula.
.resume {
grid-template-areas:
"name photo"
"work about"
"work education"
"community skills";
}Esto es lo que tenemos hasta ahora:
Ver la pluma
líneas de currículum de cuadrícula por Ali C (@alichur)
en CodePen.
La especificación CSS Grid proporciona muchas propiedades útiles para dimensionar y distribuir cosas en la cuadrícula, así como algunas propiedades abreviadas. Mantenemos las cosas simples en este ejemplo al mostrar un método posible. Asegúrese de consultar algunos de los excelentes recursos que existen para aprender la mejor manera de incorporar CSS Grid en su proyecto.
Ajuste de diseño
grid-template-areas que sea muy fácil cambiar su diseño. Por ejemplo, si cree que un empleador estará más interesado en su skills sección que su education puedes cambiar los nombres en grid-template-areas y cambiarán de lugar en su diseño, sin que se requieran otros cambios.
.resume {
grid-template-areas:
"name photo"
"work about"
"work skills" /* skills now moved above education */
"community education";
}
Ver la pluma
Secciones de intercambio de currículum de cuadrícula por Ali C (@alichur)
en CodePen.
Podemos lograr un diseño de currículum popular donde la columna delgada está a la izquierda con cambios mínimos de CSS. Esa es una de las cosas buenas de la cuadrícula: podemos reorganizar las áreas de cuadrícula nombradas para cambiar las cosas mientras dejamos el orden de origen exactamente donde está.
.resume {
grid-template-columns: 1fr 2fr;
grid-template-areas:
"photo education"
"name work"
"about work"
"skills community";
}
Ver la pluma
currículum en cuadrícula a la izquierda diseñado por Ali C (@alichur)
en CodePen.
Columnas divisorias
Tal vez desee agregar referencias personales a la mezcla. Podemos agregar una tercera columna a la plantilla de cuadrícula y deslizarlas en la fila inferior. Tenga en cuenta que también debemos cambiar las unidades de columna a fracciones iguales y luego actualizar las áreas de la plantilla para que ciertos elementos abarquen dos columnas para mantener nuestro diseño en su lugar.
.resume {
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"name name photo"
"work work about"
"work work education"
"community references skills";
}
Ver la pluma
currículum en cuadrícula columnas divididas por Ali C (@alichur)
en CodePen.
El espacio entre las secciones se puede controlar con el grid-gap propiedad.
Haciéndolo receptivo
Para pantallas pequeñas, como un dispositivo móvil, podemos mostrar las secciones del currículum en una sola columna de ancho completo.
grid-template-columns: 1fr;
grid-template-areas:
"photo"
"name"
"about"
"work"
"education"
"skills"
"community"
"references"
}Luego podemos usar una consulta de medios para cambiar el diseño para pantallas más anchas.
@media (min-width: 1200px) {
.resume {
grid-template-areas:
"name photo"
"work about"
"work education"
"community skills";
}
}Se pueden agregar puntos de interrupción adicionales en el medio. Por ejemplo, en pantallas medianas como una tableta, podríamos querer todo en una sola columna, pero el personal y image secciones para sentarse una al lado de la otra en la parte superior.
@media (min-width: 900px) {
.resume {
grid-template-columns: 2fr 1fr;
grid-template-areas:
"name photo"
"about about"
"work work"
"education education"
"skills skills"
"community community"
"references references"
}
}Planificación de la impresión de una sola página
Si desea que su currículum se imprima bien en una sola hoja de papel físico, hay algunas cosas que debe tener en cuenta. El desafío más difícil suele ser reducir la cantidad de palabras para que quepan en una página.
Evite reducir el tamaño de la fuente para exprimir más información, ya que puede resultar difícil de leer. Un truco es agregar una restricción de tamaño temporal a su elemento de currículum mientras está desarrollando.
.resume {
/* for development only */
width : 210mm;
height: 297mm;
border: 1px solid black;
}Al hacer este borde del tamaño de papel A4, será más claro ver si los tamaños son demasiado pequeños o si el contenido se sale del borde, lo que indica que se imprimirá en una segunda página.
Puede proporcionar CSS de impresión para ocultar cosas, como la fecha y los números de página, que el navegador puede insertar.
@media print {
/* remove any screen only styles, for example link underline */
}
@page {
padding: 0;
margin: 0cm;
size: A4 portrait;
}Una cosa a tener en cuenta es que diferentes navegadores pueden mostrar su currículum con diferentes fuentes que pueden variar ligeramente en tamaño. Si desea un currículum impreso muy preciso, otra opción es guardarlo como PDF y proporcionar un enlace de descarga en su sitio.
Compatibilidad con navegador
CSS Grid tiene un buen soporte en los navegadores modernos.
Internet Explorer (IE) admite una versión anterior de la especificación CSS Grid mediante prefijos. Por ejemplo grid-template-columns se escribe como -ms-grid-columns. Ejecutar el código a través de un Autoprefixer puede ayudar a agregar estos prefijos, pero se requerirán cambios manuales y pruebas exhaustivas porque en la especificación anterior algunas propiedades se comportan de manera diferente y otras no existen. Vale la pena consultar el artículo de Daniel Tonon sobre cómo se puede configurar Autoprefixer para que todo funcione lo mejor posible.
Un enfoque alternativo al prefijo automático es proporcionar un respaldo, por ejemplo, mediante el uso de un diseño flotante. Los navegadores que no reconozcan las propiedades de la cuadrícula CSS se mostrarán con este respaldo. Independientemente de si necesita admitir IE, una alternativa es sensata para garantizar que los navegadores (potencialmente desconocidos) que no admiten CSS Grid sigan mostrando su contenido.
Incluso si no está listo para alojar un currículum en línea, aún es divertido jugar con CSS Grid, explorar diferentes diseños, generar un PDF de excelente apariencia y aprender una parte increíble de CSS al mismo tiempo.
¡Feliz búsqueda de trabajo!