CSS Grid изменил наше представление о макете в Интернете. Компоненты изменили способ написания кода для Интернета. Сложите их вместе, они лучше, чем арахисовое масло и шоколад. В предыдущем посте я рассмотрел два шаблона, которые вы можете использовать при создании компонентов макета с помощью CSS Grid: компоненты Stack и The Split. В этом посте мы рассмотрим еще два компонента макета с помощью CSS Grid.

Столбцы и компонент столбца

Одна из самых давних традиций в фреймворках CSS - это концепция сетки из двенадцати столбцов. Это открыло миру настоящий макет, не основанный на потоке документов. Так что интуитивно может возникнуть желание воспроизвести этот шаблон с помощью CSS Grid. Этого легко добиться с помощью двух компонентов: столбцов и компонента столбца.

В предыдущей статье мы узнали о том, как сделать два столбца в компоненте Split, предоставляя два значения длины CSS для свойства grid-template-columns. Таким образом, мы могли бы просто использовать ту же логику и написать что-то вроде этого:

const Columns = styled.div`
   display: grid;
   gap: 1rem;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
`
<Columns>
  {/* content here */}
</Columns>

Приведенный выше код действительно работает, но, к счастью, была добавлена ​​новая функция CSS для улучшения взаимодействия с разработчиками, в частности функция repeat. Функция repeat принимает два значения. Первое значение - это количество раз, которое вы хотите повторить значение длины CSS, а второе - это значение длины, которое вы хотите повторить. Итак, мы можем переписать приведенный выше код следующим образом:

const Columns = styled.div`
   display: grid;
   gap: 1rem;
   grid-template-columns: repeat(12, 1fr);
`
<Columns>
  {/* content here */}
</Columns>

Преимущество нашего компонента Columns заключается в том, что мы больше не привязаны только к 12 столбцам. У нас может быть макет с 5 столбцами, макет с 21 столбцом или любое количество столбцов. Все, что нам нужно сделать, это добавить опору столбцов, где мы можем указать, сколько столбцов мы хотим, например:

const Columns = styled.div`
   display: grid;
   gap: 1rem;
   grid-template-columns: repeat(${props=>props.columns}, 1fr);
`
<Columns columns={5}>
  {/* content here */}
</Columns>

Это хорошо и все, что есть N столбцов, но часто нужно охватить более одного столбца. Именно здесь на помощь приходит компонент Column. С помощью этого компонента мы можем воспользоваться другим свойством CSS Grid, называемым свойством grid-column.

В отличие от других свойств, которые мы обсуждали, свойство grid-column используется в элементах сетки, а не в контейнерах сетки. В MDN есть полная документация по собственности, но, проще говоря, свойство позволяет вам определять размер и расположение элемента сетки.

Есть несколько способов сделать это, но для наших целей мы хотим определить, сколько столбцов охватывает наш элемент, и для этого мы объединяем свойство grid-column с ключевым словом span, чтобы определить, сколько столбцов будет охватывать наш элемент. Чтобы разделить столбец на 3 столбца, мы напишем наш компонент следующим образом:

const Columns = styled.div`
  grid-columns: span 3;
`

Теперь, конечно, мы не хотим жестко кодировать наш компонент Column, охватывающий 3 столбца, поэтому давайте сделаем его более динамичным:

const Columns = styled.div`
  grid-columns: span ${props=>props.span};
`

И теперь мы можем использовать их вместе вот так:

<Columns columns={5}>
  <LeftNav/>
  <Column span={3}>
    <Main/>
  </Column> 
 <SideBar/>
</Columns>

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

Как я уже упоминал ранее, я создал библиотеку компонентов макета на bedrock-layout.dev. Там вы найдете несколько компонентов макета, включая два вышеупомянутых компонента. Буду очень признателен, если вы ознакомитесь с ними и поможете мне улучшить их.