Практическое руководство по CSS Grid

Перевод статьи «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]