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

104

29 июля 2019, 08:30

Делаю грид на 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; }

<div class="headerBg 1">Left header</div> 
<div class="headerBg 2">Right header</div> 
<div class="header"> 
  Header 
</div> 
<div class="mainContent"> 
 
  Main content<br/> Main content<br/> Main content 
</div> 
<div class="footerBg 1">Left footer</div> 
<div class="footerBg 2">Right footer</div> 
<div class="footer"> 
  Footer 
</div>

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

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

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

Answer 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; 
}

<div class="headerBg1">Left header</div> 
<div class="headerBg2">Right header</div> 
<div class="header">Header</div> 
<div class="mainContent"> 
  Main content<br> Main content<br> Main content 
</div> 
<div class="footerBg1">Left footer</div> 
<div class="footerBg2">Right footer</div> 
<div class="footer">Footer</div>

Answer 2

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

<div class="footerBg 1">Left footer</div>

.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; }

<div class="headerBg h1">Left header</div> 
<div class="headerBg h2">Right header</div> 
<div class="header"> 
  Header 
</div> 
<div class="mainContent"> 
 
  Main content<br/> Main content<br/> Main content 
</div> 
<div class="footerBg 1">Left footer</div> 
<div class="footerBg 2">Right footer</div> 
<div class="footer"> 
  Footer 
</div>