CSS Grid: функция повтора — за пределами основ

Здравствуйте. В сегодняшней статье я хочу рассказать вам больше о функции повтора() CSS Grid. Помимо своих базовых возможностей, эта неприметная функция обладает чрезвычайно мощным свойством: позволяет динамически изменять количество дорожек относительно доступного пространства. Здесь я покажу вам, как это работает.

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

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

grid-template-columns: repeat(5, 200px);

instead of:

grid-template-columns: 200px 200px 200px 200px 200px;

Кроме целого числа, функция repeat() принимает в качестве первого аргумента еще два ключевых слова. Это ключевые слова auto-fit и auto-fill.

.container {
    grid-template-rows: repeat(auto-fit, 1fr);
    grid-template-columns: repeat(auto-fill, 200px);
}

Ключевое слово в качестве первого аргумента функции repeat().

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

.container {
   ...
   grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

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

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

<div class="container">
    <div class="item"></div>
</div>

.container {
    ...
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.item {
    ...
    grid-column: -1 / -2;
}

Различия между ключевыми словами auto-fill и auto-fit.

Основное различие между обоими ключевыми словами заключается в сворачивании дорожек. Свернутая дорожка — это дорожка, которая не занимает места в данном измерении. Использование ключевого слова auto-fill не позволяет дорожкам сворачиваться, даже если они не содержат элементов сетки внутри себя.

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

.container {
    ...
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

Обратите внимание, что все дорожки имеют ненулевую ширину. Это поведение не меняется, независимо от того, сколько дорожек содержат элементы сетки.

Использование ключевого слова auto-fit заставляет дорожки без элементов сетки сворачиваться. Занятые дорожки принимают максимально возможный размер, допустимый их определением. Это возможно потому, что их размер не ограничен размером незанятых дорожек.

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

.container {
    ...
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

Помните, что хотя свернутые колонки не видны, они существуют как часть сетки (здесь — в правой части сетки).

Ограничения на тип второго аргумента.

Использование функции repeat() с ключевым словом auto-fill/auto-fit ограничивает тип второго аргумента. Допустимый тип должен принадлежать к группе допустимых типов фиксированного размера. Согласно mdn <fixed-size> может иметь вид:

• значение длины в процентах

• функции minmax() с:

  • min задается как значение длины в процентах
  • max задается как одно из значений длины-процента, flex-значение или одно из следующих ключевых слов: min-content, max-content или auto

• функция minmax() с:

  • min задается как значение длины в процентах или одно из следующих ключевых слов: min-content, max-content или auto
  • max задано в виде процентного значения длины.

Многократное использование функции repeat в определении сетки.

Можно определить структуру сетки в заданном измерении с помощью нескольких вызовов функции repeat(). Однако, если в первом вызове в качестве первого аргумента используется ключевое слово auto-fill/auto-fit, все последующие вызовы должны использовать следующий шаблон: repeat(<integer>, <fixed-size>).

/* Valid: */
repeat(auto-fit, 100px), repeat(3, 20%)
repeat(auto-fill, 10%, repeat(10, minmax(100px, 500px))

/* Invalid: */
repeat(auto-fit, minmax(100px, 1fr)) repeat(auto-fill, 70%)
repeat(auto-fill, minmax(min-content, 100px)) repeat(auto-fit, 1fr);  

Спасибо, что прочитали эту небольшую статью. Если вы хотите прочитать больше подобных материалов, вы можете следить за моим аккаунтом на dev.to или twitter. Кроме того, не стесняйтесь давать мне обратную связь в любой форме. Я буду рад прочитать любые ваши комментарии. До скорой встречи в моей следующей статье!

PS. Если вы хотите поддержать мою работу, я буду благодарен за чашку кофе. Спасибо. ❤️