search

doka-guide / content

Контент Доки: статьи, картинки, демки и документация для авторов
https://doka.guide
Other
1.18k stars 629 forks source link

Проблемы в `Гайде по grid` #4263

Open rakleed opened 1 year ago

rakleed commented 1 year ago

Ссылка на статью

https://doka.guide/css/grid-guide/

Описание

  1. Почему в заголовках свойств grid-template-columns, grid-template-rows, grid-auto-columns, grid-auto-rows, column-gap, row-gap и т. д. вначале идут колонки, а затем ряды, если в сокращённых свойствах всегда вначале идут ряды? Меня это при первом ознакомлении только сбивало с толку, так сложно было запоминать сокращённые свойства. Так просто принято в сообществе, или почему вы перечисляете их в таком порядке?
  2. В justify-items и align-items во втором и последующих примерах кода добавлены странные комментарии, которые, оказывается, означают, что исходный код из первого примера также актуален и для последующих примеров. Я не помню, чтобы в какой-то другой статье встречал такие комментарии, так что я не уверен, что они вообще нужны. Но @solarrust считает иначе и предлагает их заменить, например, на многоточие …. А почему вообще был выбран текущий вариант?
  3. Может в justify-items и align-items в конце стоит помимо упоминания добавить ссылки на justify-self и align-self соответственно, чтобы упростить навигацию по статье? Или достаточно того, что они присутствуют в оглавлении?
  4. В grid-column-start, grid-column-end, grid-row-start, grid-row-end есть такая фраза: «auto — означает автоматическое размещение, автоматический диапазон клеток или дефолтное растягивание элемента, равное одному.» Но чему «одному»? Это никак не поясняется, и из контекста непонятно.
  5. Вы упоминаете minmax, но для полноты не хватает информации о auto-fill и auto-fit. Неплохая статья с примерами.

Пруфы

No response

solarrust commented 1 year ago

Привет тут!

Очень здорово, что ты обращаешь внимание на такие вещи.

  1. По всей видимости, так действительно сложилось в сообществе. Пруф 1, пруф 2 (сначала идут колонки, потом ряды). Подозреваю, что это связано с направлением чтения. Мы читаем по горизонтали. В человеческой логике сначала идёт горизонтальная ось, а потом вертикальная. Значит колонки в приоритете над рядами. Плюс, думаю, некоторое наследие флексбоксов, где основная ось по умолчанию горизонтальная. И хоть в гридах и нет основной и дополнительной оси, но переносить знакомые концепции привычнее в таком порядке — колонки и за ними ряды.
  2. Существующие комментарии и правда не самые очевидные. Я предложила заменить их на символ …. Многоточие является одним из стандартных типографских знаков, обозначающих сокращение повторяющейся части текста. Быстро нагуглить другие примеры технических статей с подобным сокращением у меня не получилось. Я руководствовалась своим редакторским опытом. В учебных материалах неоднократно использовала этот приём и встречала его у других. Если ты считаешь, что повторение части кода не затруднит понимание сути, то мы можем убрать комментарии и на его место вставить код, который подразумевался. Но нужно будет внимательно посмотреть на результат с точки зрения читателя.
  3. Мне кажется, что тут есть опасность смешения понятий. Свойства justify-items и align-items применяются к грид-контейнеру в то время как justify-self и align-self — к самому грид-элементу. Если получится понятно сформулировать предложение со ссылками на соответствующие разделы, то это может быть полезно. Но стоит критически оценить результат с точки зрения новичка и убедиться, что это не вносит большую путаницу.
  4. Да, тут и правда есть лёгкое недопонимание в тексте. Подразумевается, что по дефолту элемент будет растягиваться на одну ячейку, до следующей грид-линии. Как если бы мы указали явно span 1.
  5. Такой статьи и правда не хватает. Приноси! С удовольствием опубликую её в Доке =)