Макет сетки с переменной длиной содержимого - PullRequest
Новая
       25

Макет сетки с переменной длиной содержимого

0 голосов
/ 29 января 2019

Я пытаюсь восстановить старый сайт с сеткой.Все прошло нормально, пока я не начал заполнять страницу контентом.Смотрите фрагмент кода и изображения.Short content Long content Если содержание статьи (3) короткое, между текстом статьи и снизу появляется пробел (5) * +1010 *.Когда содержание статьи становится длиннее, между sidebar (2) и sidebar1 (4) появляется пробел.Только когда боковая панель и изделие равны по длине, пропуски отсутствуют.Мне нужно, чтобы sidebar1 (4) с sidebar2 (6) был перемещен до последнего пункта меню на боковой панели, а 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>

1 Ответ

0 голосов
/ 29 января 2019

Я не очень знаком с 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 и сделать то же самое с элементами содержимого (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>
...