Онлайн-интенсив «Базовый HTML и CSS»

Реклама

7 августа стартует онлайн-интенсив «Базовый HTML и CSS».

Он подойдёт вам, если вы только начинаете путь покорения html-вёрстки, а также для систематизации уже существующих знаний.

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

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

Интенсив длится пять недель, c 7 августа по 13 сентября. Количество мест ограничено.

Приятная скидка по промокоду HTMLBOOK (промокод действует до 6 августа 2017 года включительно). До встречи на интенсиве 7 августа!

Самостоятельная работа

Экспериментирую с форматом учебных курсов на сайте WebReference. Интерактивные тесты уже есть, автоматический практикум тоже, настала очередь самостоятельных заданий. На примере курса по блочным и строчным элементам в каждом уроке можете увидеть вкладку «Самостоятельная», в которой есть задание для самостоятельного решения. Пока не решил, стоит ли выкладывать готовое решение, поскольку такие задачи можно сделать множеством способов, и все они будут правильные. В общем, пишите в комментариях, что думаете по этому поводу.

Эпичный курс «Великий Кексби»

Реклама

Планируете сверстать свой первый интернет-магазин, но не знаете с чего начать? Тогда попробуйте сделать это вместе с инструктором Кексом в эпичном курсе от HTML Academy. Макет магазинчика аксессуаров для котов «The Great Keksby» вашими силами поэтапно будет превращаться в настоящую главную страницу сайта.

Теоретические знания HTML и CSS будут применяться на практике: разметка страницы, стилизация, работа с графикой, настройка Adobe Photoshop для вёрстки и построение сеток.

Разобраться как работают теги и свойства на реальном проекте не составит труда, изменяя значения и свойства в редакторе и видя результат сразу в минибраузере. Кроме этого, вас ждёт промежуточное испытание на разметку магазина кваса «Кваст», но уже без подсказок Кекса — серьёзная самостоятельная работа в текстовом редакторе.

Эпичный курс доступен по подписке, включает в себя 10 курсов и одно промежуточное испытание.

Позиционирование элементов

Добавил новый учебный курс, посвящённый свойству position, в котором подробно рассказано о значениях static, relative, absolute, fixed и sticky, а также их комбинациям. Курс, как обычно, содержит вопросы для самопроверки, всякие задания, а в конце можно пройти проверочный тест. Впрочем, никто не запрещает пройти его и в начале.

Курс не для новичков, сперва изучите HTML и CSS. А для тех, кто уже это всё освоил и хочет научиться верстать.

Хотите начать 2018 год с новой профессией?

Реклама

В августе стартует профессия Фронтенд-разработчик для тех, кто серьёзно настроен стать профессионалом в сжатые сроки и взять максимум от обучения!

Профессия «Фронтенд-разработчик» это:

  • три проекта в портфолио;
  • больше работы с наставниками;
  • дополнительное время для работы над проектами;
  • специальные тестовые задания на трудоустройство.

Программа будет идти с 7 августа по 27 декабря и состоит из трёх ступеней:

  • базовый HTML и CSS;
  • продвинутый HTML и CSS;
  • базовый JavaScript.

Позаботься о своей будущей профессии летом и уже зимой станешь востребованным фронтенд-разработчиком. Регистрируйся сейчас, количество мест ограничено.

Структурные элементы страницы

Набор структурных элементов HTML5 вызывает массу вопросов у начинающих верстальщиков. Чем отличается <article> и <section>? В каком случае надо писать <main>, а в каком <article>? Что ставить в <aside>? Можно ли добавлять <section> в <footer>? В общем, вместо того, чтобы облегчить работу и упростить код, эти элементы только запутали. Казалось бы, есть спецификация HTML, к ней и надо обращаться по спорным вопросам. Но беда в том, что тексты спецификации можно трактовать по разному, поэтому на форумах часто происходят словесные баталии, каждый отстаивает свою противоположную позицию.

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

  • «шапка»;
  • «подвал»;
  • навигация;
  • статья;
  • боковая панель;
  • раздел.

