2

Нужно сделать так чтобы Footer начинался там где заканчивается Content.

То есть заставить сетку вести себя как таблица, чтобы новый ряд начинался там где заканчивается максимальный контент на предыдущем ряде.

Проблема

body {
  margin: 40px;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}

.footer {
  grid-area: footer;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 120px 120px 120px;
  grid-template-areas: "....... header header" "sidebar content content" "footer  footer  footer";
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%;
}

.header,
.footer {
  background-color: #999;
}
<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box content">Content
    <br /> More content than we had before so this column is now quite tall.</div>
  <div class="box footer">Footer</div>
</div>

1 ответ 1

0

body {
  margin: 40px;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.header {
  grid-area: header;
}

.footer {
  grid-area: footer;
}

.wrapper {
  display: grid;
 
  grid-template-columns: 120px 120px 120px;
  grid-template-areas: "....... header header" "sidebar content content" "footer  footer  footer";
  background-color: #fd1;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 150%;
}

.header,
.footer {
  background-color: #999;
}
<div class="wrapper">
  <div class="box header">Header</div>
  <div class="box sidebar">Sidebar</div>
  <div class="box content">Content
    <br /> More content than we had before so this column is now
    <br /> More content than we had before so this column is now
    <br /> More content than we had before so this column is now
    <br /> More content than we had before so this column is now
    <br /> More content than we had before so this column is nowquite tall.</div>
  <div class="box footer">Footer</div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.