Сверстаем простой подвал «в линию», который часто встречается в работах студентов Школ бюро. При этом мы не будем стилизовать текст и ссылки, а сосредоточимся на раскладке.
Начнём с разметки:
<footer class="footer">
<div class="footer-copyright">
© Айс-бейби, 2023
</div>
<nav class="footer-nav">
<li><a href="/contacts/">Контакты</a></li>
<li><a href="/delivery/">Доставка</a></li>
<li><a href="/returns/">Гарантия и возврат</a></li>
</nav>
<ul class="footer-social">
<li><a href="https://t.me/icebaby">Телеграм</a></li>
<li><a href="https://vk.com/icebaby">ВКонтакте</a></li>
</ul>
</footer>Превратим навигацию и список ссылок на соцсети в грид‑контейнер с автоматической раскладкой по колонкам, чтобы ссылки выстроились в строку:
.footer-nav,
.footer-social {
display: grid;
grid-auto-flow: column;
}
Уберём маркеры и зададим отступы между элементами списков:
.footer-nav,
.footer-social {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content; /* Автоматически создаём колонки по количеству пунктов меню с шириной по их содержимому. Мы используем max-content, а не min-content, чтобы пункты меню из нескольких слов всегда оставались в одну строку */
column-gap: 18px; /* Задаём межколонник в 18 пк */
list-style: none;
}
Поднимемся на уровень выше и зададим раскладку для подвала целиком:
.footer {
display: grid;
grid-template-columns: max-content max-content 1fr; /* Пусть копирайты и навигация займут минимум места, а соцсети — всё оставшееся */
column-gap: 36px;
}
.footer-nav,
.footer-social {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
column-gap: 18px;
list-style: none;
}В колонке с соцсетями осталось свободное место, элементы прижались к левому краю. Отожмём иконки к правому краю, но только на десктопе:
.footer {
display: grid;
grid-auto-columns: max-content max-content 1fr;
column-gap: 36px;
}
.footer-nav,
.footer-social {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
column-gap: 18px;
list-style: none;
}
@media (width >= 961px) {
.footer-social {
justify-self: end;
}
}Заменим текстовые ссылки на соцсети иконками в СВГ:
<!-- СВГ-спрайт с иконками -->
<svg width="0" height="0" class="hidden">
<symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="telegram">
<path fill-rule="evenodd" clip-rule="evenodd" d="M48 ... 21.8015Z" fill="black"></path>
</symbol>
<symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" id="vk">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 ... 31.8761H25.2555Z" fill="black"></path>
</symbol>
</svg>
<!-- ... -->
<ul class="footer-social">
<li>
<a href="https://t.me/icebaby">
<svg class="icon" width="24" height="24"><use xlink:href="#telegram"></use></svg>
</a>
</li>
<li>
<a href="https://vk.com/icebaby">
<svg class="icon" width="24" height="24"><use xlink:href="#vk"></use></svg>
</a>
</li>
</ul>Уменьшим отступ между иконками:
.footer {
display: grid;
grid-auto-columns: max-content max-content 1fr;
column-gap: 36px;
}
.footer-nav,
.footer-social {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
column-gap: 18px;
list-style: none;
}
.footer-social {
column-gap: 9px;
}
@media (width >= 961px) {
.footer-social {
justify-self: end;
}
}Если пунктов в меню станет больше, подвал может превратиться в «гантелю» — слева копирайты, справа соцсети, а навигация болтается между ними:
В таком случае стоит прижать навигацию к копирайту, а от соцсетей отступить:
@media (width >= 961px) {
.footer-nav {
margin-left: -18px;
}
.footer-social {
justify-self: end;
}
}Добавим мобильную версию:
.footer {
display: grid;
grid-auto-columns: max-content max-content 1fr;
column-gap: 36px;
}
.footer-nav,
.footer-social {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
column-gap: 18px;
list-style: none;
}
.footer-social {
column-gap: 9px;
}
@media (width >= 961px) {
.footer-nav {
margin-left: -18px;
}
.footer-social {
justify-self: end;
}
}
@media (width <= 960px) {
.footer {
grid-template-columns: 1fr; /* Меняем сетку, раскладывая всё в одну колонку и N рядов по содержимому */
grid-auto-rows: min-content;
row-gap: 1em;
}
.footer-nav {
display: block; /* Выключаем раскладку гридами */
}
}Результат целиком:
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.