is there is anyway for making CSS Grid only for columns without rows?

Question

I am trying since 3 days until now and searching for a way to make the elements inside the grid has a free height, the reason why I am asking this is: the height of the elements are on the same row will automatically get the same height "stretch", I tried to remove this "stretch" by changing it to "start" so: inside the class of the grid I did the following :

.grid{
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
align-items: start; /*default stretch*/
}

now what happened is: the elements (the blocks "divs") whose inside the grid, between the columns are pushed upside of the row, so now they are stacking on the top of 'their' rows.

okay the problem now is: I want to make the elements (the blocks "divs") NOT on the Same row I want to make something like Nesting between rows and not columns BUT automatically not manually.

see this photo for more explain: it's being like this: enter image description here

I want it like this:

enter image description here

if we used the align-items: start ; then there will be a space between the element in the first row and in the element on the second row. (see the photos for explain)

so i think and found that it's impossible to do this except if we made a grid system with only columns but without rows.

eg: I want to create a grid system like this: from materializecss themes: https://themes.materializecss.com/pages/demo

and not by using grid template areas or those commands. very hard and impossible? solution?

I want the user to manually create there own cards , and the grid system automatically to responsive it.

Answer 1

You're looking for what's called a “masonry” layout, named for the JS library that handles it. This isn't possible with CSS alone if your items are in a flat hierarchy (i.e. they're all siblings, no containers for the columns).

Here's a link to the Masonry library for reference.

If you wanted to handle this entirely in HTML/CSS, you could do so by creating the three columns and adding your children to those columns:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.col {}

.el {
  background: #ccc;
  margin-bottom: 10px;
}

<div class="container">
  <div class="col">
    <div class="el" style="height: 110px;"></div>
    <div class="el" style="height: 50px;"></div>
    <div class="el" style="height: 70px;"></div>
    <div class="el" style="height: 90px;"></div>
  </div>
  <div class="col">
    <div class="el" style="height: 50px;"></div>
    <div class="el" style="height: 100px;"></div>
    <div class="el" style="height: 70px;"></div>
    <div class="el" style="height: 100px;"></div>
  </div>
  <div class="col">
    <div class="el" style="height: 70px;"></div>
    <div class="el" style="height: 100px;"></div>
    <div class="el" style="height: 100px;"></div>
    <div class="el" style="height: 50px;"></div>
  </div>
</div>