«Шапка»

Как правило, располагается вверху веб-страницы, содержит название сайта, главное меню, поисковую форму.

«Подвал»

Обычно располагается в самом низу веб-страницы, в подвале пишут копирайты, ставят иконки соцсетей, форму подписки, дублируют навигацию.

Навигация

Это главное меню сайта, ссылки для перехода к основным разделам сайта.

Статья

Простыня текста с названием, содержимым, датой публикацией, именем автора.

Боковая панель

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

Раздел

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

Примерно определили, из чего состоит любой сайт и теперь вспомним, какие элементы для них есть в HTML5:

  • <main>
  • <header>
  • <footer>
  • <section>
  • <nav>
  • <article>
  • <aside>

<main>

Это элемент, внутри которого располагается уникальное главное содержимое веб-страницы. Есть ряд правил касательно применения <main>:

<main> в коде должен быть в единственном экземпляре;
<main> не должен включать повторяющиеся от страницы к странице элементы, вроде логотипа, названия сайта, баннеров и др;
<main> не влияет на схему документа;
<main> нельзя вставлять внутрь <article>, <aside>, <footer>, <header> или <nav>.

В основном применяется как обёртка для статьи с заголовком, именем автора, датой публикации, комментариями.

<header>

Используется для «шапки» сайта, преимущественно. Но этим роль не ограничивается из-за того, что в коде может быть несколько элементов <header>. Так что его можно вставлять как заголовки разделов, например, статьи.

<footer>

Применяется для «подвала». Как и в случае с <header> это может быть «подвал» сайта или «подвал» статьи.

<section>

Раздел документа или иными словами, содержимое, группированное по какому-либо принципу. <section> является типовым элементом для разбиения содержимого веб-страницы на тематические блоки. Фактически, другие элементы, вроде <nav>, <article>, <aside>, являются частными случаями <section>.

<nav>

Применяется для навигации по сайту и содержит ссылки для перехода на другие веб-страницы. <nav> используется не для всех блоков ссылок, а только для наиболее важных, такой блок, как правило, на странице один. Даже если у вас навигация дублируется внизу страницы, в <nav> добавляется только первый, более важный блок.

<article>

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

<aside>

Это раздел веб-страницы, который косвенно связан с основным её содержимым. Может использоваться для следующих вещей: боковая панель, врезка, цитата, ссылки, информация об авторе, реклама и др. <aside> располагается не обязательно сбоку, к примеру, статьи, но и внутри, сверху, снизу, в общем, там, где это продиктовано содержимым.

Заметьте, что везде мы делаем акцент на содержимом и уже исходя из него выбираем какой элемент подойдёт. Если нужно сделать декоративный блок чисто для дизайнерских целей, то воспользуйтесь элементом <div>.

В следующий раз рассмотрим, как эти элементы применять на практике.

Изучаем флексбоксы — механизм раскладки современного верстальщика

Реклама

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

Хотите узнать как работают флекбоксы и как их применять на практике? HTML Academy открывает доступ к платным курсам про флекбоксы для всех желающих до 28 июня 2017 года:

Пройдя эти онлайн-курсы, вы научитесь:

  • выравнивать и переносить флекс-элементы;
  • управлять их размерами и отступами;
  • применять коэффициенты растяжения и сжатия;
  • создавать «гибкие» раскладки и элементы интерфейса.

Можно ли оборачивать ссылкой блок?

В HTML4 ответ на этот вопрос однозначный — внутрь ссылки можно вставлять только текстовые элементы и картинки. И для простых ситуаций с этим никаких проблем нет — если нам нужно, к примеру, сделать заголовок ссылкой, то <a> мы добавляем внутрь <h1>, но никак не наоборот.

<h1><a href="1.html">Заголовок</a></h1>

