не работает разметка GRID

150

21 сентября 2019, 08:30

Не понимаю почему не работает grid-template-areas

.wrapper{ 
display: grid; 
height: 100vh; 
grid-template-columns: 1fr 1fr 1fr; 
grid-template-rows: 1fr 1fr 1fr; 
grid-template-areas: 
"header header header" 
"menu content content" 
"footer footer footer"; 
grid-gap: 10px; 
margin: 0; 
} 
 
.wrapper div{ 
   background: gold; 
} 
 
#PageHead{ 
   grid-area: header; 
 } 
#PageMenu{ 
    grid-area: menu; 
 } 
#PageContent{ 
     grid-area: content; 
 } 
#PageFooter{ 
     grid-area: footer; 
}

<div class="wrapper"> 
    <div id=”PageHead”>Head</div> 
    <div id=”PageMenu”>Menu</div> 
    <div id=”PageContent”>Content</div> 
    <div id=”PageFooter”>Footer</div> 
</div>

Answer 1

<div id=”PageHead”>Head</div>

Когда копипастишь код, кавычки выпрямлять надо:

<div id="PageHead">Head</div>

Всё работает:

.wrapper{ 
display: grid; 
height: 100vh; 
grid-template-columns: 1fr 1fr 1fr; 
grid-template-rows: 1fr 1fr 1fr; 
grid-template-areas: 
"header header header" 
"menu content content" 
"footer footer footer"; 
grid-gap: 10px; 
margin: 0; 
} 
 
.wrapper div{ 
   background: gold; 
} 
 
#PageHead{ 
   grid-area: header; 
 } 
#PageMenu{ 
    grid-area: menu; 
 } 
#PageContent{ 
     grid-area: content; 
 } 
#PageFooter{ 
     grid-area: footer; 
}

<div class="wrapper"> 
    <div id="PageHead">Head</div> 
    <div id="PageMenu">Menu</div> 
    <div id="PageContent">Content</div> 
    <div id="PageFooter">Footer</div> 
</div>

В принципе, вот так оно бы тоже работало, но это жесть:

.wrapper{ 
display: grid; 
height: 100vh; 
grid-template-columns: 1fr 1fr 1fr; 
grid-template-rows: 1fr 1fr 1fr; 
grid-template-areas: 
"header header header" 
"menu content content" 
"footer footer footer"; 
grid-gap: 10px; 
margin: 0; 
} 
 
.wrapper div{ 
   background: gold; 
} 
 
#”PageHead”{ 
   grid-area: header; 
 } 
#”PageMenu”{ 
    grid-area: menu; 
 } 
#”PageContent”{ 
     grid-area: content; 
 } 
#”PageFooter”{ 
     grid-area: footer; 
}

<div class="wrapper"> 
    <div id=”PageHead”>Head</div> 
    <div id=”PageMenu”>Menu</div> 
    <div id=”PageContent”>Content</div> 
    <div id=”PageFooter”>Footer</div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Меню сайта на Bootstrap 4

Подскажите, пожалуйста, как написать меню в col-7 offset-3 из 7 блоков на bootstrap, чтобы ему потом можно было прописать :hoverСвою попытку прикрепил ниже,...

166

C# не понимает GetCurrentDomain ()

Делаю программу которая для начала будет выводить имя домена в котором находится комп, как я понял нужно через

157

C# WPF Отменить клик при смене View

Есть кнопка которая изменяет view, но второй view тоже имеет кнопку которая изменяет view и получается клик на первую кнопку автоматически работает...

160

Photon Unity Networking: Не получается вывести ник игрока

Я хочу установить ник для игрока и в последующем его отобразитьЕще до подключения к комнате я устанавливаю ник таким образом:

163