具有可变内容长度的网格布局答案

【问题标题】：Grid layout with variable content length具有可变内容长度的网格布局
【发布时间】：2019-06-22 11:14:28
【问题描述】：

我正在尝试使用网格布局重建旧网站。一切都很顺利，直到我开始用内容填充页面。查看代码 sn-p 和图像。如果文章 (3) 的内容很短，则文章文本和 底部 (5) 之间会出现间隙。随着文章内容变长，sidebar(2)和sidebar1(4)之间会出现空隙。只有当侧边栏和文章长度相等时，才没有间隙。我需要将带有 sidebar2 (6) 的 sidebar1 (4) 拉到边栏中的最后一个菜单项，而 bottom (5) 连同 base (7) 将被拉到文章文本独立于其长度。是否可以使用 仅网格方法 并且无需（或稍作）更改 html 来做到这一点。

我尝试了编号、命名和重新排列网格项目，添加了一些间隔块，但到目前为止得到了相同的结果。有人能指出我正确的方向吗？

#page-wrapper {
	display: grid;
	max-width: 1280px;
	margin: 0 auto;
	justify-items: stretch;
	align-items: start;
	grid-gap: 5px;
	background: #ccc;
	grid-template-areas: 
	"header header"
	"sidebar article"
	"sidebar1 bottom"
	"sidebar2 base"
	"footer footer";
	grid-template-columns: 320px 1fr; 
	grid-template-rows: auto;
}				         
#page-wrapper > div, header, article, footer  {
	border: 1px solid #888;
	font-size: 1.2em;
	min-height: 50px;
	padding: 15px;
	color: #fff;
}
li {
	list-style: none;
}  
header {
	background: #557;
	grid-area: header;
}
.sidebar {
	background: #55a;
	grid-area: sidebar;
	/* align-self: stretch; */
}
article {
	grid-area: article;
	background: #755;
	/* align-self: stretch; */
}
.sidebar1 {
	grid-area: sidebar1;
	background: #351;
}
.bottom {
	grid-area: bottom;
	background: #632;
}
.sidebar2 {
	grid-area: sidebar2;
	background: #125;
}
.base{
	grid-area: base;
	background: #33b;
}
footer{
	grid-area: footer;
	background: #376;
}

<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" href="style.css" />
</head>
<body>
	<div id="page-wrapper">
		<header>
			<h3>1 Header</h3>
		</header>
		<div class="sidebar">
			2 <ul>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			</ul>
		</div>
		<article>
			3 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</article>
		<div class="sidebar1">4</div>
		<div class="bottom">5</div>
		<div class="sidebar2">6</div>
		<div class="base">7</div>
		<footer><h3>8 Footer</h3></footer>
	</div>
	</body>
</html>

【问题讨论】：

嗯，如果我明白你在问什么，这意味着根据内容的长度，你会有7或6以下的差距，对吧？
Arkellys，没有。我的意思是带有红色箭头的间隙，即高于 4 和 5。
是的，但是通过您要求的修复，差距将低于sidebar2 或低于base？
我认为仅靠网格布局是不可能的。这是一个解释：stackoverflow.com/q/44377343/3597276
Michael_B，感谢您的链接。学习。

标签： html css variables layout grid

【解决方案1】：

我对@987654321@ 不是很熟悉，所以也许有更好的方法，但是，这里有一种方法可以解决您的问题：

.grid {
  display: grid;
  justify-items: stretch;
  align-items: start;
  grid-gap: 5px;
}

#page-wrapper {
  max-width: 1280px;
  margin: 0 auto;
  background: #ccc;
  grid-template-areas:
   "header header"
   "side content"
   "footer footer";
  grid-template-columns: 320px 1fr;
  grid-template-rows: auto;
}

.side > div, .content > div, header, article, footer {
  border: 1px solid #888;
  font-size: 1.2em;
  min-height: 50px;
  padding: 15px;
  color: #fff;
}

li {
  list-style: none;
}

header {
  grid-area: header;
  background: #557;
}

.side {
  grid-area: side;
  background: yellow;
  grid-template-areas:
   "sidebar"
   "sidebar1"
   "sidebar2";
}

.sidebar {
  grid-area: sidebar;
  background: #55a;
}

.sidebar1 {
  grid-area: sidebar1;
  background: #351;
}

.sidebar2 {
  grid-area: sidebar2;
  background: #125;
}

.content {
  grid-area: content;
  background: red;
  grid-template-areas:
   "article"
   "bottom"
   "base";
}

article {
  grid-area: article;
  background: #755;
}

.bottom {
  grid-area: bottom;
  background: #632;
}

.base {
  grid-area: base;
  background: #33b;
}

footer {
  grid-area: footer;
  background: #376;
}

<body>
  <div id="page-wrapper" class="grid">
    <header>
      <h3>1 Header</h3>
    </header>
    
    <div class="side grid">
      <div class="sidebar">
        2 <ul>
          <li>Menu item </li>
          <li>Menu item </li>
          <li>Menu item </li>
          <li>Menu item </li>
          <li>Menu item </li>
          <li>Menu item </li>
          <li>Menu item </li>
          <li>Menu item </li>
          <li>Menu item </li>
          <li>Menu item </li>
        </ul>
      </div>
      <div class="sidebar1">4</div>
      <div class="sidebar2">6</div>
    </div>
    
    <div class="content grid">
      <article>
        3 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>

      <div class="bottom">5</div>
      <div class="base">7</div>
    </div>
		
    <footer><h3>8 Footer</h3></footer>
  </div>