При этом надо помнить, что область ссылки ограничена размером текста. <h1> элемент блочный, он занимает всю ширину области просмотра, а ссылка строчная, её размер определяется размером содержимого. Так что щелчок не по тексту, а просто по этой строке ничего не даст. Для данного примера это может и не принципиально, а вот для какого-нибудь меню, где пункты меню визуально больше текста, важно. Поэтому мы модифицируем стиль ссылки, чтобы она занимала всё пространство внутри блока.

a {
  display: block;
}

Вот теперь размер ссылки равен размеру блока и щелчок по любому месту блока воспринимается как переход по ссылке.

В более сложных и распространённых ситуациях блок представляет собой комбинацию заголовка, картинки и подписи к ней. Вспомните любой интернет-магазин с витриной товаров и вы поймёте, насколько популярны блоки, которые одновременно являются ссылками, ведь они должны вести на описание товара. Код HTML может быть примерно таким.

<div class="stock">
  <div class="stock-img">
    <a href="/stock/gimnasticheskiy-myach">
      <img src="/images/stock/thumb/fitbol.jpg" width="150" height="150" alt="">
    </a>
  </div>
  <div class="stock-title">
    <a href="/stock/gimnasticheskiy-myach">Гимнастический мяч</a>
  </div>
</div>

Таким образом, каждую часть нашего блока (картинку и название) мы оборачиваем одной и той же ссылкой и в стилях ставим ей свойство display со значением block. Тогда весь блок целиком визуально будет представлять собой одну ссылку, хотя на деле это набор ссылок.

Всё это относилось к HTML4, и на наше счастье в HTML5 ситуация поменялась. При этом, все описанные приёмы остались с нами, но и добавилось кое-что новое. Теперь мы можем внутрь ссылки вставлять блоки целиком. Вот как преобразуется наш код с учётом новых правил HTML5 и его новых элементов.

<a href="/stock/gimnasticheskiy-myach">
  <figure class="stock">
    <img src="/images/stock/thumb/fitbol.jpg" width="150" height="150">
    <figcaption>Гимнастический мяч</figcaption>
  </figure>
</a>

Код теперь выглядит нагляднее и проще.

Ещё на эту тему вы можете посмотреть видео, в котором раскрываются другие аспекты на тему ссылок и блоков.

Таблицы

Постепенно расширяю самоучитель HTML на сайте webref.ru, добавляя в него отсутствующие моменты. Не хватало таблиц — вот вам таблицы. Как и с остальными материалами самоучителя, это не просто текст, а ещё набор заданий для проверки знаний, плюс небольшая практика с автоматической проверкой кода. Наслаждайтесь!

Бесплатные онлайн-курсы для изучения HTML и CSS

Реклама

Изучить с нуля HTML и CSS легко в HTML Academy.

Инструктор Кекс станет проводником в мир вёрстки, вместе вы научитесь:

  • создавать структуру документа и подключать стили и скрипты;
  • правильно размечать документ, используя теги;
  • использовать текстовые поля, выпадающие списки, кнопки и другие элементы форм;
  • оформлять вёрстку с помощью CSS;
  • позиционировать элементы и создавать декоративные эффекты.

19 бесплатных разделов, включающих 400 интерактивных заданий и более 27 испытаний. После прохождения вы сможете сверстать свой первый сайт.

Начните свой путь к профессии мечты сейчас.

Блочные и строчные элементы

На webref.ru появился новый небольшой курс Блочные и строчные элементы. Рассказывается про блочные, строчные и строчно-блочные элементы с примерами их использования. В каждом уроке есть вопросы для проверки, в конце можно проверить знания через систему тестирования.

Курс не для новичков, предполагается, что вы уже знакомы с HTML и CSS.

Самоучитель HTML

На сайте webref.ru стал доступен самоучитель HTML. Более 50 вопросов для проверки, несколько десятков интерактивных упражнений на закрепление материала, почти два десятка практических заданий по редактированию кода.

Сам учебник остался знакомым, но теперь это действительно самоучитель.

Простейший способ создания адаптивной шапки

