Могу ли я обратиться к определенной области сетки-шаблона?

Question

Можно ли обратиться к определенным областям шаблонов сетки или мне нужно создать либо вспомогательную сетку, либо вспомогательный флексбокс для достижения дальнейшего позиционирования?

Например, я бы хотел разместить элементы впоследний из трех разделов заголовка в следующем примере кода. Какой самый эффективный способ сделать это?

 .grid-main {
  display: grid;
  height: 98vh;
  width: 98vw;
  overflow: hidden;
  overflow: -moz-hidden-unscrollable;
  grid-template-columns: 175px 1fr 1fr;
  grid-template-rows: 0.1fr 1fr 0.075fr;
  grid-template-areas:
  "header header header"
  "nav main main"
  "footer footer footer";
  animation: fadeIn 2s;
  transition: 1s all ease-in-out;
}

Answer 1

да, вы можете, вы можете определить grid-area, но также grid-column или строку.

пример

body {
  display: grid;
  height: 98vh;
  width: 98vw;
  overflow: hidden;
  overflow: -moz-hidden-unscrollable;
  grid-template-columns: 175px 1fr 1fr;
  grid-template-rows: 0.1fr 1fr 0.075fr;
  grid-template-areas: "header header header" "nav main main" "footer footer footer";
  animation: fadeIn 2s;
  transition: 1s all ease-in-out;
}

header {
  grid-area: header;
  grid-column: span 2;
  background: cyan
}

p {
  grid-area: header;
  background: tomato;
  grid-column: span 1;
  margin: 0;
}

nav {
  grid-area: nav;
  background: lightgreen
}

footer {
  grid-area: footer;
  background: brown
}

main {
  grid-area: main;
  background: gray;
}

<header>header</header>
<p>something else</p>
<nav>nav</nav>
<main>main</main>
<footer>footer</footer>