css grid fit rows heights-CodePudding

I want to remove the worthless margin between rows, so I want every div takes the content height without giving margin to his side div, I tried everything but nothing works.

.grids {
  width: 90%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(min-content, max-content);
  margin: auto;
  grid-gap: 32px;
}

.grid {
  position: relative;
  width: 95%;
  height: max-content;
  margin: 10px;
  padding: 20px;
  background: black;
  border-radius: 10px;
}

<div >
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

Edit: To make a masonry layout I have wrapped grid items in div tag so you can nest as many tags as you want.

grid items overflow the content because of the width and height properties.
you're using a grid gap for both rows and columns.

So I guess this might help you out.

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

.grid-item {
    padding: 20px;
    background: red;
    border-radius: 10px; 
    margin-bottom: 24px;
}

<div >
  <div>
    <div >
      <h1>Hello world</h1>
    </div>
    <div >
      <h1>Hello world</h1>
    </div>
  </div>
  <div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
  <div>
    <div >
    <h1>Hello 
      <br> 
      friend
    </h1>
  </div>
  <div ></div>
  </div>
</div>

Also, I renamed the classes for naming purposes only.

MDN docs grid-row: row-gap

MDN docs masonry layout: masonry layout

CodePudding user response：

You can try to set grid-gap: 32px to grid-gap: 0 32px, it will remove the margin between grid rows;