Оригинал: tutorialzine.com/2016/02/quick-tip-easiest-way-to-make-responsive-headers/
Перевод: Влад Мержевич

Создание симпатичной и адаптивной «шапки» сайта — процесс всегда непростой. Для этого приходилось использовать float или другие сложные трюки и даже вручную настраивать значения пикселей. Но всё это позади!

Техника, которую мы собираемся вам показать, основана на мощном режиме вёрстки Flexbox, который делает всю грязную работу за вас. Мы используем всего несколько свойств CSS для создания шапки, которая выровнена соответственно и выглядит хорошо для всех размеров экрана, при этом код остаётся чистым и потребует меньше ручной работы.

Техника

В нашем демонстрационном примере мы построили шапку, которая разделена на три части с типичным для шапки содержимым внутри:

  • Левая часть — логотип компании.
  • Средняя часть — разные ссылки.
  • Правая часть — кнопка.

Ниже вы можете ознакомиться с упрощённой версией кода.

В первой вкладке располагается HTML, в котором мы группируем части через отдельные теги <div>. Это упрощает применение правил CSS и в целом порождает более организованный код.

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

Нажмите кнопку «Выполнить», чтобы открыть демонстрацию. Вы можете протестировать адаптивность, изменяя размеры фрейма.

<header>
	<div class="header-left">Логотип</div>
	<div class="header-center">
		<ul>
			<li><a href="#">Продукция</a></li>
			<li><a href="#">Цены</a></li>
			<li><a href="#">Блог</a></li>
		</ul>
	</div>
	<div class="header-right"><button>Купить</button></div>
</header>
header{
	/* Включаем режим Flexbox. */
	display: flex; 
	
	/* Распределяем элементы внутри шапки */
	justify-content: space-between;

	/* Выравниваем элементы вертикально по центру. */
	align-items: center;
}
<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Простейший способ создания адаптивной шапки</title>
<link href='https://fonts.googleapis.com/css?family=Fugaz+One' rel='stylesheet'>

<style>
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	font: normal 16px sans-serif;
	padding: 0 10%;
	background: #eee;
}

body .container{
	max-width:1200px;
	margin:0 auto;
}

/*	Header	*/

header{
	/* Включаем режим Flexbox. */
	display: flex; 
	/* Распределяем элементы внутри шапки */
	justify-content: space-between;
	/* Выравниваем элементы вертикально по центру. */
	align-items: center;

	padding: 40px 100px;
	color: #fff;
	background-color: #488EAD;
}

.header-left{
	font: normal 28px 'Fugaz One', cursive;
}

.header-left span{
	color: #EAD314;
}

.header-center ul{
	list-style: none;
}

.header-center ul li{
	display: inline-block;
	margin: 0 15px;
}

.header-center ul li a{
	text-decoration: none;
	color: #fff;
	cursor: pointer;
	font-weight: bold;
}

.header-right button{
    color: #fff;
    cursor: pointer;
    font-weight: 800;
    text-transform: uppercase;
    padding: 12px 30px;
    border: 2px solid #FFFFFF;
    border-radius: 4px;
    background-color: transparent;
}

.header-right button:hover {
    background-color: rgba(255,255,255,0.1);
}

/* Основное содержимое */

.main-content{
	padding: 60px 100px;
	background-color: #fff;
    line-height: 1.5;
    color: #444;
}

.main-content h2{
	margin-bottom: 38px;
}

.main-content p{
	margin: 30px 0;
}


.main-content .placeholder{
	margin: 40px 0;
	height:380px;
	background-color: #e3e3e3;
}


/* Медиа-запросы */

@media (max-width: 1200px){
	header{
		padding: 40px 60px;
	}

	.main-content{
		padding: 100px 60px;
	}

	body {
	    padding: 0 5%;
	}
}

@media (max-width: 1000px){
	header{
		/* Меняем оси шапки, делая её вертикальной. */
		flex-direction: column;
		/* Выравниваем элементы шапки с начала (по левому краю). */
		align-items: flex-start;
	}

	header > div{
		margin: 12px 0;
	}

	.header-center ul li{
		margin: 0 15px 0 0;
	}

}

