Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Wrap CSS grid with auto placement

I'm trying to build a grid that contains card-like items. The cells of each type (headline, image, text, button, ...) should have equal height in each row, determined by the content of the largest cell, as in the code snippet below.

Now I'm trying to limit the number of columns, and let the cards wrap, as if I used flex-wrap: wrap; in a flexbox-based solution. The number of columns should be determined via media query. Is this possible without using the not-yet-supported subgrids?

Additionally, how would a solution using subgrids look like? I guess it will degrade to cells with non-equal height in current browsers?

.grid {
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-auto-columns: auto;
}
<div class="grid">

  <h2 class="a">Header 1</h2>
  <img class="b" src="https://placekitten.com/400/100" />
  <p class="c">text
  </p>
  <button class="d">Button</button>

  <h2 class="a">Header 2 is longer and may span multiple lines</h2>
  <img class="b" src="https://placekitten.com/400/100" />
  <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et cursus ligula. Maecenas non pharetra dui, eu tincidunt mi. Vivamus vitae luctus risus. Etiam vehicula sem est.
  </p>
  <button class="d">Button</button>


  <h2 class="a">Header 1</h2>
  <img class="b" src="https://placekitten.com/400/100" />
  <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et cursus ligula. Maecenas non pharetra dui, eu tincidunt mi. Vivamus vitae luctus risus. Etiam vehicula sem est, non ultricies lectus placerat eget.
  </p>
  <button class="d">Button</button>

  <h2 class="a">Header 1</h2>
  <img class="b" src="https://placekitten.com/400/100" />
  <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et cursus ligula. Maecenas non pharetra dui, eu tincidunt mi. Vivamus vitae luctus risus. Etiam vehicula sem est, non ultricies lectus placerat eget. Suspendisse pulvinar arcu massa, quis
    varius velit facilisis tincidunt. Proin sed cursus orci.
  </p>
  <button class="d">Button</button>

  <h2 class="a">Header 1</h2>
  <img class="b" src="https://placekitten.com/400/100" />
  <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
  <button class="d">Button</button>
</div>
like image 423
sk1p Avatar asked Mar 01 '19 17:03

sk1p


People also ask

How does auto placement in CSS Grid work?

Auto-placement by column In this case grid will add items in rows that you have defined using grid-template-rows . When it fills up a column it will move onto the next explicit column, or create a new column track in the implicit grid. As with implicit row tracks, these column tracks will be auto sized.

How do I make my display grid responsive?

Building a Responsive Grid-View First ensure that all HTML elements have the box-sizing property set to border-box . This makes sure that the padding and border are included in the total width and height of the elements. Read more about the box-sizing property in our CSS Box Sizing chapter.

What is auto-fill in grid?

By absorbing the free space, the items grow to fill the entire row. With auto-fill , everything is the same as auto-fit , except empty tracks are not collapsed. They are preserved. Basically, the grid layout remains fixed, with or without items. That's the only difference between auto-fill and auto-fit .


2 Answers

This is a good example of a situation when we need sub-grids - aligning the grid cousins is essential in layouts such as in this question.

Until browsers implement the proposed Level 2 spec of Subgrids, we can only wrap each column in an element and then wrap it using an outer grid container.

The below is an excerpt from the Editor's Draft for CSS Grid Layout Module Level 2:

2.  Subgrids

A grid item can itself be a grid container by giving it display: grid; in this case the layout of its contents will be independent of the layout of the grid it participates in.

In some cases it might be necessary for the contents of multiple grid items to align to each other. A grid container that is itself a grid item can defer the definition of its rows and columns to its parent grid container, making it a subgrid. In this case, the grid items of the subgrid participate in sizing the grid of the parent grid container, allowing the contents of both grids to align.

A good read that discussed this problem can be found here.

Here's a mock-up using nested grid containers (sub-grids can look like this but without breaking the non-equal cousins rule) - see demo below:

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.grid {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  justify-items: flex-start;
  border: 1px solid #07c;
}

img {
  width: 100%;
}

button {
  align-self: center;
  justify-self: center;
}

p {
  padding: 0 10px;
}
<div class="wrapper">

  <div class="grid">
    <h2 class="a">Header 1</h2>
    <img class="b" src="https://placekitten.com/400/100" />
    <p class="c">text
    </p>
    <button class="d">Button</button>
  </div>

  <div class="grid">
    <h2 class="a">Header 2 is longer and may span multiple lines</h2>
    <img class="b" src="https://placekitten.com/400/100" />
    <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et cursus ligula. Maecenas non pharetra dui, eu tincidunt mi. Vivamus vitae luctus risus. Etiam vehicula sem est.
    </p>
    <button class="d">Button</button>
  </div>

  <div class="grid">
    <h2 class="a">Header 1</h2>
    <img class="b" src="https://placekitten.com/400/100" />
    <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et cursus ligula. Maecenas non pharetra dui, eu tincidunt mi. Vivamus vitae luctus risus. Etiam vehicula sem est, non ultricies lectus placerat eget.
    </p>
    <button class="d">Button</button>
  </div>

  <div class="grid">
    <h2 class="a">Header 1</h2>
    <img class="b" src="https://placekitten.com/400/100" />
    <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et cursus ligula. Maecenas non pharetra dui, eu tincidunt mi. Vivamus vitae luctus risus. Etiam vehicula sem est, non ultricies lectus placerat eget. Suspendisse pulvinar arcu massa, quis
      varius velit facilisis tincidunt. Proin sed cursus orci.
    </p>
    <button class="d">Button</button>
  </div>

  <div class="grid">
    <h2 class="a">Header 1</h2>
    <img class="b" src="https://placekitten.com/400/100" />
    <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
    <button class="d">Button</button>
  </div>

</div>

A possible definition could be:

.wrapper {
  display: grid; /* outer grid */
  /* sets a wrapping grid container with items of width around 400px */
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); 
}

.grid {
  grid-row: span 4; /* span 4 rows */
  display: grid;
  /* magic is here */
  grid-template-rows: subgrid; /* create a sub-grid with the 4 parent grid rows */
}
like image 171
kukkuz Avatar answered Oct 13 '22 21:10

kukkuz


You have already a solution now, with a not ideal browser support, but anyway working, that is display: content

You need to wrap your elements in an auxiliary div, I set those to the class card. Then, make card disappear of the layour with the display : content:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
}

.card {
  display: contents;
}

.card:nth-child(odd) * {
  grid-column-start: 1;
}

.card:nth-child(even) * {
  grid-column-start: 2;
}

@media screen and ( min-width: 1300px) {
  .card:nth-child(3n + 0) * {
    grid-column-start: 3;
  }
  .card:nth-child(3n + 1) * {
    grid-column-start: 1;
  }
  .card:nth-child(3n + 2) * {
    grid-column-start: 2;
  }
}
<div class="grid">

  <div class="card">
    <h2 class="a">Header 1</h2>
    <img class="b" src="https://placekitten.com/400/100">
    <p class="c">text
    </p>
    <button class="d">Button</button>
  </div>

  <div class="card">
    <h2 class="a">Header 2 is longer and may span multiple lines</h2>
    <img class="b" src="https://placekitten.com/400/100">
    <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et cursus ligula. Maecenas non pharetra dui, eu tincidunt mi. Vivamus vitae luctus risus. Etiam vehicula sem est.
    </p>
    <button class="d">Button</button>
  </div>

  <div class="card">
    <h2 class="a">Header 1</h2>
    <img class="b" src="https://placekitten.com/400/100">
    <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et cursus ligula. Maecenas non pharetra dui, eu tincidunt mi. Vivamus vitae luctus risus. Etiam vehicula sem est, non ultricies lectus placerat eget.
    </p>
    <button class="d">Button</button>
  </div>

  <div class="card">
    <h2 class="a">Header 1</h2>
    <img class="b" src="https://placekitten.com/400/100">
    <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et cursus ligula. Maecenas non pharetra dui, eu tincidunt mi. Vivamus vitae luctus risus. Etiam vehicula sem est, non ultricies lectus placerat eget. Suspendisse pulvinar arcu massa, quis
      varius velit facilisis tincidunt. Proin sed cursus orci.
    </p>
    <button class="d">Button</button>
  </div>

  <div class="card">
    <h2 class="a">Header 1</h2>
    <img class="b" src="https://placekitten.com/400/100">
    <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
    <button class="d">Button</button>
  </div>
</div>

I just missed the easiest solution:

Since you have already a flat HTML, and are intending to use media queries, you can just use the same idea, (nth- selectors) but on the flat HTMl

.grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: dense;
  grid-auto-rows: 1fr;
}

.card {
  display: contents;
}

h2,
img,
p,
button {
  grid-column-start: 1;
}

h2:nth-of-type(even),
img:nth-of-type(even),
p:nth-of-type(even),
button:nth-of-type(even) {
  grid-column-start: 2;
}

@media screen and ( min-width: 1300px) {

h2:nth-of-type(3n + 1),
img:nth-of-type(3n + 1),
p:nth-of-type(3n + 1),
button:nth-of-type(3n + 1) {
  grid-column-start: 1;
}
h2:nth-of-type(3n + 2),
img:nth-of-type(3n + 2),
p:nth-of-type(3n + 2),
button:nth-of-type(3n + 2) {
  grid-column-start: 2;
}
h2:nth-of-type(3n),
img:nth-of-type(3n),
p:nth-of-type(3n),
button:nth-of-type(3n) {
  grid-column-start: 3;
}

}
<div class="grid">

  <h2 class="a">Header 1</h2>
  <img class="b" src="https://placekitten.com/400/100" />
  <p class="c">text
  </p>
  <button class="d">Button</button>

  <h2 class="a">Header 2 is longer and may span multiple lines</h2>
  <img class="b" src="https://placekitten.com/400/100" />
  <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et cursus ligula. Maecenas non pharetra dui, eu tincidunt mi. Vivamus vitae luctus risus. Etiam vehicula sem est.
  </p>
  <button class="d">Button</button>


  <h2 class="a">Header 1</h2>
  <img class="b" src="https://placekitten.com/400/100" />
  <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et cursus ligula. Maecenas non pharetra dui, eu tincidunt mi. Vivamus vitae luctus risus. Etiam vehicula sem est, non ultricies lectus placerat eget.
  </p>
  <button class="d">Button</button>

  <h2 class="a">Header 1</h2>
  <img class="b" src="https://placekitten.com/400/100" />
  <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et cursus ligula. Maecenas non pharetra dui, eu tincidunt mi. Vivamus vitae luctus risus. Etiam vehicula sem est, non ultricies lectus placerat eget. Suspendisse pulvinar arcu massa, quis
    varius velit facilisis tincidunt. Proin sed cursus orci.
  </p>
  <button class="d">Button</button>

  <h2 class="a">Header 1</h2>
  <img class="b" src="https://placekitten.com/400/100" />
  <p class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
  <button class="d">Button</button>
</div>
like image 42
vals Avatar answered Oct 13 '22 21:10

vals