Получил письмо от Гугла:

Пришлось немного переделать шаблон design\themes\responsive\templates\common\breadcrumbs.tpl

Было:

<div itemscope="" itemtype="http://schema.org/BreadcrumbList" id="breadcrumbs" id="breadcrumbs_{$block.block_id}">

{if $breadcrumbs && $breadcrumbs|@sizeof > 1}
    <div class="ty-breadcrumbs clearfix">
        {strip}
        $level = 1
            {foreach from=$breadcrumbs item="bc" name="bcn" key="key"}
                {if $key != "0"}
                    <span class="ty-breadcrumbs__slash">/{$key}•{$level}/</span>
                {/if}
                {if $bc.link}
                    <span itemscope="" itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a rel="nofollow" itemprop="item" href="{$bc.link|fn_url}" class="ty-breadcrumbs__a{if $additional_class} {$additional_class}{/if}"{if $bc.nofollow} rel="nofollow"{/if}><span itemprop="name">{$bc.title|strip_tags|escape:"html" nofilter}</span></a></span>
                {else}
                    <span class="ty-breadcrumbs__current"><bdi>{$bc.title|strip_tags|escape:"html" nofilter}</bdi></span>
                {/if}
                $level++
            {/foreach}
            {include file="common/view_tools.tpl"}
        {/strip}
    </div>
{/if}
<!--breadcrumbs_{$block.block_id}--></div>

стало:

<div id="breadcrumbs">

{if $breadcrumbs && $breadcrumbs|@sizeof > 1}
    <div class="ty-breadcrumbs clearfix">
        {strip}
        <ol itemscope="" itemtype="http://schema.org/BreadcrumbList">
            {foreach from=$breadcrumbs item="bc" name="bcn" key="key"}
                {if $key != "0"}
                    <span class="ty-breadcrumbs__slash">></span>
                {/if}
                {if $bc.link}
                    <li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a rel="nofollow" itemscope itemtype="https://schema.org/WebPage" itemprop="item" itemid="{$bc.link|fn_url}" href="{$bc.link|fn_url}" class="ty-breadcrumbs__a{if $additional_class} {$additional_class}{/if}"{if $bc.nofollow} rel="nofollow"{/if}><span itemprop="name">{$bc.title|strip_tags|escape:"html" nofilter}</span></a>
                        <meta itemprop="position" content="{$key}" />
                    </li>
                {else}
                    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <span itemprop="name" class="ty-breadcrumbs__current"><bdi>{$bc.title|strip_tags|escape:"html" nofilter}</bdi></span><meta itemprop="position" content="{$key}" /></li>
                {/if}
            {/foreach}
        </ol>
            {include file="common/view_tools.tpl"}
        {/strip}
    </div>
{/if}
<!--breadcrumbs_{$block.block_id}-->
</div>

Пришлось добавить и стили (тут для витрины sww.com.ru):

/* новый стиль для новых breadcrumbs 20/05/2020 */
.ty-breadcrumbs li {
    display: inline;
}
.ty-breadcrumbs ol {
    padding: 0;
    margin-top: 24px;
}
.ty-breadcrumbs {
    padding: 0;
    margin-top: -20px;
}

Примерный перевод статьи “Things I’ve learned about CSS grid layout” by Jennifer Wjertzoch

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

Вывод простейшей сетки

Здесь вы видите контейнер (родителя) с шестью блоками (детьми) внутри:

Пример 1

See the Pen grid-1 by Aleksei Litvinov (@lexizli) on CodePen.

Пока ничего интересного, просто шесть div-ов, размещенных один над другим.

Определение строк и столбцов

Чтобы сделать дизайн двухмерным, нам нужно определить строки и столбцы. Давайте создадим две строки и три столбца. Для этого мы используем свойства grid-template-row и grid-template-column:

Пример 2

See the Pen grid-2 by Aleksei Litvinov (@lexizli) on CodePen.

Добавление интервалов между строками и столбцами

Для добавления интервалов между колонками можно использовать grid-column-gap, между строками grid-row-gap и вы можете использовать свойство grid-gap, чтоб добавить интервалы везде. Хорошо, что добавление интервалов происходит только между блоками, а за пределами контейнера их нет:

Пример 3

