Расширение для заполнения оставшегося пространства в макете CSS Grid - PullRequest
Новая
       25

Расширение для заполнения оставшегося пространства в макете CSS Grid

0 голосов
/ 21 февраля 2019

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

Вот макет цели: enter image description here

Я строю простой интерфейс CMS, который должен расширяться вправо, чтобы заполнитьэкран браузера;Мой текущий код приводит к тому, что столбец 2 внешней сетки будет таким же широким, как браузер в дополнение к столбцу 1;или, возможно, один из его детей вызывает это, и он просто расширяется, чтобы приспособиться.В любом случае, он перелистывает страницу горизонтально

Итак, код: 

#main {
  width: 100%;
  display: grid;
  grid-template-columns: 250px 100%;
  grid-template-rows: 100px 100%;
}

#col-2-outer {
  display: grid;
  grid-template-columns: 250px auto;
  grid-template-rows: 100%;
}

#row-1-inner {
  grid-column: span 2;
}

#col-2-inner table {
  width: 100%;
}
<div id="main">
  <div id="col-1-outer"></div>
  <div id="col-2-outer">
    <div id="row-1-inner"></div>
    <div id="row-2-inner">
      <div id="col-1-inner"></div>
      <div id="col-2-inner">
        <table></table>
      </div>
    </div>
  </div>
</div>

К вашему сведению, на данный момент я отказался от шаблонных областей, пока не получу представление об основах (если это каким-то образом не решит мою проблему, но я понимаю, что этострого особенность организации кода?).

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Я бы предложил изменить разметку с сеткой 3x2, как показано ниже:

  1. Удалите иерархическую структуру , как у вас всвой код и добавьте один элемент для каждого раздела в сетке .

  2. Обратите внимание, что в правиле grid-template-columns: 250px 150px auto 250px - это ширинаваших col-1-outer и 150px - это ширина col-1-inner.

  3. Span первого столбца по двум строкам с помощьюgrid-row: span 2

  4. Span первая строка во втором столбце с использованием grid-column: span 2.

  5. Расширение table над последним элементом сетки с использованием 100% ширины и высоты.

См. Демонстрацию ниже: 

* {
  border: 1px solid; /* For illustration */
}

#main {
  width: 100%;
  display: grid;
  grid-template-columns: 250px 150px auto;
  grid-template-rows: 100px auto;
}

#col-1-outer {
  grid-row: span 2;
}

#row-1-inner {
  grid-column: span 2;
}

#col-2-inner table {
  width: 100%;
  height: 100%;
}
<div id="main">
  <div id="col-1-outer">col-1-outer</div>
  <div id="row-1-inner">col2-row-1-inner</div>
  <div id="col-1-inner">col2-row2-inner</div>
  <div id="col-2-inner">
    <table><tr><td>table</td></tr></table>
  </div>
</div>
0 голосов
/ 21 февраля 2019

100% для 2-го столбца в вашем grid-template-columns основан на ширине контейнера - вместо того, чтобы занимать пространство, оставшееся внутри контейнера, он будет выталкиваться вправо, потому что 2-й столбец пытается соответствоватьширина контейнера.

Попробуйте изменить это значение на auto, и это должно устранить проблему, так как она займет только пространство до конца контейнера, а не дальше.

Источник: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

...