От автора: думая о CSS Grid, люди обычно представляют сетчатые макеты изображений и полные веб-страницы. CSS Grid – превосходная технология для раскладки статей, так как позволяет делать то, чего раньше было сложно достичь. В этом уроке я объясню, как воссоздать знаменитые макеты статей с Medium с помощью CSS Grid.
В одном из видео курсов мой коллега, Magnus Holm объясняет, как создавать макеты статей с помощью CSS grid.
Контент
Начнем с базового файл HTML с контентом, который обычно можно встретить в статье на сайте Medium. Например, заголовок, параграфы, субтитры, цитаты и т.п. Пример:
<article> <h1>Running any NPM package in the browser locally</h1> <p>JavaScript has never had any official solution for distributing packages, and every web platform (Rails, Django etc) has their own idea of how to structure and package JavaScript. In the last few years NPM has started becoming the canonical way of distribution, with Webpack as the build system, but there’s no way to load NPM packages in the browser without a server-side component.</p> <blockquote> <p>Scrimba is a platform for interactive coding screencast where you can run the code at any moment in time.</p> </blockquote> <figure> <img src="https://mave.me/img/projects/full_placeholder.png"> </figure>
Если открыть этот файл без настройки макета, он будет выглядеть так:
Не очень красиво. Давайте исправим это с помощью CSS Grid. Разберем все пошагово, чтобы вам легко было следовать.
Базовая настройка margin
Сперва необходимо превратить весь тег article в сетку и дать ей минимум три колонки.
article { display: grid; grid-template-columns: 1fr 740px 1fr;
}
Первая и последняя колонки адаптивны и ведут себя, как margin. В большинстве случаев в них ничего нет. Средняя колонка имеет фиксированную ширину 740px, в ней будет храниться контент статьи.
Заметьте, что мы не определяем строки, так как они просто будут подстраиваться под высоту контента. Каждый блок контента (параграф, изображение, заголовок) будут располагаться на своей строке.
Далее необходимо сделать так, чтобы весь контент в сетке начинался со второй строки столбца по умолчанию.
article > * { grid-column: 2;
}
Страница изменилась:
Сразу видно, что страница стала красивее. Пространство с обеих сторон упрощает чтение текста. Но то же самое можно сделать, установив левый и правый margin в auto. Так зачем же использовать CSS Grid?
Проблемы всплывают, когда нам нужно имитировать функцию Medium работы с изображениями. Например, создание полноэкранных изображений:
Если бы мы использовали margin: 0 auto, это вынудило бы нас применять отрицательный margin к изображению, чтобы оно занимало всю ширину. А это грязно.
В CSS Grid сделать это проще простого. Мы просто будем устанавливать ширину через колонки. Чтобы наше изображение занимало всю ширину, мы просто скажем ему, чтобы оно занимало все колонки.
article > figure { grid-column: 1 / -1; margin: 20px 0;
}
Мы также задали margin сверху и снизу. Теперь у нас есть изображение на всю ширину страницы:
Расширение с помощью дополнительных столбцов
Тем не менее, это не все. У Medium есть и другие макеты, которые нужно учесть. Разберем некоторые из них.
Изображения средних размеров
Эти изображения больше нормальных, но не занимают всю ширину страницы – мы будем называть их средними. Выглядят они так:
Нам потребуется минимум 2 еще колонки в макете.
Цитаты
Также Medium слева от цитат добавляет вертикальную черту.
Для создания черты нужна маленькая колонка на левой стороне сетки. Для симметрии мы также добавим такую же колонку справа. Для поддержки цитат и средних изображений необходимо разбить всю ширину на 7 колонок вместо 3:
article { display: grid; grid-template-columns: 1fr 1fr 10px 740px 10px 1fr 1fr;
}
В инспекторе Chrome можно посмотреть линии сетки (изображение ниже). Я добавил указатели, чтобы вам было легче увидеть колонки.
Во-первых, необходимо сделать так, чтобы все элементы по умолчанию начинались с четвертой строки колонки, а не со второй.
article > * { grid-column: 4;
}
Теперь можно создать среднее изображение:
article > figure { grid-column: 2 / -2; margin: 20px 0;
}
Как выглядит страница в инспекторе Chrome:
Цитаты легко создаются следующим образом:
article > blockquote { grid-column: 3 / 5; padding-left: 10px; color: #666; border-left: 3px solid black;
}
Цитаты растягиваются от 3 до 5 колонки. Мы также добавили padding-left: 10px;, чтобы текст буд-то бы начинался с 4 колонки (3 колонка 10px). Как это выглядит в сетке.
Пометки
Осталось реализовать одну функцию. В Medium есть замечательная функция выделения самого значимого контента в статье. Текст приобретает зелены фон, а справа добавляется Top highlight.
С margin: 0 auto; просто невозможно создать подпись Top highlight, это будет кошмар. Поведение элемента полностью отличается от всех других элементов статьи. Вместо новой строки, элемент отображается справа от предыдущего элемента. Если не использовать CSS Grid, нам пришлось бы возиться с position: absolute;.
Но в CSS Grid это очень просто. Мы просто установим, чтобы элементы такого типа начинались с 4 колонки.
.aside { grid-column: 5;
}
Это автоматически поместит подпись справа от статьи:
Вот и все! Мы воссоздали макет статьи с сайта Medium с помощью CSS Grid. Это было довольно легко. Заметьте однако, что мы не трогали адаптивность, на это уйдет еще одна статья.
Автор: Per Harald Borgen
Источник: https://medium.freecodecamp.org/
Редакция: Команда webformyself.