contents are going outside from grid box-CodePudding

.mn2 {
  display: grid;
  grid-template-columns: 30vh 30vh;
  grid-template-rows: 30vh 30vh;
  grid-gap: 5px 5px;
  height: 50vh;
  border: 3px dashed red;
}

<div >
  <div >
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur doloremque labore corrupti atque.
  </div>

  <div >Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque error maiores asperiores! Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  </div>
  <div >
    Lorem ipsum dolor sit amet consectetur adipisicing elit
  </div>
  <div >Lorem ipsum dolor, sit amet consectetur adipisicing elit. A sit quaerat error ad, ut nulla.</div>
</div>

CodePudding user response：

You should let the content define box height & widths. By setting everything to auto.. you can set height of the boxes with grid-auto-rows: [first-row-height] [second-row-height]; for eg

grid-auto-rows: 200px 200px;

.mn2 {
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-rows: 200px 200px;
  grid-gap: 5px 5px;
  height: auto;
  
}

.mn2>div {
  padding: 1rem;
  background-color: gray;
}

<div >
  <div >
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur doloremque labore corrupti atque.
  </div>

  <div >Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque error maiores asperiores! Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  </div>
  <div >
    Lorem ipsum dolor sit amet consectetur adipisicing elit
  </div>
  <div >Lorem ipsum dolor, sit amet consectetur adipisicing elit. A sit quaerat error ad, ut nulla.</div>
</div>

CodePudding user response：

Try this:

.mn2 {
  display: grid;
  grid-template-columns: 24% 24% 24% 24%;
  grid-gap: 5px 5px;
  height: auto;
  border: 3px dashed red;
}

<div >
  <div >
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur doloremque labore corrupti atque.
  </div>

  <div >Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque error maiores asperiores! Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  </div>
  <div >
    Lorem ipsum dolor sit amet consectetur adipisicing elit
  </div>
  <div >Lorem ipsum dolor, sit amet consectetur adipisicing elit. A sit quaerat error ad, ut nulla.</div>
</div>

CodePudding user response：

.mn2 {
  display: grid;
  grid-template-columns: 60vh 30vh;
  grid-template-rows: 60vh 30vh;
  grid-gap: 5px 5px;
  height: auto;
  border: 3px dashed red;
}

<div >
  <div >
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur doloremque labore corrupti atque.
  </div>

  <div >Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque error maiores asperiores! Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  </div>
  <div >
    Lorem ipsum dolor sit amet consectetur adipisicing elit
  </div>
  <div >Lorem ipsum dolor, sit amet consectetur adipisicing elit. A sit quaerat error ad, ut nulla.</div>
</div>