Примечание: Я только что перевел текст ниже и разместил его здесь. Ссылки находятся в конце статьи.

Привет. Сегодня я хочу поговорить о некоторых специальных ключевых словах CSS Grid, которые полезны для определения размера дорожек сетки. Возможность использовать эти ключевые слова позволит вам точно определить желаемые размеры дорожек сетки. Итак, начнем.

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

Представляем ключевые слова для определения размера

Когда дело доходит до CSS Grid, есть только три ключевых слова, которые можно использовать для определения размера дорожек. Эти ключевые слова: auto, min-content и max-content. Все они могут использоваться в свойствах CSS Grid-template-colums и Grid-template-rows.

Мин-контент и макс-контент

Если вы хотите, чтобы размер дорожки сетки зависел от ее содержимого, вы должны использовать одно из двух ключевых слов: min-content или max-content. Трек сетки минимального содержания попытается сохранить минимальный размер, не переполняя свое содержимое. Дорожка сетки максимального содержания, однако, предполагает, что свободное пространство для расширения бесконечно, и предполагает идеальную ширину для вашего контента.

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

Как вы можете видеть здесь, нет разницы в размерах между столбцами с минимальным и максимальным содержанием. Причина в том, что изображение имеет «фиксированный размер по умолчанию», который не изменится, если вы явно не прикажете ему измениться. С другой стороны, содержание текста имеет возможность «сжимать» свой размер в зависимости от ситуации. Это сжатие осуществляется с помощью переноса текста (переноса текста), то есть отдельные слова не переносятся. Зная это, давайте заменим изображение в приведенном выше примере текстом.

На этот раз ширина столбцов другая. Столбец min-content заставляет свое текстовое содержимое «переноситься», в то время как столбец max-content расширяется настолько, что перенос текста не требуется. Обратите внимание, что столбец min-content имеет ту же ширину, что и самое длинное слово, а столбец max-content теперь шире самого контейнера.

Что произойдет, если столбец содержит более одного типа контента? Ниже приведен пример столбцов, содержащих изображение и текст.

В обоих случаях самый широкий элемент определяет размер столбца. В случае min-content этим элементом является изображение или самое длинное слово. В случае столбца max-width это изображение или весь текст. Обратите внимание, как оба типа контента разделены внутри столбца по вертикали. Я хочу обсудить это поведение в одной из моих будущих статей.

Ключевое слово Авто

Ключевое слово auto связано с единицей измерения fr, которую я описал в двух предыдущих статьях. Аналогичным образом он определяет, что дорожка сетки должна «заполнять» все доступное пространство на данной оси.

.container {
    /** ... **/
    grid-template-columns: auto auto;
}

Однако есть два основных различия между ключевым словом auto и единицей fr. Во-первых, ключевое слово auto не является единицей измерения, поэтому его нельзя использовать с числовым значением (например, 2auto), как с fr. Во-вторых, ключевое слово auto всегда «проигрывает» с единицей fr, когда обе используются вместе. См. пример ниже.

.container {
    /** ... **/
    grid-template-columns: auto 1fr;
}

Вы можете ожидать, что столбец auto «заполнит» такое же пространство, что и столбец fr в горизонтальном измерении. Однако наличие столбца fr приводит к тому, что столбец автоматически «сжимает» свой размер до размера присутствующего содержимого.

Обратите внимание, что в случае текстового контента автоматическая сетка ведет себя иначе, чем min-content/max-content сетка. Когда auto смешан с fr, auto-track никогда не приводит к «переносу» текстового содержимого, если только auto-track «не заполняет» все доступное пространство.

.container {
    /** ... **/
    width: 200px;
    grid-template-columns: auto 1fr;
}

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

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

Источник

Статья написана Матеушем Кирмучем.