Wolfnsex
@Wolfnsex
Если не хочешь быть первым - не вставай в очередь!

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

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

Подскажите пожалуйста, правильно ли я понимаю следующие особенности 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'шки, не зависимо от их позиционирования и прочих параметров.
  • Вопрос задан
  • 845 просмотров
Пригласить эксперта
Ответы на вопрос 1
1. Да, нельзя.
2. Тоже верно. Придётся писать grid-template-areas: "left header ... header right";
3. Субгриды или display: contents; В комментарии уже объяснили.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы