时间戳

首页 > 解决方案 > 具有可变内容长度的网格布局

html - 具有可变内容长度的网格布局

问题描述

我正在尝试使用网格布局重建一个旧站点。一切都很顺利，直到我开始用内容填充页面。查看代码片段和图像。 如果文章 (3)的内容很短，文章正文和底部 (5)之间会出现间隙。随着文章内容变长，sidebar (2)和sidebar1 (4)之间会出现空隙。只有当侧边栏和文章长度相等时，才没有间隙。我需要将sidebar1 (4)和sidebar2 (6)拉到侧边栏中的最后一个菜单项，将底部 (5)和底座 (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>

标签： htmlcssvariableslayoutgrid

解决方案

我不是很熟悉，grid所以也许有更好的方法来做到这一点，但是，这里有一种方法可以解决您的问题：

.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在.sidebar1a.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>

推荐阅读