@media (max-width: 600px){
	body {
	    padding: 0 10px;
	}

	.header-left{
		margin-top:0;
	}

	header {
	    padding: 30px;
	}

	.main-content{
		padding:30px;
	}
}


</style>
</head>
<body>

<div class="container">
	
	<header>
		<div class="header-left"><span>Cool</span>Logo</div>
		<div class="header-center">
			<ul>
				<li><a href="#">Продукция</a></li>
				<li><a href="#">Цены</a></li>
				<li><a href="#">Блог</a></li>
			</ul>
		</div>
		<div class="header-right"><button>Купить</button></div>
	</header>

	<section class="main-content">
		<h2>Шапка с тремя выравниваемыми частями</h2>
		<p>Используя возможности Flexbox, логотип, ссылки и кнопка в нашей шапке остаются в обозначенных местах, независимо от размера экрана. Свойство <strong style="white-space: nowrap;">justify-content</strong> предлагает чистый подход и позволяет без проблем выровнять раздел шапки. Не нужны никакие float, margin или безумные расчёты ширины.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at congue urna, pellentesque faucibus justo. Integer a lorem a mauris suscipit congue luctus ut quam. Mauris pellentesque pellentesque mattis. In sed mi dignissim, faucibus elit at, rutrum odio. Mauris et velit magna. Maecenas iaculis eget sapien eu gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum a egestas magna. Aenean tellus elit, aliquet at lacinia at, accumsan eget neque. Maecenas rutrum risus quis sem scelerisque sagittis. Quisque sit amet turpis lorem. </p>
		<div class="placeholder"></div>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at congue urna, pellentesque faucibus justo. Integer a lorem a mauris suscipit congue luctus ut quam. Mauris pellentesque pellentesque mattis. In sed mi dignissim, faucibus elit at, rutrum odio. Mauris et velit magna. Maecenas iaculis eget sapien eu gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum a egestas magna. Aenean tellus elit, aliquet at lacinia at, accumsan eget neque. Maecenas rutrum risus quis sem scelerisque sagittis. Quisque sit amet turpis lorem. </p>
	</section>

</div>

</body>
</html>

Полная адаптивность

Трюк со space-between всегда будет следить за выравниванием, даже когда меняется размер экрана. Однако когда область просмотра становится слишком маленькой для горизонтальной шапки, мы можем сделать её вертикальной, изменив свойство flex-direction в медиа-запросе.

@media (max-width: 1000px){
  header{
    /* Меняем оси шапки, делая её вертикальной. */
    flex-direction: column;
  
    /* Выравнивание элементов шапки с начала (по левому краю). */
    align-items: flex-start;
  }
}

Выводы

Подведём итог нашего краткого руководства! Надеемся, что вы сочли его полезным и сразу начнёте его применять. В настоящее время Flexbox довольно хорошо поддерживается браузерами, так что если ваши пользователи не предпочитают IE, то эта техника может применяться без всякого вреда.

Чтобы узнать больше о Flexbox и об используемых нами свойствах CSS, ознакомьтесь со следующими ссылками:

CSS Grid и Flexbox: сравнение на практике

Оригинал: http://tutorialzine.com/2017/03/css-grid-vs-flexbox/
Перевод: Влад Мержевич

Ещё недавно макет для всех страниц HTML верстался с помощью таблиц, float и других свойств CSS, которые не очень хорошо подходят для стилизации сложных веб-страниц.

Затем появился Flexbox — режим вёрстки, который был специально разработан для создания надёжных адаптивных страниц. Flexbox упростил правильное выравнивание элементов и их содержимого и теперь является предпочтительной системой CSS для большинства веб-разработчиков.

Но теперь у нас есть новый претендент на титул за звание «лучшей системы для вёрстки макетов HTML» (название титула ещё в процессе разработки»). Это CSS Grid и в ближайшее время эта система будет доступна в браузерах Firefox 52 и Chrome 57, а вскоре, как я надеюсь, и в других браузерах.

