Перевод статьи «The Ultimate Practical Guide to CSS Grid».
CSS Grid — очень мощный инструмент, и в этой статье я продемонстрирую вам его возможности. Основная задача CSS Grid — полностью изменить то, как мы проектируем пользовательские интерфейсы. Grid — первый CSS-модуль, созданный специально для решения проблем разработки макетов — проблем, которые нам постоянно приходилось обходить.
Как заявлено в названии, эта статья — практическое руководство. Я не буду грузить читателей теорией, а лучше покажу побольше примеров кода. Если хотите познакомиться с концепциями CSS Grid, я рекомендую следующие материалы:
Хочу сразу отметить, что Grid и Flexbox — НЕ враги. Они прекрасно могут работать вместе. Главное — знать, когда и что применять:
- Flexbox — для размещения элементов в ОДНОМ измерении (в строке или столбце);
- Grid — для работы в ДВУХ измерениях.
Примечание. Я настоятельно советую пользоваться встроенными CodePen-примерами. Поиграйте с ними, посмотрите, что да как.
Итак, поехали!
1. Центрируйте, как профессионал
Я совершенно уверен, что вы уже неоднократно сталкивались с проблемами при попытке отцентрировать элемент. Что, если я скажу вам, что для этого нужны всего две строчки кода?
Представьте, что у вас есть parent div и child div. Вам нужно сделать следующее:
.parent {
display: grid;
place-items: center;
}
See the Pen Center it like a boss by Richard Nikolas (@richardnikolas) on CodePen.
2. repeat + grid-template-columns
CSS Grid имеет несколько очень интересных и мощных функций и свойств. Например, repeat [MDN Docs] и grid-template-columns. Они очень пригождаются при создании красивых сеток.
repeat позволяет записывать в очень краткой форме повторяющийся паттерн из большого количества столбцов или рядов.
Можно (но не нужно) создать шаблон сетки таким образом:
.parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
Или же вы можете использовать repeat, и тогда ваш код будет выглядеть так:
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
Это гораааздо лучше, правда ведь?
See the Pen I believe in repeat and grid-template-column supremacy by Richard Nikolas (@richardnikolas) on CodePen.
3. Бесконечная адаптивная сетка
Если вы хотите создать адаптивную сетку, наполненную элементами одинакового размера, вам потребуется написать всего три строчки CSS-кода:
.grid {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
See the Pen Infinite responsive grid by Richard Nikolas (@richardnikolas) on CodePen.
4. Базовая организация макета
Допустим, вы хотите сделать самый простой макет. Что-нибудь стандартное, вроде такого:
Это суперпросто, настолько, что аж неудобно! (В оригинале — «It’s super easy, barely an inconvenience!» Это выражение, популяризованное ютубером и комиком Райаном Джорджем (Ryan George). — Прим. перев.).
Для такой организации страницы нужно всего лишь использовать grid-template-areas и grid-area.
У вас может быть такой HTML:
<body>
<container>
<header>Header</header>
<article>Article</article>
<aside>Sidebar</aside>
<nav>Ads</nav>
<footer>Footer</footer>
</container>
</body>
И такой CSS:
container {
display: grid;
height: 100%;
/* Explicit grid */
grid-template-areas:
"topbar topbar topbar"
"sidebar content ads"
"footer footer footer";
grid-template-columns: 1fr 3fr 1fr;
grid-template-rows: 15% 50% 20%;
gap: 35px;
}
header { grid-area: topbar; }
aside { grid-area: sidebar; }
article { grid-area: content; }
nav { grid-area: ads; }
footer { grid-area: footer; }
И вот результат:
See the Pen Basic layout organizer by Richard Nikolas (@richardnikolas) on CodePen.
5. Grid + Flexbox = 💞
Просто маленькое доказательство того, что эти ребята прекрасно могут работать вместе, прямо как макароны и сыр.
Мы используем grid для создания самой страницы, а flexbox — для организации краточек. И все это очень адаптивно, конечно же.
container {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(3, 1fr);
}
.card {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1rem;
}
See the Pen Grid + Flexbox = <3 by Richard Nikolas (@richardnikolas) on CodePen.
6. Потрясающая фотогалерея
На закуску я покажу вам маленький кусочек кода, создающий прекрасную фотогалерею.
Ваша сетка может быть анимированной! Используя grid-template-areas, grid-area и CSS-анимацию, мы можем создавать потрясающие эффекты.
.animated-grid {
display: grid;
gap: 1rem;
height: 85vh;
margin-bottom: 200px;
grid-template-areas:
'a b c d'
'l 🌟 🌟 e'
'k 🌟 🌟 f'
'j i h g';
grid-template-rows: repeat(4, 25%);
grid-template-columns: 240px auto auto 240px;
--standard-delay: 100ms;
}
.card {
background-color: rgb(36, 243, 147);
animation: cardEntrance 700ms ease-out;
animation-fill-mode: backwards;
}
И — да! — вы даже можете использовать эмодзи для имени area.
See the Pen Beautiful Grid Photo Gallery by Richard Nikolas (@richardnikolas) on CodePen.
Полезные ресурсы для изучения CSS Grid:
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]