Разделить боковую панель сверху и снизу на мобильном телефоне с помощью сетки CSS - PullRequest
Новая
       0

Разделить боковую панель сверху и снизу на мобильном телефоне с помощью сетки CSS

0 голосов
/ 19 октября 2019

Можно ли разделить боковую панель с помощью CSS-решеток на мобильном устройстве, но относиться к ней примерно так же, как на рабочем столе?

На мобильном устройстве я хочу, чтобы все было сложено Вступление Часть боковой панели Содержимое , а затем остальные элементы Боковая панель .

На рабочем столе я бы хотел Intro и Содержимое сложены в одну колонку, а 2 боковые панели сложены рядом с ними.

Закрытия, которые я получил, были 

grid-template-areas:
  "intro"
  "sidebarTop"
  "content"
  "sidebarBottom";
@media (min-width: 600px) {
  grid-template-areas:
    "intro sidebarTop"
    "content sidebarTop"
    "content sidebarBottom";
}

Но sidebarTop всегда занимает столько места, сколько может.
Я хочу, чтобы он использовал только пространство, которое он использует, и позволил sidebarBottom занятьдо остальных.

Есть предложения?

Пример

1 Ответ

0 голосов
/ 19 октября 2019

Вы можете начать с чего-то вроде этого, а затем адаптировать каждый блок к вашей потребности: 

main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 25%);
  grid-template-areas: "intro" "sidebarTop" "content" "sidebarBottom";
  grid-gap: 5px;
}

section {
  box-sizing: border-box;
  padding: 15px;
  background-color: tomato;
  color: white;
}

@media (min-width: 600px) {
  main {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 33.33%);
    grid-template-areas: "intro sidebarTop" "content sidebarTop" "content sidebarBottom";
  }
}
<main>
  <section id="intro">
    intro
  </section>
  <section id="sidebarTop">
    sidebarTop
  </section>
  <section id="content">
    content
  </section>
  <section id="sidebarBottom">
    sidebarBottom
  </section>
</main>
...