Расширение для заполнения оставшегося места в макете CSS Grid
Я хочу использовать сетку CSS, и вот макет цели: 
Я создаю интерфейс, который должен расширяться вправо, чтобы заполнить экран браузера; мой текущий код заставляет столбец 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
100% для 2-го столбца в вашем grid-template-columns основан на ширине контейнера — вместо того, чтобы занимать свободное пространство внутри контейнера, он будет выталкиваться вправо, потому что 2-й столбец пытается соответствовать ширине контейнера.
Попробуйте изменить это на auto, и это должно решить проблему, так как оно будет занимать место только до конца контейнера и не дальше.
Источник: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
Я бы предложил изменить разметка на сетку 3x2, как показано ниже:
Удалите структуру иерархический, как в вашем коде, и добавьте элемент один для каждого раздела в сетка.
Обратите внимание, что в правиле
grid-template-columns: 250px 150px auto250 пикселей — это ширина вашегоcol-1-outer, а 150 пикселей — ширинаcol-1-inner.Охватывать первый столбец в двух строках с помощью
grid-row: span 2Охватывать первый ряд во втором столбец с помощью
grid-column: span 2.Расширьте
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>
Я дал правильный ответ парню, который решил мою проблему с шириной, но, как бы то ни было, это действительно лучшая сетка, и я принял ее,