可以使用flexbox来实现保持网格项的高度与内容相同的效果。下面是一个示例代码：

HTML代码：

  

    
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  
  

    
Nullam faucibus, purus sed sagittis vulputate, nunc ligula eleifend urna.
  
  

    
Maecenas finibus, metus vel volutpat feugiat, arcu enim mattis urna.
  

CSS代码：

.grid-container {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  flex: 1 0 200px;
  margin: 10px;
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-item p {
  margin: 0;
}

在上面的示例中，.grid-container 使用 display: flex 来创建一个弹性容器，并设置 flex-wrap: wrap 让网格项可以换行。

.grid-item 是网格项的样式，flex: 1 0 200px 表示网格项的宽度为200px，高度根据内容自适应。margin 属性用于设置网格项之间的间距。background-color 用于给网格项添加背景色。

.grid-item p 用于设置网格项内段落元素的样式，margin: 0 用于去除段落元素的默认边距。

这样，每个网格项的高度将会根据其内部内容的高度自适应，从而防止它们与父元素的高度匹配。