Адаптация ширины столбца в CSS Grid: «автозаполнение» и «автоподгонка»

внешний интерфейс браузер Программа перевода самородков CSS
Адаптация ширины столбца в CSS Grid: «автозаполнение» и «автоподгонка»

Ширина столбца CSS Grid является адаптивной:auto-fill vs auto-fit

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

Вышеуказанные функции могут быть достигнуты с помощью одного утверждения, которое напоминает мне «Гарри Поттера», в котором Дамблдор взмахнул своей палочкой Барары в доме Горация, а затем «мебель подпрыгнула по частям». в воздухе они принимали свою первоначальную форму, перья втыкались обратно в подушки, а поврежденные книги автоматически восстанавливались и аккуратно расставлялись на книжной полке…».

Это так волшебно, и без медиа-запросов. Все благодаряrepeat()методы и ключевые слова для автоматической верстки.

На самом деле технических статей в этой области очень много, я не буду здесь повторять основы использования, если вам интересно, вы можете обратиться к статье Тима Райта.Сообщение блога, лично настоятельно рекомендуется.

Вкратце,repeat()Метод может разделить несколько столбцов в соответствии с вашими потребностями. Например, если вам нужна сетка из 12 столбцов, вы можете написать так:

.grid {
   display: grid;

  /* 指定网格列数 */
  grid-template-columns: repeat(12, 1fr);
}

1frУказывает, что браузер разделяет пространство сетки поровну, по одному на каждый столбец, таким образом создавая 12 столбцов переменной, но одинаковой ширины. И независимо от ширины области просмотра 12 столбцов останутся прежними. Однако считается, что вы также думали, что если область просмотра слишком узкая, содержимое неизбежно будет сжато.

Поэтому необходимо установить минимальную ширину столбца, чтобы контейнер не был слишком узким, что здесь нужно использоватьminmax()метод.

grid-template-columns: repeat( 12, minmax(250px, 1fr) );

В соответствии с темпераментом сетки это определенно приведет к переполнению содержимого текущей строки.Даже если область просмотра не может вместить эти столбцы из-за ограничений минимальной ширины столбца, эти столбцы не будут автоматически перенесены, потому что браузер был раньше сказали, что столбцов должно быть 12. .

Чтобы реализовать разрывы строк, вы можете использоватьauto-fitилиauto-fill.

grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );

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

На первый взгляд имя,auto-fillа такжеauto-fitДве вещи, которые кажутся полными противоположностями, на самом деле довольно тонкие.

Если вам нужно сказать это, используйтеauto-fit, в конце текущей строки много пустого места, но когда оно остается пустым и почему оно пустое?

Давайте узнаем.

В чем разница между Fill и Fit?

На недавнем семинаре по CSS я резюмировал это так:auto-fillа такжеauto-fitразницы:

auto-fillИмеет тенденцию вмещать больше столбцов, поэтому, если есть место для новых столбцов при соблюдении ограничений по ширине, он будет неявно создавать столбцы для заполнения текущей строки. Несмотря на то, что столбец создается без содержимого, он фактически занимает место в строке.

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

Сначала это может показаться запутанным, но позже я сделаю наглядную диаграмму, чтобы показать это поведение, что облегчит понимание. Firefox имеет специальные инструменты анализа сетки, которые помогают отображать размер и положение элементов и столбцов.display: gridсерединаgridСлева есть значок сетки, нажмите, чтобы отобразить линии сетки).

кздесьДемонстрационный пример.

все еще используюrepeat()для определения столбца, установите его минимальную ширину в 100 пикселей и максимальную в1fr, так что при наличии дополнительного места каждому столбцу выделяется равное количество места. Здесь количество столбцов рассчитывается само по себе, а перенос строк и адаптация выполняются браузером.

В первом примере используетсяauto-fillключевое слово, второеauto-fit.

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

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

В определенных обстоятельствах,auto-fillа такжеauto-fitЭффект тот же.

