Comments 33
Интересная статья. Bootstrap для разной ширины экрана может автоматически менять расположение элементов. Можно ли сделать такое для Grid?
Проблема Bootstrap в несовместимости между версиями, сейчас задумался о смене инструмента.
Проблема Bootstrap в несовместимости между версиями, сейчас задумался о смене инструмента.
developer.mozilla.org/en-US/docs/Web/CSS/grid-template
Хотя мне удобнее отдельными свойствами все задавать, но это уже по вкусу.
Можно менять шаблон «на лету», элементы будут перестраиваться под шаблон не зависимо от их порядка в HTML.
Хотя мне удобнее отдельными свойствами все задавать, но это уже по вкусу.
Можно менять шаблон «на лету», элементы будут перестраиваться под шаблон не зависимо от их порядка в HTML.
Вся соль статьи разбивается вот об это:
Такой себе абзац. Вот если б вы это раскрыли — это была бы очень ценная статья. А в её текущем виде у неё полезность даже ниже, чем у соответствующей странички caniuse. Написать «вот есть фича Х и она крутая» с парой частных примеров — это мягко говоря маловато.
ЗЫ: Полезность грида с мелкой сеткой для этих ваших «необычных раскладок» мне представляется крайне сомнительной просто потому, что это и без грида издревле делается, position: relative и position: absolute. А с появлением calc вам даже больше не надо писать в комменты, что у вас тут крутая вёрстка с фиксированным шагом, можно это прямо в цсс записать. Более того, грид с сеткой в 1 пиксель собственно является тем же самым, что и абсолютное позиционирование.
Никто не скажет вам: «Вот здесь используй Grid, а здесь — нет!» Вы должны сами понять и научиться, но для этого нужно набивать шишки. Если реализация задачи на Grid заняла в два раза больше времени, чем на flexbox, значит, такие задачи не надо решать на Grid.
Такой себе абзац. Вот если б вы это раскрыли — это была бы очень ценная статья. А в её текущем виде у неё полезность даже ниже, чем у соответствующей странички caniuse. Написать «вот есть фича Х и она крутая» с парой частных примеров — это мягко говоря маловато.
ЗЫ: Полезность грида с мелкой сеткой для этих ваших «необычных раскладок» мне представляется крайне сомнительной просто потому, что это и без грида издревле делается, position: relative и position: absolute. А с появлением calc вам даже больше не надо писать в комменты, что у вас тут крутая вёрстка с фиксированным шагом, можно это прямо в цсс записать. Более того, грид с сеткой в 1 пиксель собственно является тем же самым, что и абсолютное позиционирование.
Не совсем. Грид умеет сам перестраивать элементы так, чтобы расположить их для большего заполнения. Что-то вроде masonry только попроще. Адаптивно верстать на гридах гораздо удобнее чем на absolute.
Хотя гриды и не идеальны, но все же в разы удобнее float:left; или position:absolute;
Хотя гриды и не идеальны, но все же в разы удобнее float:left; или position:absolute;
Нет, не поймите меня неправильно — грид разумеется намного удобнее абсолютного позиционирования, если кейс хоть сколько-нибудь сложный. Я про то, что ничего прорывного он не предлагает, это всё делалось и раньше, и причем для статических кейсов (а всякие «интересные раскладки» это практически всегда полная статика) не требовало никаких костылей типа добавочного JSа.
>> Grid — это простая двухмерная сетка
И поэтому так же как и в обычных div-ах тут ничего серьёзного не сделать всё равно. Нужна совершенно иная концепция к layout. И пока её не будет — любой layout, который хоть как-то требует отступа от табличного представления, будет геморроем в разработке.
И поэтому так же как и в обычных div-ах тут ничего серьёзного не сделать всё равно. Нужна совершенно иная концепция к layout. И пока её не будет — любой layout, который хоть как-то требует отступа от табличного представления, будет геморроем в разработке.
Не сказано про такой очень важный момент, как индексация такого контента поисковыми машинами. Например Google не понимает разметку на гридах, контент будет проиндексирован так, как будто гридов нет, что может приводить совсем не к тем результатам какие бы хотели видеть владельцы проекта. Расположение контента на странице, зачастую оказывает очень серьезное влияние на ранжирование документа, что в результате приводит к головной боли для верстальщика. Как угодить и тем и этим.
микроразметка вам в помощь
Микроразметка для решения этих задач Вам может помочь, но далеко не всегда. Потому что даже сейчас, Вы можете оказаться в ситуации когда тот контент который содержится например в теге H2 может быть участником разметки, а ключевое слово которое бы вы хотели разместить рядом с ним — нет.
ld+json.
Вообще вопрос решаем, глвное правльно подойти к нему.
Так например раньше не знали как сеошить spa, и всякие реакты (когда роутинг на фронте).
все разобрались, и тут то-же самое, главное чуток подумать.
Вообще вопрос решаем, глвное правльно подойти к нему.
Так например раньше не знали как сеошить spa, и всякие реакты (когда роутинг на фронте).
все разобрались, и тут то-же самое, главное чуток подумать.
Я вижу Вы очень далеко от технической SEO оптимизации, раз говорите такие забавные вещи. Я Вам открою сейчас целую плоскость в SEO, которая наполнит вашу жизнь на будущие месяцы — расстояние между двумя предложениями на странице может играть важную роль в релевантности текста запросу. И когда вы откроете для себя эту штучку, вы навсегда забудете про JSONLD. Ну или начнете его использовать исключительно как сопутствующую сущность.
Ну началось.
Мне известны нюансы по поводу технического СЕО и по поводу расположения текстовых блоков\контента.
Вопрос в том, что почти всегда если посидеть и подумать можно приблизится к решению задачи.
Вот ниже уже разумный ответ дан на этот вопрос.
Мне известны нюансы по поводу технического СЕО и по поводу расположения текстовых блоков\контента.
Вопрос в том, что почти всегда если посидеть и подумать можно приблизится к решению задачи.
Вот ниже уже разумный ответ дан на этот вопрос.
Это была часть моего первого сообщения. О том, что использование гридов имеет недостаток, который Вы сейчас вслед за мной описали.
Как следствие, если верстальщик знает как ему сверстать документ без гридов, верстальщик это сделает без гридов. Даже если это будет сложнее чем на гридах. Потому, что он получит предсказуемое поведение, индексирующего контент, робота.
Я не против гридов, я исключительно ЗА. Но к сожалению, сейчас, несмотря на очень приличную поддержку браузерами, есть отсутствие поддержки поисковой машиной. Что приводит к дополнительной задаче для верстальщика.
Расположение контента на странице, зачастую оказывает очень серьезное влияние на ранжирование документа, что в результате приводит к головной боли для верстальщика. Как угодить и тем и этим.
Как следствие, если верстальщик знает как ему сверстать документ без гридов, верстальщик это сделает без гридов. Даже если это будет сложнее чем на гридах. Потому, что он получит предсказуемое поведение, индексирующего контент, робота.
Я не против гридов, я исключительно ЗА. Но к сожалению, сейчас, несмотря на очень приличную поддержку браузерами, есть отсутствие поддержки поисковой машиной. Что приводит к дополнительной задаче для верстальщика.
Наоборот, Grid как раз дает вам больше возможностей здесь, вы можете расположить контент в документе в порядке его важности для поисковиков, а потом перестроить для посетителей с помощью CSS Grid.
Вот аналогичный пример, только там используется flexbox и свойство order, но то же самое можно и с Grid: codepen.io/iamryanyu/pres/myaexZ?html-preprocessor=pug
В любом случае, сейчас с этим намного проще, чем раньше, когда это достигалось комбинацией разных float или даже абсолютного позиционирования.
Вот аналогичный пример, только там используется flexbox и свойство order, но то же самое можно и с Grid: codepen.io/iamryanyu/pres/myaexZ?html-preprocessor=pug
В любом случае, сейчас с этим намного проще, чем раньше, когда это достигалось комбинацией разных float или даже абсолютного позиционирования.
Все не вполне так легко.
Во первых, флексы правильно понимаются текущим индексатором у Google. Потому их можно назвать «безопасным приемом для манипуляции» отображаемым контентом.
Во вторых Вы можете легко схлопотать ручные санкции от Google за то что контент который видит поисковый робот отличается от того что видит посетитель.
Во первых, флексы правильно понимаются текущим индексатором у Google. Потому их можно назвать «безопасным приемом для манипуляции» отображаемым контентом.
Во вторых Вы можете легко схлопотать ручные санкции от Google за то что контент который видит поисковый робот отличается от того что видит посетитель.
А где об этом можно почитать подробнее?
Моя информация базируется на опыте веб-разработки более 2-х лет назад, где даже `display:none` не принимался во внимание.
Моя информация базируется на опыте веб-разработки более 2-х лет назад, где даже `display:none` не принимался во внимание.
Display:none принимается во внимание, со многими НО.
Подобный контент будет влиять на страницу, но получит меньший вес чем если бы тот же контент был видимым.
Можно получить ручные санкции за контент который не релевантен странице.
Почитать обо всем этом, и не только этом, можно у любого специалиста, который в том числе занимается внутренней оптимизацией и при этом ставит массу экспериментов, для изучения влияний того или иного механизма.
Например блоги devaka, алаич, и многих других.
А можно ставить свои собственные эксперименты, получая удивительные результаты. Главное набраться терпения. Уже хотя бы потому, что тот же Google не скрывает, что при индексации проекта, может намеренно его занизить в выдаче, чтобы сбить с толку оптимизаторов.
Подобный контент будет влиять на страницу, но получит меньший вес чем если бы тот же контент был видимым.
Можно получить ручные санкции за контент который не релевантен странице.
Почитать обо всем этом, и не только этом, можно у любого специалиста, который в том числе занимается внутренней оптимизацией и при этом ставит массу экспериментов, для изучения влияний того или иного механизма.
Например блоги devaka, алаич, и многих других.
А можно ставить свои собственные эксперименты, получая удивительные результаты. Главное набраться терпения. Уже хотя бы потому, что тот же Google не скрывает, что при индексации проекта, может намеренно его занизить в выдаче, чтобы сбить с толку оптимизаторов.
а можно пруфлинк на вот это
Например Google не понимает разметку на гридах, контент будет проиндексирован так, как будто гридов нет, что может приводить совсем не к тем результатам какие бы хотели видеть владельцы проекта.
Поисковая машина Гугла рендерит страницы в движке от Chrome 41, а гриды появились в Chrome 57. Дальше — логический вывод.
1. Открываем логи и видим что робот захдоит к нам с заголовком о том что используется 41 версия движка.
2. Открываем серш консоль и просим отобразить нам содержимое страницы так как это видит бот. И получаем доказательство того, что таки да, гриды не понимаются.
3. Открываем любой официальный источник, ну вот хотя бы Deliver search-friendly JavaScript-powered websites на Google I/O 2018 Tom Greenaway и John Mueller
www.youtube.com/watch?v=PFwUbgvpdaQ&feature=youtu.be
где прямым текстом говориться о 41 версии.
2. Открываем серш консоль и просим отобразить нам содержимое страницы так как это видит бот. И получаем доказательство того, что таки да, гриды не понимаются.
3. Открываем любой официальный источник, ну вот хотя бы Deliver search-friendly JavaScript-powered websites на Google I/O 2018 Tom Greenaway и John Mueller
www.youtube.com/watch?v=PFwUbgvpdaQ&feature=youtu.be
где прямым текстом говориться о 41 версии.
Как сделать такой билет: есть туториал? Я так понимаю надо переконфигурировать сетку по media query?
А если этот компонент сам может быть встроен в сетку, а может быть и не встроен?
Возможно глупый вопрос: А почему нельзя грид заменить набором вложенных flexbox-ов? flexbox-ы могут быть как вертикальные так и горизонтальные и комбинируя два этих layout'а можно получить произвольную 2D сетку. В чем преимущество grid, что он может такое сделать, чего не может flexbox?
Наверное в том, что он может сделать тоже самое, но без вложенных элементов.
UFO just landed and posted this here
Понятно, спасибо!
Еще субьективное мнение, что flexbox'ами проще пользоваться чем grid'ом, по крайней мере когда мне недавно понадобилось сделать 2D layout я быстро разобрался как заюзать flexbox, а вот grid так и не осилил. Плюс КМК для многих практических задач достаточно возможностей flexbox.
Еще субьективное мнение, что flexbox'ами проще пользоваться чем grid'ом, по крайней мере когда мне недавно понадобилось сделать 2D layout я быстро разобрался как заюзать flexbox, а вот grid так и не осилил. Плюс КМК для многих практических задач достаточно возможностей flexbox.
несомненно проще, а если бы display: contents; работал бы везде, то это бы было просто офигенно, поскольку им выключается/включается любой вынужденный враппер flex элементов компенсируя разбиение по блокам в одной оси, о которой писали выше.
То есть у вас есть 3 flex-ячейки, две последние оборачиваете дивом, и когда надо, вы включаете враперу flex-direction: column; и две последние ячейки оставаясь на одной оси с первой становятся друг под другом.
То есть у вас есть 3 flex-ячейки, две последние оборачиваете дивом, и когда надо, вы включаете враперу flex-direction: column; и две последние ячейки оставаясь на одной оси с первой становятся друг под другом.
UFO just landed and posted this here
Концепция со слоями и z-order была очень неплоха, жалко, что её не довели до ума.
Просто делалась она тогда, когда сделать лишний png с прозрачностью было жутким расточительством, даже 8-битный, не говоря уж о 24-битном.
А так дизайнерам, конечно, было бы логичнее работать со слоями, как в Фотошопе. Проставить для углов картинок якоря — какие фиксировать, какие можно тянуть. И ещё бы blending modes сделали — и было бы нам счастье!
А так 2,5D модель слоёв все равно надо делать плоской и хитро верстать.
Просто делалась она тогда, когда сделать лишний png с прозрачностью было жутким расточительством, даже 8-битный, не говоря уж о 24-битном.
А так дизайнерам, конечно, было бы логичнее работать со слоями, как в Фотошопе. Проставить для углов картинок якоря — какие фиксировать, какие можно тянуть. И ещё бы blending modes сделали — и было бы нам счастье!
А так 2,5D модель слоёв все равно надо делать плоской и хитро верстать.
В статье мелькает страничка из комиксов с негоризонтальной границей блоков. Мне кажется, что это намекает на то, что так можно сделать с помощью CSS Grid, мне кажется, что это не так.
Теоретически можно было бы заморочиться с CSS Shapes, но с поддержкой у этого стандарта не очень.
Поддержка есть, но как по мне всё ещё недостаточная. От пяти процентов пользователей ещё можно отказаться и подсунуть им какую-то простую версию, а вот о 15% придётся думать и тратить больше времени.
И одновременно с этим гриды уже опоздали.
Сайты делаются для мобильных устройств, где никакие гриды не нужны, а при увеличении экрана в лучшем случае просто делаются пара колонок. И это почти всех устраивает.
И одновременно с этим гриды уже опоздали.
Сайты делаются для мобильных устройств, где никакие гриды не нужны, а при увеличении экрана в лучшем случае просто делаются пара колонок. И это почти всех устраивает.
Sign up to leave a comment.
Grid Layout как основа современной раскладки