Простое использование CSS Grid

Простое использование CSS Grid

От автора: возможно, вы слышали о CSS Grid, так давайте попробуем его. Может быть, вы не знали, с чего начать. Как учить CSS Grid? Rachel сделала замечательную серию демонстраций по Grid. Как только вы изучите основы, вам будет сложно понять, где использовать сетки. На днях я игрался с сетками и наткнулся на довольно простой пример

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

Простое использование CSS Grid

Довольно просто, так ведь? Основная колонка и сайдбар. До сегодняшнего дня для создания подобного макета мы использовали хаки Float и даже Flexbox. Забавно, что даже Flexbox не до конца подходит под такой макет. Идеальное решение – Grid. С Flexbox вам пришлось бы писать примерно следующий код:

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

CSS был бы примерно таким:

Это только скелет. Метод выше требует 10 строк кода для базового макета. Теперь давайте сделаем это на Grid с тремя строками.

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

Автор: Timothy B. Smith

Источник: https://theboldreport.net/

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Фреймворк 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