Как воссоздать макет статьи с Medium с помощью CSS Grid

Как воссоздать макет статьи с Medium с помощью CSS Grid

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

В одном из видео курсов мой коллега, Magnus Holm объясняет, как создавать макеты статей с помощью CSS grid.

Контент

Начнем с базового файл HTML с контентом, который обычно можно встретить в статье на сайте Medium. Например, заголовок, параграфы, субтитры, цитаты и т.п. Пример:

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

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

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

Если открыть этот файл без настройки макета, он будет выглядеть так:

Не очень красиво. Давайте исправим это с помощью CSS Grid. Разберем все пошагово, чтобы вам легко было следовать.

Базовая настройка margin

Сперва необходимо превратить весь тег article в сетку и дать ей минимум три колонки.

Первая и последняя колонки адаптивны и ведут себя, как margin. В большинстве случаев в них ничего нет. Средняя колонка имеет фиксированную ширину 740px, в ней будет храниться контент статьи.

Заметьте, что мы не определяем строки, так как они просто будут подстраиваться под высоту контента. Каждый блок контента (параграф, изображение, заголовок) будут располагаться на своей строке.

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

Страница изменилась:

Сразу видно, что страница стала красивее. Пространство с обеих сторон упрощает чтение текста. Но то же самое можно сделать, установив левый и правый margin в auto. Так зачем же использовать CSS Grid?

Проблемы всплывают, когда нам нужно имитировать функцию Medium работы с изображениями. Например, создание полноэкранных изображений:

Если бы мы использовали margin: 0 auto, это вынудило бы нас применять отрицательный margin к изображению, чтобы оно занимало всю ширину. А это грязно.

В CSS Grid сделать это проще простого. Мы просто будем устанавливать ширину через колонки. Чтобы наше изображение занимало всю ширину, мы просто скажем ему, чтобы оно занимало все колонки.

Мы также задали margin сверху и снизу. Теперь у нас есть изображение на всю ширину страницы:

Расширение с помощью дополнительных столбцов

Тем не менее, это не все. У Medium есть и другие макеты, которые нужно учесть. Разберем некоторые из них.

Изображения средних размеров

Эти изображения больше нормальных, но не занимают всю ширину страницы – мы будем называть их средними. Выглядят они так:

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

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

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

Нам потребуется минимум 2 еще колонки в макете.

Цитаты

Также Medium слева от цитат добавляет вертикальную черту.

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

В инспекторе Chrome можно посмотреть линии сетки (изображение ниже). Я добавил указатели, чтобы вам было легче увидеть колонки.

Во-первых, необходимо сделать так, чтобы все элементы по умолчанию начинались с четвертой строки колонки, а не со второй.

Теперь можно создать среднее изображение:

Как выглядит страница в инспекторе Chrome:

Цитаты легко создаются следующим образом:

Цитаты растягиваются от 3 до 5 колонки. Мы также добавили padding-left: 10px;, чтобы текст буд-то бы начинался с 4 колонки (3 колонка 10px). Как это выглядит в сетке.

Пометки

Осталось реализовать одну функцию. В Medium есть замечательная функция выделения самого значимого контента в статье. Текст приобретает зелены фон, а справа добавляется Top highlight.

С margin: 0 auto; просто невозможно создать подпись Top highlight, это будет кошмар. Поведение элемента полностью отличается от всех других элементов статьи. Вместо новой строки, элемент отображается справа от предыдущего элемента. Если не использовать CSS Grid, нам пришлось бы возиться с position: absolute;.

Но в CSS Grid это очень просто. Мы просто установим, чтобы элементы такого типа начинались с 4 колонки.

Это автоматически поместит подпись справа от статьи:

Вот и все! Мы воссоздали макет статьи с сайта Medium с помощью CSS Grid. Это было довольно легко. Заметьте однако, что мы не трогали адаптивность, на это уйдет еще одна статья.

Автор: Per Harald Borgen

Источник: https://medium.freecodecamp.org/

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

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

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

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

Фреймворк Bootstrap - верстаем адаптивно, просто, быстро!

Получите видеокурс по основам Bootstrap

Получить

Метки:

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree