Как правильно готовить CSS GRID'ы?

Question

[Евгений Вольф]

Доброго времени суток коллеги!

Подскажите пожалуйста, правильно ли я понимаю следующие особенности CSS Grid:
1. Задать фон (background) grid-ячейке (или набору ячеек - нельзя)

2. Предположим у нас есть grid-сетка на 12 колонок, и 20 строк. Я хочу задать некоему набору строк/колонок имена, предположим, я хочу, задать имена ячейкам первой строки: 1-я колонка - "left", 12-я (последняя) колонка - "right", промежуточные 10 колонок - "header". Соответственно, мне придётся написать 12 слов (имён ячеек, для одной строки), так как конструкции которая бы делала, что-то вроде:
grid-template-areas: "left header[10] right"; или grid-template-areas: "left header(10) right";, где в скобках указано кол-во ячеек с одинаковым именем - на данный момент не существует.

3. "Накладывать" на ячейку таблицы (grid-сетки) мы можем только непосредственно дочерний элемент, по отношению к элементу у которого указан display: grid; Иначе говоря, например:

<ul>
  <li>
    <a href="#">Ссылка</a>
  </li>
  <li>
    <a href="#">Ссылка</a>
  </li>
  <li>
    <a href="#">Ссылка</a>
  </li>
</ul>

Если указать у UL'ки display: grid;, то распределять по сетке мы сможем только LI'шки, но не вложенные в них A'шки, не зависимо от их позиционирования и прочих параметров.

Comments

[alvvi]

3. Для этого в CSS-спецификации есть display: subgrid, но на данный момент он не реализован ни в одном браузере, еще есть display: contents, который действут слегка по-другому, но позволяет добится схожего поведения, правда работает он исключительно в последних версиях firefox'a.
Ну, естественно, никто не мешает дать LI display:grid и сделать внутри отдельную раскладку, но это не так интересно, как наследовать раскладку прародителя.

[Евгений Вольф]

Илья Ростопка: примного благодарен за пояснения!

Answer 1

[Бобёр Нубяра]

1. Да, нельзя.
2. Тоже верно. Придётся писать grid-template-areas: "left header ... header right";
3. Субгриды или display: contents; В комментарии уже объяснили.