Базовый макет

Чтобы понять, каково это — создавать макеты на каждой системе, мы сделаем одну и ту же HTML-страницу дважды — один раз с помощью Flexbox, а затем на CSS Grid. Вы можете скачать оба проекта отсюда или проверить их в этой демонстрационной версии.

Уменьшенный макет веб-страницы

Уменьшенный макет веб-страницы

Дизайн довольно простой — он состоит из выровненного по центру контейнера, внутри которого у нас есть шапка, основной раздел, боковая панель и подвал. Вот главные «испытания», которые мы должны провести, сохраняя CSS и HTML по возможности чистыми:

  1. Разместить четыре основных раздела макета.
  2. Сделать страницу адаптивной (боковая панель опускается ниже основного содержимого на маленьких экранах).
  3. Выровнять содержимое шапки — навигация слева, кнопка справа.

Как вы можете видеть, ради сравнения мы оставили всё максимально простым. Начнём с первого испытания.

Испытание 1. Размещение разделов страницы

Решение на Flexbox

Добавляем display: flex к контейнеру и задаём направление дочерних элементов по вертикали. Это позиционирует все разделы друг под другом.

.container {
  display: flex;
  flex-direction: column;
}

Теперь нам нужно сделать так, чтобы основной раздел и боковая панель располагались рядом. Поскольку flex-контейнеры обычно однонаправлены, нам нужно добавить дополнительный элемент.

<header></header>
<div class="main-and-sidebar-wrapper">
  <section class="main"></section>
  <aside class="sidebar"></aside>
</div>
<footer></footer>

Затем мы устанавливаем этому элементу display: flex и flex-direction с противоположным направлением.

.main-and-sidebar-wrapper {
  display: flex;
  flex-direction: row;
}

Последний шаг — задать размеры основного раздела и боковой панели. Мы хотим, чтобы основное содержимое было в три раза шире боковой панели, что несложно сделать с помощью flex или процентов.

.main {
  flex: 3;
  margin-right: 60px;
}
.sidebar {
  flex: 1;
}

Как вы можете видеть, Flexbox сделал всё хорошо, но нам кроме этого понадобилось довольно много свойств CSS плюс дополнительный элемент HTML. Давайте посмотрим, как будет работать CSS Grid.

Решение на CSS Grid

Существует несколько вариантов использования CSS Grid, но мы воспользуемся синтаксисом grid-template-areas, как наиболее подходящего для наших целей.

Сперва мы определим четыре grid-area, по одному на каждый раздел страницы:

<header></header>
<!-- Обратите внимание, что в этот раз нет дополнительных элементов -->
<section class="main"></section>
<aside class="sidebar"></aside>
<footer></footer>
header {
  grid-area: header;
}
.main {
  grid-area: main;
}
.sidebar {
  grid-area: sidebar;
}
footer {
  grid-area: footer;
}

Теперь мы можем настроить нашу сетку и определить расположение каждой области. Вначале код может показаться довольно сложным, но как только вы познакомитесь с системой сетки, он становится проще для понимания.

.container {
  display: grid;
  
  /* Определяем размер и число колонок нашей сетки. 
     Единица fr работает подобно Flexbox:
     колонки делят свободное пространство в строке согласно их значениям.
     У нас будет две колонки — первая в три раза больше второй. */
  grid-template-columns: 3fr 1fr;
  
  /* Связываем сделанные ранее области с местами в сетке.
     Первая строка — шапка.
     Вторая строка делится между основным разделом и боковой панелью.
     Последняя строка — подвал. */
  grid-template-areas: 
    "header header"
    "main sidebar"
    "footer footer";

  /* Интервал между ячейками сетки будет 60 пикселей */
  grid-gap: 60px;
}

Вот и всё! Наш макет теперь будет соответствовать указанной выше структуре и мы его настроили так, что нам не придётся иметь дело с margin или padding.

