CSS Grid изменяемого размера ячейки

Question

В следующем макете я хочу, чтобы сечение зеленого цвета было изменяемого размера. При изменении размера ячейка 8 должна занимать оставшееся пространство, не затрагивая другие ячейки в других строках.

.App {
  display: grid;
  
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 50px 1fr 200px 30px;

  width: 100%;
  height: 100%;
}

.App > div {
  border: 2px solid black;
}

.nav {
  background: green;
}

<div class="App">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div class="nav">7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

Изменение размера будет сделано пользователем. Но чтобы продемонстрировать, рассмотрите возможность изменения width элемента .nav на 100px. После изменения размера .nav ячейка 8 должна занять оставшееся пространство и расти.

.nav {
    background: green;
    width: 100px;
}

Возможно ли такое поведение при использовании CSS Grid?

Answer 1

Вы не можете изменить nav ширину и ожидать, что это повлияет только на элемент рядом с ним - это повлияет на весь первый столбец.Вы можете попробовать изменить размер nav в демоверсии ниже (используя grid-template-columns: auto 1fr 200px) вместе с достаточным количеством min-width и max-width:

.App {
  display: grid;
  grid-template-columns: auto 1fr 200px; /* changed */
  grid-template-rows: 50px 1fr 200px 30px;
}

.App > div {
  border: 2px solid black;
}

.nav {
  background: green;
  width: 100px; /* default width */
  max-width: calc(100vw - 260px); /* do go beyond the third column */
  min-width: 25px; /* min width of nav */
  resize: horizontal; /* resize the div */
  overflow: hidden; /* resize works if overflow not visible */
}

<div class="App"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div class="nav">7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div>

---

Это все, что вы можете иметь с текущей разметкой.Если вы можете изменить свой HTML-код, обернув 8 и 7 в элемент с сеткой из 2 столбцов и сделав из него flexbox, вы можете получить желаемый эффект - см. Демонстрационную версию ниже:

* {
box-sizing: border-box;
}

.App {
  display: grid;
  grid-template-columns: 1fr 1fr 200px;
  grid-template-rows: 50px 1fr 200px 30px;
}

.App > div {
  border: 2px solid black;
}

.nav {
  grid-column: span 2;
  display: flex;
}
.nav > div:first-child {
  background: green;
  resize: horizontal;
  overflow: hidden;
  width: 50%;
}
.nav > div:last-child {
  flex: 1;
  width: 50%;
}

<div class="App">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div class="nav">
    <div>7</div>
    <div>8</div>
  </div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

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

• Изменение пропорций шириныиз двух блоков с ползунком

• Как разрешить пользователю вручную изменять размер элемента

  по вертикали?