Несмотря на то, что они выглядят одинаково, они различны в своих костях. Это выглядит одинаково только из-за ширины области просмотра, вызывающей это совпадение.

Ключевым моментом, который заставляет их давать разные результаты, является то, чтоgrid-template-columnsКоличество колонок и ширина колонок в настройке, пример другой, результат будет другой.

Разница становится очевидной, когда ширина области просмотра достаточно велика, чтобы разместить дополнительный столбец в текущей строке. В это время браузер будет использовать два способа справиться с этой ситуацией, как с этим справиться, зависит от того, есть ли еще контент для размещения в дополнительной колонке.

Итак, если текущая строка может поместиться в другой столбец, браузер ведет себя следующим образом:

  1. «У меня все еще есть место для размещения еще одного столбца, и есть ли какой-либо контент, который я не вставил (например, элемент сетки)? Если да, то ОК, я добавлю еще один столбец в текущую строку, если окно просмотра слишком мало и места мало, буду менять Добавить строку."
  2. Если не более того: «Должна ли эта новая колонка быть веганской или она должна свернуть и позволить остальным колонкам расшириться, чтобы занять свое место?»

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

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

Теперь должно быть ясно, если вы все еще не понимаете, давайте продолжим:

auto-fillКак это сделать: "Давай "столбцы", дай я займу весь этот ряд, чем больше столбцов, тем лучше, я не против, что некоторые столбцы полностью прозрачны - если ты их не видишь, то это не так". значит их нет.Если есть место,добавьте их.Колонка,не важно есть контент или нет,все равно я занимаю место(т.е. оно будет заполнено контентом/сеткой пункт)."

Как указано выше,auto-fillДержите как можно больше столбцов, даже если некоторые из них пусты,auto-fitнемного отличается.auto-fitпрактика иauto-fillТочно так же количество столбцов увеличивается по мере увеличения ширины области просмотра, разница в том, что вновь добавленные столбцы сворачиваются (включая зазор). Использование инструмента сетки Firefox для визуализации этого процесса идеально подходит.По мере увеличения ширины области просмотра добавляются новые столбцы и увеличиваются линии сетки.Весь процесс можно наблюдать невооруженным глазом.

auto-fitПрактика: «Сначала заполните существующие столбцы, а затем расширьте их до тех пор, пока он не заполнит всю строку пространства. Пустые столбцы не могут занимать лишнее пространство, эти места должны использоваться хорошо, а уже заполненные столбцы (контент/сетка item) расширяется, чтобы заполнить эти пробелы».

Важно помнить, что в обоих случаях дополнительные столбцы (свернутые или нет) не являются неявными столбцами — в официальной документации это имеет особое значение. Все вновь добавленные или созданные столбцы находятся в явной сетке (явной сетке), которая совпадает с сеткой, которая напрямую указывает 12 столбцов. Таким образом, при использовании индекса номера столбца-1будет указывать на конец сетки, что не так, если она была создана неявно. ДатьRachel AndrewДобавлены куриные бедра, спасибо за совет.

Суммировать

Только когда ширина строки достаточно велика для размещения дополнительного столбца,auto-fillа такжеauto-fitРазница между ними будет раскрыта.

использоватьauto-fit, область содержимого автоматически растягивается на всю строку; с другой стороны, при использованииauto-fill, браузеры обрабатывают пустые столбцы так же, как и столбцы с существенным содержимым, позволяя им занимать место в строке — даже если эти пустые столбцы не имеют основного содержимого, они все равно занимают долю места в строке, поэтому могут косвенно влиять на размер или ширину. , столбцов с содержимым.

Какое поведение вы предпочитаете, зависит от ваших потребностей, и, честно говоря, мне тоже интересно, какова ситуация,auto-fillбыло бы лучше, чемauto-fitЧуть более применимо. Если у вас есть такой сценарий использования, я надеюсь, что вы можете дать мне несколько советов в области комментариев.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории