Question 262552 in CSS Question posted in
Some basic documentation can be found here.

CSS Grid: Condense sidebar items height

I have a grid layout with four grid areas, on desktop the layout changes to a two column.

Mobile:

Mobile

Desktop: current

Desktop: current

Desktop: preferred

Desktop: preferred

The second grid item is placed in the sidebar as the first item, then the last grid item follows that. What I’m trying to do is pull the fourth grid item up so it is placed after the second item.

But as I’m using grid you can’t do this as it needs to fill a grid area. Is it possible at all using grid?

Trying to make the layout condense vertically to fill the empty gap in the sidebar.

Tags:

2

Answers


  1. 0

    I would implement this design using a grid to manage the horizontal component of the layout, but flex for the vertical component of the layout.

    When running this snippet, use the full page link and adjust the size of your browser window to test the responsiveness.

    body {
  margin: 1em max(1em, 5vw);
}

.layout {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.layout>* {
  display: contents;
}

.cell {
  padding: 1em;
  border-radius: 0.5em;
  background-color: #b7cffc;
}

.c1 {order: 1;}
.c2 {order: 3;}
.c3 {order: 2; background: #6ee3d1;}
.c4 {order: 4;}

@media (min-width: 600px) {
  .layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: max(1em, 5vw);
  }

  .layout>* {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
}
    <div class="layout">
  <div>
    <div class="cell c1">
      Upper Content
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
      </ul>
    </div>
    <div class="cell c2">Second h2 onwards</div>
  </div>
  <div>
    <div class="cell c3">Drug facts</div>
    <div class="cell c4">Ads</div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You are better off implementing this with flexbox.
    If you still want to use a grid layout, then combine grid-template-areas and grid-auto-rows in a rather dirty style. But you still need to add display:grid; to the parent so that it works in firefox…

    body {
  margin: 0;
  display: grid;
}

.layout {
  display: grid;
  grid-template-columns: 1fr 200px;
  grid-auto-rows: min-content minmax(auto, 100%);
  grid-template-areas:
    "c1 c3"
    "c1 c4"
    "c2 auto"
  ;
  gap: 16px;
  padding: 16px;
}

.c1 {
  grid-area: c1;
  background: red;
}
.c2 {
  grid-area: c2;
  background: green;
}
.c3 {
  grid-area: c3;
  background: blue;
}
.c4 {
  grid-area: c4;
  background: yellow;
  align-self: start;
}

.layout div {
  display: grid;
  place-items: center;
  padding: 20px;
}
    <div class="layout">
  <div class="c1">c1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, hic, rem, harum similique incidunt fuga eius veritatis placeat impedit ipsa necessitatibus assumenda. Dignissimos, necessitatibus, non, alias tempore repudiandae voluptates saepe odit minus obcaecati iure distinctio rerum similique quaerat laudantium doloribus voluptatibus iusto ipsam maxime! Dolorem, provident officiis laudantium corporis velit omnis veritatis! Fugit, totam, consequatur sapiente ea recusandae dicta error libero repellat veniam enim distinctio quaerat exercitationem porro voluptatum id laborum perferendis perspiciatis magni! Natus, quos ipsum quae voluptates accusamus impedit debitis deleniti quas illo dolorem veritatis sequi eum eius ut eaque earum pariatur enim ex amet id aut quam.</div>
  <div class="c3">c3</div>
  <div class="c2">c2</div>
  <div class="c4">c4</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search