Css 自动指定行高度

我创建这个CSS代码是为了给我3个响应列，但是。。在移动设备中，也有病态和Ipad。 无论如何，我真正的问题是：

1如何将3行自动配合。因为它们都具有相同的自动大小。 当没有一个框包含任何内容时，我希望网格看起来小而不是大

.pagewrap {
 *background: #6B949F;
 display: grid;
 grid-template-columns:210px 850px 210px;
 grid-template-rows: auto auto auto;
 grid-gap: 10px;
 justify-content: center;

}

.content {
 text-align: left;
 background: #1C1C1C;
 box-shadow:0 6px 6px -6px #000;
 border-radius: 3px;
}
  .content ul li {
    width: 190px;
    padding:5px 10px;
    background:none;
    text-transform: none;
}
  .content ul li a {
    display: block;
    padding:0 15px 0;
    color:#BDBDBD;
    background:transparent;
    font-size: 15px;
    transition: all 0.35s ease; 
}
  .content ul li a:hover {
    background:#424242;
    border-radius: 1px;
    color:#fff;
}     
 
.middle {
 margin: 0;
 padding: 8px;
 text-align: center;
 background: #E6E6E6;
 box-shadow:0 6px 6px -6px #000;
 border-radius: 3px;
} 
 
.sidebar {

 padding: 8px;
 text-align: center;
 background: #1C1C1C;
 box-shadow:0 6px 6px -6px #000;
 border-radius: 3px;
 color:#BDBDBD;
}  

我想要这样的盒子。

---

尝试

d-flex

和

在
之间调整内容

d-flex
将它们对齐成一行，
justify content-between
将它们对齐如下：|右中左|
“…在移动设备中生病了”？这意味着什么？我必须配置“宽度”，但这不是我现在想要的。您能帮我确定行大小吗？在HTML中，只需执行
Nop不起作用。证明内容：中心；已经给我中间的位置了。。对我来说没关系。。但现在我希望盒子大小不相等。