内容长度可变的网格布局

时间：2019-01-29 10:38:31

标签： html css variables layout grid

我正在尝试重建具有网格布局的旧站点。 一切顺利，直到我开始用内容填充页面。 请参阅代码段和图像。 Short content Long content 如果文章（3）的内容较短，则文章文本和底部（5）之间会出现空白。 随着文章内容的增加，侧边栏（2）和侧边栏1（4）之间会出现缝隙。 只有当侧边栏和商品的长度相等时，才没有间隙。 我需要将带有 sidebar2（6）的 sidebar1（4）拉到侧边栏中的最后一个菜单项，并且 bottom（5）< / em>与 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>

2 个答案:

答案 0 :(得分：1)

我对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，.sidebar1和.sidebar2包裹在div中，并对内容元素（{{1 }}，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;
}

答案 1 :(得分：0)

我找到了一个非常简单的解决方案。现在，CSS由空的grid-template-area“ sidebar push”补充（不需要选择器）。下面的代码段。

#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>

相关问题
最新问题