Сетка CSS и указание нескольких областей

Мне нужно, чтобы некоторые из моих элементов перекрывались, я также хочу указывать вещи по имени области, а не по строке/столбцу, потому что это делает чтение более приятным.

Я не могу понять, как работает указание нескольких областей сетки в соответствии с примерами MDN. Или, если это вообще возможно, статья предполагает, что это возможно в соответствии с примерами синтаксиса, но как это на самом деле работает ?? Понятия не имею.

Пример проблемы:

document.querySelector("input").focus();
#my_grid {
  display:grid;
  grid-gap:5px;
  grid-template-rows: 50px 50px 50px;
  grid-template-columns: 50px 50px 50px;
  grid-template-areas:  "a b c"
                        "d e f"
                        "g h i";

}

#my_grid > div {
  text-align:center;
  line-height:50px;
  border:1px solid rgba(0,0,0,0.3);
  background-color:rgba(0,0,0,0.1);
}
<div id = "my_grid">
  <div style = "grid-area:a">a</div>
  <div style = "grid-area:b">b</div>
  <div style = "grid-area:c">c</div>
  <div style = "grid-area:d">d</div>
  <div style = "grid-area:e">e</div>
  <div style = "grid-area:f">f</div>
  <div style = "grid-area:g">g</div>
  <div style = "grid-area:h">h</div>
  <div style = "grid-area:i">i</div>
  <input type = "text" onKeyUp = "this.style.gridArea = this.value" style = "grid-area:d / e" value = "d / e">
</div>

Type your own area

Я хочу, чтобы мой ввод охватывал обе области d и e, указание d / e просто помещает его в e.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
6
0
4 502
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно указать 4 значения, например grid-area: d / d / d / e, что означает:

grid-row-start: d;
grid-column-start: d; /* Start at d */
grid-row-end: d;
grid-column-end: e; /* End at e */

document.querySelector("input").focus();
#my_grid {
  display:grid;
  grid-gap:5px;
  grid-template-rows: 50px 50px 50px;
  grid-template-columns: 50px 50px 50px;
  grid-template-areas:  "a b c"
                        "d e f"
                        "g h i";

}

#my_grid > div {
  text-align:center;
  line-height:50px;
  border:1px solid rgba(0,0,0,0.3);
  background-color:rgba(0,0,0,0.1);
}
<div id = "my_grid">
  <div style = "grid-area:a">a</div>
  <div style = "grid-area:b">b</div>
  <div style = "grid-area:c">c</div>
  <div style = "grid-area:d">d</div>
  <div style = "grid-area:e">e</div>
  <div style = "grid-area:f">f</div>
  <div style = "grid-area:g">g</div>
  <div style = "grid-area:h">h</div>
  <div style = "grid-area:i">i</div>
  <input type = "text" onKeyUp = "this.style.gridArea = this.value" style = "grid-area: d / d / d / e" value = "d / d / d / e">
</div>

Type your own area

Только с двумя значениями grid-area: d / e у вас есть:

grid-row-start: d;
grid-column-start: e;
grid-row-end: d;
grid-column-end: e; 

Таким образом, это в основном поместит элемент на пересечение строки, где есть d, и столбца, где есть e (только одна ячейка, которая является e).

grid-area: a / i поставит вас на площадь c например.

Multiple grid-area

Из tспецификация:

The grid-template-areas property generates implicitly-assigned line names from the named grid areas in the template. For each named grid area foo, four implicitly-assigned line names are created: two named foo-start, naming the row-start and column-start lines of the named grid area, and two named foo-end, naming the row-end and column-end lines of the named grid area.

потом

<custom-ident>

First attempt to match the grid area’s edge to a named grid area: if there is a named line with the name <custom-ident>-start (for grid-*-start) / <custom-ident>-end (for grid-*-end), contributes the first such line to the grid item’s placement.

Другие вопросы по теме