Неправильно ведут себя пустые ячейки в CSS grid, заданные свойством grid-template-areas

#html #css #css3 #вёрстка #css_grid

Делаю грид на CSS, ориентируясь на шпаргалку: https://tuhub.ru/posts/css-grid-complete-guide#prop-grid-template-areas

Там написано:


  grid-template-areas
  
  ...
  
  Точка означает пустую ячейку. 


и приведен пример:

grid-template-areas: 
"header header header header"
"main main . sidebar"
"footer footer footer footer";


который выдает нормальный результат (пустая ячейка находится где-то посередине).

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

https://codepen.io/anon/pen/zyLOqz



div {
  border: 1px solid gray;
  padding: 5px;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "headerBg1 header headerBg2"
                       ". mainContent ."
                       "footerBg1 footer footerBg2";
  grid-gap: 2px;
}

.header { grid-area: header; }
.headerBg.1 { grid-area: headerBg1; }
.headerBg.2 { grid-area: headerBg2; }
.mainContent { grid-area: mainContent; }
.footer { grid-area: footer; }
.footerBg.1 { grid-area: footerBg1; }
.footerBg.2 { grid-area: footerBg2; }
Left header
Right header

  Header



  Main content
 Main content
 Main content

Left footer
Right footer

  Footer





ключевое тут это:

grid-template-areas: 
    "headerBg1 header headerBg2"
    ". mainContent ."
    "footerBg1 footer footerBg2";


ВОПРОС: почему блоки Left footer (footerBg1) и Right footer (footerBg2) находятся
там, где должны быть пустые ячейки? Ожидается, что они будут в одной строке с блоком
footer.
    

Ответы

Ответ 1

Так должно работать:  



div {
  border: 1px solid gray;
  padding: 5px;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1024px auto;
  grid-template-areas:
    "headerBg1 header headerBg2"
    ". mainContent ."
    "footerBg1 footer footerBg2";
  grid-gap: 2px;
}

.header {
  grid-area: header;
}

.headerBg1 {
  grid-area: headerBg1;
}

.headerBg2 {
  grid-area: headerBg2;
}

.mainContent {
  grid-area: mainContent;
}

.footer {
  grid-area: footer;
}

.footerBg1 {
  grid-area: footerBg1;
}

.footerBg2 {
  grid-area: footerBg2;
}
Left header
Right header
Header

  Main content
 Main content
 Main content

Left footer
Right footer
Footer


Ответ 2

Нет, проблема в совершенно другом:


Left footer

  
  

.footerBg.1 {grid-area: footerBg1;}



Css не позволяет называть классы начиная с цифры.

Рекомендую просто взять и переименовать.



В принципе это можно обойти через селектор атрибута:

.footerBg[class~="1"] {grid-area: footerBg1;}


или при помощи хака с экранированием (у меня в хроме работает):

.footerBg.\31 {grid-area: footerBg1;}




Кстати, с частями хэдера тот же косяк, но они чисто случайно встали на свои места.



div {
  border: 1px solid gray;
  padding: 5px;
}

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "headerBg1 header headerBg2"
                       ". mainContent ."
                       "footerBg1 footer footerBg2";
  grid-gap: 2px;
}

.header { grid-area: header; }
.headerBg.h1 { grid-area: headerBg1; }
.headerBg.h2 { grid-area: headerBg2; }
.mainContent { grid-area: mainContent; }
.footer { grid-area: footer; }
.footerBg.\31 { grid-area: footerBg1; }
.footerBg[class~="2"] { grid-area: footerBg2; }
Left header
Right header

  Header



  Main content
 Main content
 Main content

Left footer
Right footer

  Footer