</body>

这需要稍微更改 HTML。使用这种方法，您需要将所有侧面元素（.sidebar、.sidebar1 和 .sidebar2）包装在 div 中，并对内容元素（article、.bottom 和 .base）执行相同操作)。

grid-template-areas 然后变成：

"header header"
"side content"
"footer footer"

这样，由于不同内容的长度导致的间隙将在包装divs下方，而不是元素之间。

两个包裹div可以有自己的网格环境，如上例，但如果你不需要以复杂的方式定位元素，你可以简化代码：

#page-wrapper {
  display: grid;
  justify-items: stretch;
  align-items: start;
  grid-gap: 5px;
  max-width: 1280px;
  margin: 0 auto;
  background: #ccc;
  grid-template-areas:
   "header header"
   "side content"
   "footer footer";
  grid-template-columns: 320px 1fr;
  grid-template-rows: auto;
}

.side > div, .content > div, header, article, footer {
  border: 1px solid #888;
  font-size: 1.2em;
  min-height: 50px;
  padding: 15px;
  color: #fff;
}

li {
  list-style: none;
}

header {
  grid-area: header;
  background: #557;
}

.side > div:not(:last-child), article, .content > div:not(:last-child) {
  margin-bottom: 5px;
}

.side {
  grid-area: side;
  background: yellow;
}

.sidebar { background: #55a; }
.sidebar1 { background: #351; }
.sidebar2 { background: #125; }

.content {
  grid-area: content;
  background: red;
}

article { background: #755; }
.bottom { background: #632; }
.base { background: #33b; }

footer {
  grid-area: footer;
  background: #376;
}

<body>
  <div id="page-wrapper">
    <header>
      <h3>1 Header</h3>
    </header>
    
    <div class="side">
      <div class="sidebar">
        2 <ul>
          <li>Menu item </li>
          <li>Menu item </li>
          <li>Menu item </li>
          <li>Menu item </li>
          <li>Menu item </li>
          <li>Menu item </li>
          <li>Menu item </li>
          <li>Menu item </li>
          <li>Menu item </li>
          <li>Menu item </li>
        </ul>
      </div>
      <div class="sidebar1">4</div>
      <div class="sidebar2">6</div>
    </div>
    
    <div class="content">
      <article>
        3 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </article>

      <div class="bottom">5</div>
      <div class="base">7</div>
    </div>
		
    <footer><h3>8 Footer</h3></footer>
  </div>
</body>

【讨论】：

这行得通，谢谢。尽管在适应性方面仍然存在一些限制，但这就是为什么我宁愿只包装 3 个侧边栏元素，而让主要部分不被包装。它也没有完全解决问题，但提供了更多的灵活性。关于您的代码，只需声明一次“附带内容”就足够了。
啊，是的，我明白了。对不起，我不能帮助你更多，我更习惯于做完整的 flexbox 布局。 =) 是的，谢谢！我将编辑代码。

【解决方案2】：

我找到了一个非常简单的解决方案。现在 CSS 由空的网格模板区域“侧边栏推送”补充，（不需要选择器）。代码如下：sn-p。

#page-wrapper {
    min-height:100vh;
    display: grid;
    max-width: 1280px;
    margin: 0 auto;
    justify-items: stretch;
    align-items: start;
    grid-gap: 5px;
    background: #ccc;
    grid-template-areas: 
    "header header"
    "sidebar article"
    "sidebar bottom"
    "sidebar base"
    "sidebar push"
    /* try to remove the "sidebar push" and see what will happen  */
    "footer footer";
    grid-template-columns: 1fr 3fr; 
    grid-template-rows: auto;
}	
		         
#page-wrapper > div, header, article, footer  {
    border: 1px solid #888;
    font-size: 1.2em;
    min-height: 50px;
    padding: 7px;
    color: #fff;
}

li {
    list-style: none;
}

header {
    background: #557;
    grid-area: header;
}

.sidebar {
    background: #55a;
    grid-area: sidebar;
}

article {
    grid-area: article;
    background: #755;
}

.sidebar1 {
    background: #351;
}

.sidebar2 {
    background: #125;
}

.bottom {
    grid-area: bottom;
    background: #632;
}

.base {
    grid-area: base;
    background: #33b;
}

footer{
    grid-area: footer;
    background: #376;
}

<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" href="style.css" />
</head>
<body>
	<div id="page-wrapper">
		<header>
			<h3>header</h3>
		</header>
		<article>
			article <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</article>
		<div class="sidebar">
			sidebar 
		<ul>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
			<li>Menu item </li>
		</ul>
		<div class="sidebar1">sidebar1</div>
		<div class="sidebar2">sidebar1</div>
		</div>
		<div class="bottom">bottom</div>
		<div class="base">base</div>
		<footer><h3>footer</h3></footer>
	</div>
	</body>
</html>

【讨论】：