See the Pen grid-3 by Aleksei Litvinov (@lexizli) on CodePen.

Если вы откроете вашу страницу в Firefox Developer Edition и в инструментах разработчика включите подсветку сетки, то увидите примерно такую картину:

Размеры блоков и заполнение сетки

Для явного указания количества и размеров столбцов и строк можно использовать свойства:

grid-template-columns
grid-template-rows

существует и более компактный способ:

grid-template: 100px 100px / 150px 150px 150px;

или можно указать одинаковую высоту всех блоков:

grid-auto-rows: 50px;

Вот что из этого получится:

Пример 4

See the Pen grid-4 by Aleksei Litvinov (@lexizli) on CodePen.

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

grid-auto-flow: row; /* так будут добавляться новые строки */
grid-auto-flow: column; /* так — новые столбцы */
grid-auto-flow: dense; /* а это свойство для плотной упаковки */

Свойство dense укладывает блоки в сетке так, чтоб не оставалось пустых дырок, посмотрите, как расположены пронумерованные блоки:

Пример 5

See the Pen grid-5 by Aleksei Litvinov (@lexizli) on CodePen.

Функция Repeat()

Чтоб избежать многократного описания одинаковых по ширине или высоте блоков, заполняющих сетку, можно использовать функцию repeat(), первый аргумент которой определяет количество повторений, второй — размер блока (смотрите предыдущий пример):

grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(2, 100px);

Дробная единица fr

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

grid-template-columns: repeat(10, 1fr);

Можно использовать fr с любыми другими единицами:

grid-template-columns: 60% 1fr 2fr;

Определение индивидуальных размеров блока

Можно определять размеры столбцов и строк внутри контейнера, но можно установить и отдельные размеры для конкретного блока (или для конкретных повторяющихся блоков). Например, каждый шестой блок будет включать в себя шесть столбцов, а каждый девятый — две строки (см. пример 5):

.item:nth-child(6n) {
      grid-column: span 6;
    }
.item:nth-child(9n) {
      grid-row: span 2;
    }

Есть альтернативный способ размещения блока в сетке через свойства grid-row-start, grid-row-end, grid-column-start и grid-column-end, например, так:

.item3 {
  background:#98386d;
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 7;
}
.item4 {
  background:#f8386d;
  grid-column-start: 6;
  grid-column-end: 10;
  grid-row-start: 2;
  grid-row-end: 3;
}
.item5 {
  background:#383849;
  grid-column-start: 6;
  grid-column-end: 10;
  grid-row-start: 4;
  grid-row-end: 7;
}

Пример 6

See the Pen grid-6 by Aleksei Litvinov (@lexizli) on CodePen.

Функция minmax

Позволяет установить минимальный и максимальный размер блока, превращая дизайн в адаптивный без медиазапросов (попробуйте изменить ширину окна браузера):

Пример 7

See the Pen grid-7 by Aleksei Litvinov (@lexizli) on CodePen.

auto-fill vs. auto-fit

Разницу этих свойств лучше всего проиллюстрирует сравнение:

Пример 8

See the Pen grid-8 by Aleksei Litvinov (@lexizli) on CodePen.

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

Выравнивание блоков по ширине контейнера

Для этого используйте свойство justify-content со значениями:

start — выравнивает сетку по левой стороне контейнера (по верху для align-content);
end — выравнивает сетку по правой стороне контейнера  (по низу для align-content);
center — выравнивает сетку по центру контейнера;
stretch — масштабирует элементы чтобы сетка могла заполнить всю ширину (высоту  для align-content) контейнера;
space-around — одинаковое пространство между элементами, и полуразмерные отступы по краям;
space-between — одинаковое пространство между элементами, без отступов по краям;
space-evenly — одинаковое пространство между элементами, и полноразмерные отступы по краям;

Пример 9

See the Pen grid-9 by Aleksei Litvinov (@lexizli) on CodePen.

Выравнивание блоков по высоте контейнера

Для этого подходит свойство align-content, значения аналогичны предыдущему свойству:

Пример 10

See the Pen grid-10 by Aleksei Litvinov (@lexizli) on CodePen.

Небольшой бонус: бесплатный видеокурс по CSS GRID от Wes Bos