Сетка CSS и семантический HTML

Я изучаю сетку CSS и, пытаясь создать свой макет и использовать семантический html, в то же время сталкиваюсь с некоторыми проблемами

https://codepen.io/oscarryz/pen/oNNBKyd

Итак, в основном я делаю сетку 3x3 с пустым пространством слева и справа и содержимым посередине.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 40em 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    " . header . "
    " . content . "
    " . footer . ";
}

.header {
  grid-area: header;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

.header, .content, .footer {
  border: 1px solid red;
}
<div class="grid-container">
  <header>
    <div class="header">header</div>
  </header>
  <main>
    <div class="content">content</div>
  </main>
  <footer>
    <div class="footer">footer</div>
  </footer>
</div>

Как видно из приведенного выше кода, это не работает. Если я удалю семантические теги, которые он работает, очевидно, должен быть правильный способ сделать это


html css css-grid semantic-markup
person OscarRyz    schedule 22.10.2019    source источник
comment
display: contents - один из способов сделать это   -  person Akxe    schedule 22.10.2019

Ответы (2)


arrow_upward
2
arrow_downward

Шаблоны сетки предназначены для прямых потомков.

На семантические элементы следует ссылаться по тэгу, а не по классу:

/* changed from .header, which is a _child_ of header */
header {
  grid-area: header;
}

/* changed from .content, which is a _child_ of main */
main {
  grid-area: content;
}

/* changed from .footer, which is a _child_ of footer */
footer {
  grid-area: footer;
}

Исправленный код здесь: https://codepen.io/c_bergh/pen/eYYvOmG

person random_user_name    schedule 22.10.2019

arrow_upward
1
arrow_downward

Вы назначили области сетки несемантическим элементам в CSS. Вот почему семантические элементы мешают вашей сетке - потому что в конечном итоге они вообще не участвуют в вашей сетке. Если вы начали с несемантической структуры, а затем перешли на семантические элементы, возможно, вы пропустили этот шаг.

Назначение областей сетки вашим семантическим элементам позволяет вместо этого удалить несемантические элементы, завершив эту миграцию:

html,
body,
.grid-container {
  height: 100%;
  margin: 0;
}

.grid-container * {
  border: 1px solid red;
  position: relative;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 40em 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    " . header . "
    " . content . "
    " . footer . ";
}

header {
  grid-area: header;
}

main {
  grid-area: content;
}

footer {
  grid-area: footer;
}
<div class="grid-container">
  <header>header</header>
  <main>content</main>
  <footer>footer</footer>
</div>

person BoltClock    schedule 22.10.2019