Испытание 2. Делаем страницу адаптивной

Решение на Flexbox

Выполнение этого шага строго связано с предыдущим. Для решения на Flexbox нам придётся изменить flex-direction и отрегулировать margin.

@media (max-width: 600px) {
  .main-and-sidebar-wrapper {
    flex-direction: column;
  }
  
  .main {
    margin-right: 0;
    margin-bottom: 60px;
  }
}

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

Решение на CSS Grid

Поскольку мы уже определили grid-areas, нам просто нужно переопределить их порядок в медиа-запросе. Мы можем использовать ту же настройку колонок.

@media (max-width: 600px) {
  .container {
    /* Выравнивание областей сетки для мобильного макета */
    grid-template-areas: 
      "header header"
      "main main"
      "sidebar sidebar"
      "footer footer";
  }
}

Или можем переопределить весь макет с нуля, если считаем, что это решение чище.

@media (max-width: 600px) {
  .container {
  /* Переделываем сетку в одноколоночный макет */
  grid-template-columns: 1fr;
  grid-template-areas: 
    "header"
    "main"
    "sidebar"
    "footer";
  }
}

Испытание 3. Выравнивание компонентов шапки

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

Решение на Flexbox

<header>
  <nav>
    <li><a href="#"><h1>Logo</h1></a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </nav>
  <button>Button</button>
</header>

Мы уже делали похожий макет на Flexbox в одной из наших старых статей — Простейший способ создания адаптивной шапки. Техника довольно простая:

header {
  display: flex;
  justify-content: space-between;
}

Теперь список навигации и кнопка выровнены правильно. Осталось только разместить пункты внутри <nav> по горизонтали. Проще это сделать с помощью display: inline-block, но поскольку мы собираемся целиком использовать Flexbox, применим решение только для него:

header nav {
  display: flex;
  align-items: baseline;
}

Только две строки! Совсем неплохо. Давайте посмотрим, как с этим справится CSS Grid.

Решение на CSS Grid

Чтобы разделить навигацию и кнопку, мы должны добавить display: grid к header и настроить двухколоночную сетку. Нам также понадобятся две дополнительные строки в CSS, чтобы позиционировать всё на соответствующих границах.

header{
  display: grid;
  grid-template-columns: 1fr 1fr;
}
header nav {
  justify-self: start;
}
header button {
  justify-self: end;
}

Что касается ссылок в одну строку внутри навигации, у нас не получилось сделать это корректно с CSS Grid. Вот как выглядит наша лучшая попытка:

Ссылки строчные, но они не могут быть выровнены правильно, поскольку не существует варианта baseline, как у align-items. Мы также должны определить ещё одну вложенную сетку.

header nav {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  align-items: end; 
}

Понятно, что CSS Grid не справилась с этой частью макета, но это и не удивительно — основное внимание уделяется выравниванию контейнеров, а не содержимому внутри них. Эта система не для нанесения последних штрихов.

Выводы

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

Для тех из вас, кто перепрыгнул непосредственно к выводам этой статьи (не волнуйтесь, мы тоже так делаем), вот краткий итог сравнения:

  • CSS Grid отлично подходит для создания большой картины. Эта система облегчает управление макетом страницы и даже может иметь дело с нестандартным и асимметричным дизайном.
  • Flexbox отлично подходит для выравнивания содержимого внутри элементов. Используйте эту систему для размещения мелких деталей дизайна.
  • Используйте CSS Grid для двумерных макетов (строк И колонок).
  • Flexbox лучше работает только в одном измерении (со строками ИЛИ с колонками).
  • Нет причин применять только CSS Grid или только Flexbox. Изучайте их и используйте совместно.

Создайте дизайн вашего первого сайта уже сегодня

Реклама

Прямо сейчас забирайте БЕСПЛАТНО практический пошаговый видеокурс по созданию дизайна лендинга.

Проходите всего по одному короткому уроку в день, и за ближайшие 8 дней вы получите дизайн современного лендинга.

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

Страницы