0

Is it possible to split a sidebar with css grids on mobile but treat it kind of one on desktop?

On mobile I want everything stacked Intro Part of the sidebar Content and then the rest of the Sidebar.

On desktop I would like Intro and Content stacked in one column and the 2 sidebars stacked next to them.

The closes I got was

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

But sidebarTop always takes up as much space as it can.
I want it to only use the space it uses and let the sidebarBottom take up the rest.

Any suggestions?

Example

Community
  • 1
  • 1
Patrik
  • 1
  • Is the example how you want it? or the example of how it is now? – ProjectPokket Oct 19 '19 at 08:57
  • CSS-Grid is not an option here as your image shows that this *is not a grid* - https://stackoverflow.com/questions/33947885/left-column-and-stacked-right-column-using-flexbox-css – Paulie_D Oct 19 '19 at 20:35

1 Answers1

-1

You can start with something like this, then adapt each block to your need:

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>
giuseppedeponte
  • 2,366
  • 1
  • 9
  • 19