Создаем резюме на основе Grid

Создаем резюме на основе Grid

От автора: многие популярные дизайны резюме максимально используют доступное пространство страницы, разделы в них размещаются в виде сетки. Давайте используем CSS Grid для создания макета, который будет отлично выглядеть при печати и на экранах разных размеров. Таким образом, у нас будет возможность использовать резюме онлайн и оффлайн, что может пригодиться в новом году!

Создаем резюме на основе Grid

Сначала мы создадим контейнер резюме и разделы резюме.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Чтобы начать использовать Grid, мы добавляем к внешнему элементу резюме display: grid. Далее мы опишем, как вещи должны быть размещены в сетке. В этом случае мы будем указывать два столбца и четыре строки.

Мы используем единицы CSS Grid fr, чтобы указать, на сколько частей разделить доступное пространство. Мы зададим для рядов одинаковое пространство (1fr каждый) и сделаем первый столбец в два раза шире второго (2fr).

Создаем резюме на основе Grid

Далее мы опишем, как эти элементы должны быть размещены в сетке, используя свойство grid-template-area. Сначала нам нужно определить именованные grid-area для каждого из разделов. Вы можете использовать любое имя, но здесь мы будем использовать то же имя, что и для разделов:

Теперь самое интересное, что позволяет просто изменять дизайн. Разместите области сетки в свойстве grid-template-areas так, как вы хотите их расположить. Например, здесь мы добавим раздел name в левом верхнем углу grid-template-area, чтобы разместить имя в левом верхнем углу резюме. В разделе work много содержимого, поэтому мы добавляем его дважды, то есть он будет растягиваться на две ячейки сетки.

Вот что мы имеем на данный момент:

Спецификация CSS Grid предоставляет множество полезных свойств для определения размера и расположения элементов в сетке, а также некоторые сокращенные свойства. В этом примере мы постараемся сделать все как можно проще и используем один метод. Обязательно ознакомьтесь с некоторыми из замечательных ресурсов, чтобы узнать, как лучше всего включить CSS Grid в проект.

Настройка макета

grid-template-areas позволяет очень легко изменять макет. Например, если вы думаете, что работодателю раздел skills будет более интересен, чем education, вы можете поменять имена grid-template-areas, и области поменяются местами в вашем макете, без каких-либо других изменений.

Создаем резюме на основе Grid

Мы можем создать популярный дизайн резюме с тонким столбцом слева, внеся минимальные изменения в CSS. Это одна из приятных вещей в сетке: мы можем переставить именованные области сетки, чтобы изменить положение вещей, оставив исходный порядок нетронутым!

Создаем резюме на основе Grid

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Разделение колонок

Возможно, вы захотите добавить личные ссылки в резюме. Мы можем добавить третий столбец в шаблон сетки и вставить его в нижний ряд. Обратите внимание, что нам также нужно изменить размеры колонок, а затем обновить области шаблона, чтобы определенные элементы занимали два столбца, таким образом будет сохранена компоновка макета.

Создаем резюме на основе Grid

Разрыв между разделами можно задавать с помощью свойства grid-gap.

Адаптивность

Для небольших экранов, таких как мобильные устройства, мы можем отображать разделы резюме в одном столбце полной ширины.

Затем мы можем использовать медиа-запрос, чтобы изменить макет для более широких экранов.

Между ними могут быть добавлены дополнительные контрольные точки. Например, для средних экранов, таких как планшеты, мы могли бы разместить все в одном столбце, а разделы personal и image разместить бок о бок сверху.

Планирование печати

Старайтесь не уменьшать размер шрифта, чтобы вместить больше информации, так как текст может стать трудночитаемым. Можно добавить временное ограничение на размер к элементу resume, пока вы разрабатываете макет.

Сделав эту границу размером листа формата A4, мы сможем четче увидеть, достаточно ли малы размеры или содержимое выходит за границы, указывая, что оно будет напечатано на второй странице. Вы можете настроить печать в CSS, чтобы скрыть такие вещи, как дата и номера страниц, которые может вставить браузер.

Стоит отметить, что разные браузеры могут отображать ваше резюме с разными шрифтами, которые могут слегка отличаться по размеру. Если вам нужен предельно точный печатный макет резюме, другой вариант — сохранить его в формате PDF и предоставить ссылку для загрузки.

Поддержка браузерами

CSS Grid имеет хорошую поддержку в современных браузерах.

Internet Explorer (IE) поддерживает старую версию спецификации CSS Grid с использованием префиксов. Например grid-template-columns записывается как -ms-grid-columns. Выполнение кода через Autoprefixer может помочь с добавлением этих префиксов, но потребуется ручное изменение и тщательное тестирование, потому что в старой спецификации некоторые свойства ведут себя по-разному, а некоторые не существуют.

Альтернативный подход — предоставить резервный вариант, например, с помощью float разметки. Браузеры, которые не распознают свойства CSS Grid, будут отображать этот резервный варианта. Независимо от того, нужно ли вам поддерживать IE, резервный вариант имеет смысл для обеспечения того, что (потенциально неизвестные) браузеры, которые не поддерживают CSS Grid, по-прежнему будут отображать ваш контент.

Даже если вы не готовы разместить онлайн-резюме, все равно интересно поэкспериментировать с CSS Grid, изучить различные макеты, создать великолепный PDF и одновременно узнать удивительную часть CSS. Удачного поиска работы!

Автор: Ali Churcher

Источник: https://css-tricks.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий