How to become an author
Streams
All streams Development Admin Design Management Marketing PopSci
Comments 38
А что будет с элементами после container если строк в таблице будет не две?
0

А что с ними должно быть? Сам container размещается на странице как блочный элемент, пока не определено иное.

0
Примерно следующее
<div class="container">  
  <div>1</div>  
  <div>2</div>  
  <div>3</div>  
  <div>4</div>  
  <div>5</div>  
  <div>6</div>  
</div>
<div>after</div>

image

image

image

0

Всё правильно, в шаблоне-то задано две строки. На самом деле тут, конечно, не следовало задавать grid-template-rows, тогда строчек было бы столько, сколько реально нужно.

0
Это можно решить путём задания свойства grid-auto-rows: 100px; при этом удалив grid-template-rows. Таким образом rows будут создаваться динамически по мере необходимости.
0

Изначально kovserg некорректно сформулировал вопрос, а именно: «что будет с элементами после container». «После» — это следующие за ним сиблинги, а не дочерние элементы, которыми управляет grid.

0
А я в 2019 году продолжаю использовать table, скажите, я нормален?
+2
На гужевых повозках до сих пор некоторые ездят и нормально. А если серьёзно, то главное не инструмент, а результат, в том числе аккуратный и поддерживаемый HTML. А как там теги зовутся юзеру всё равно.
+5
Может, что-то изменилось, но года три или четыре назад А/Б эксперимент показал, что частично завернутый в таблицу сайт (как это было когда-то у Хабра) Гугл ранжирует нефигово хуже.
0
А можете подробнее про это? Меняли только вёрстку? Насколько равны были «прочие равные» у вариантов А и Б? Может первым проиндексировался безтабличный вариант и табличный уже оказался менее уникальным?
0
Я участвовал тогда в роли верстака, так что всех метрик не знаю. В таблицы были завернуты шапка и подвал (в подвале было прилично информации, не просто адрес и телефон), сайт запускался сразу одновременно в двух доменных зонах (com и net), в net отдавался вариант без таблиц, таргет был на Северную Америку. В бестабличной верстке кода было немного больше, рендеринг был примерно одинаковый. Через 2-3 месяца бестабличный вариант по определенным (каким-то, не уточняйте, я не знаю) ключам был на 2-3 странице выдачи, табличный на 1-2 страницы дальше.

Кроме деталей верстки, сайты различались только цветовой гаммой и некоторыми деталями в лого.

Мне кажется, что использовать таблицы требуется только там, где они и нужны по смыслу. Сейчас же не лихие девяностые, и в ранжировании учитывается много смысловых / семантических факторов. Представьте, что ваш сайт попадется слабовидящему и он включит озвучание контента.
+3

table, конечно, не заменит grid, но у табличек есть одно замечательное свойство, о котором, как ни странно, мало кто знает: они очень быстро рендерятся браузером. Поэтому, я бы не стал списывать их со счетов даже при разметке лейаутов (в некоторых случаях), а не только при выводе табличных данных.

+1

Рендерятся может и быстро, но браузер пока не загрузит всю таблицу, не приступает к ее отображению. Или уже не так?

+3
У меня из прошлого отложилось в памяти свойство table-layout: fixed, которое по умолчанию auto. Насколько помню, если задано fixed, то браузер не дожидался загрузки всех данных таблицы и видимо за счет этого рендерил ее еще быстрее. Кроме того ширина колонок вычислялась не по ширине контента, непредсказуемо, а становилась одинаковой, если конечно не заданы конкретные значения с помощью тегов . Это свойство было очень полезно и работало еще во времена ie6.
+3
Подключение другого шаблона для пользователей с браузером IE будет одним из решений этой проблемы.
0
UFO landed and left these words here
Flexbox можно свободно использовать с 2017. Ждал нормальной поддержки для css grid и для меня 93% достаточно.

Флексбокс не покрывает все кейсы, которые может грид. Если рядков много и есть отступы между элементами нужно обнулять внешние отступы для крайних элементов, а потом опять добавлять и обнулять еще при медиа запросах. Если например нужно сделать высотой в 2 рядка нужно костыли делать на флексбоксе. Так что я рад гриду.
+1
94% (с частичной реализацией) — это в мире, а в России — всего 84,5%. Так что для большинства — это на будущее.
0
По России просто нет данных. Яндыкс-браузер в первую очередь, ну и прочие там спутники.
0
UFO landed and left these words here
Похоже, Хабру нужен поисковик именно по ссылкам на оригинал, чтобы не было повторов. Или вообще автоматический поиск при вставке и предупреждение, что такая ссылка уже есть.
+3
Да, верно. Неприятно вышло. С поиском подобных статей проблемы. Однако обсуждения в комментариях, возможно, дополнят картину
0
В принципе, неплохо. Да, repeat и minmax немного нагружают рендеринг и замедляют его, относительно прямого распределения grid-ом, но в целом, на малых и средних сайтах, вполне допустимо, и проще гораздо в управлении.
0

Я подумал, что это существующей разметке добавит отзывчивость.

+2

Появилось ли решение проблемы последней строки, когда хочется отдельно ее выровнять? Потому что в ней количество элементов, как правило, отличается от предыдущих строк.

+3
Разочарован в статье, ожидал реализации этого анекдота:
Заголовок спойлера
<@insomnia> Нужно выполнить всего три команды, чтобы поставить Gentoo
<@insomnia> cfdisk /dev/hda && mkfs.xfs /dev/hda1 && mount /dev/hda1 /mnt/gentoo/ && chroot /mnt/gentoo/ && env-update &&. /etc/profile && emerge sync && cd /usr/portage && scripts/bootsrap.sh && emerge system && emerge vim && vi /etc/fstab && emerge gentoo-dev-sources && cd /usr/src/linux && make menuconfig && make install modules_install && emerge gnome mozilla-firefox openoffice && emerge grub && cp /boot/grub/grub.conf.sample /boot/grub/grub.conf && vi /boot/grub/grub.conf && grub && init 6
<@insomnia> это первая
+2
Ага, сначала флексы появились — хоронили бутстрап, вышел 4-й на флексах, теперь гриды через пару лет в продакшене можно будет юзать — тоже вовсю хоронят, в 5 или 6 версии сетка будет на гридах — опять будут хоронить? БЭМ уж сразу до кучи хороните, и jQuery
0
Only those users with full accounts are able to leave comments. Log in, please.

Most reading

Your account

Sections

Information

Services

Language settings
Support
© 2006–2021 «Habr»