我可以用CSS Grid布局模拟flex-grow和flex-shrink吗？

Question

看看在Flexbox上进行的footer__column选择器的这种行为（您应该查看大屏幕尺寸至少为1156px宽）

CodePen：https://codepen.io/anon/pen/ZwwGMB?editors=1100 要么

.footer {
  position: relative;
  z-index: 1;
  margin-top: 60px;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.footer__row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.footer__column {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  flex-grow: 1;
  align-content: flex-start;
  background-color: #F5F7FC;
  width: 0;
  min-width: 300px;
  padding: 10px;
  margin-right: 60px;
  margin-bottom: 40px;
}
.footer__side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.footer__text {
  padding-top: 5px;
  padding-bottom: 5px;
}

<div class="footer__floor">
    <div class="footer__inner">
        <div class="footer__row">
            <div class="footer__column">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sint ratione doloremque laboriosam laborum! Id sunt ut corrupti repellat vel autem aut velit enim, harum, eveniet, aliquam reprehenderit ea odio.</p>
              
            </div>
            <div class="footer__column">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sint ratione doloremque laboriosam laborum! Id sunt ut corrupti repellat vel autem aut velit enim, harum, eveniet, aliquam reprehenderit ea odio.</p>
            </div>
            <div class="footer__column">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sint ratione doloremque laboriosam laborum! Id sunt ut corrupti repellat vel autem aut velit enim, harum, eveniet, aliquam reprehenderit ea odio.</p>
            </div>
        </div>
    </div>
</div>

当最后一列不适合该行时，它将占用所有可用空间 在下面的下一行。

由于flex-grow:1，min-width:300px;和flex-shrink:0而变得可用。

我试图在CSS网格上找到完全相同的解决方案，但没有成功。 我尝试使用autofill属性，但该列始终采用下一个单元格。

CodePen：https://codepen.io/anon/pen/pGGJBb?editors=1100或

.footer {
  position: relative;
  z-index: 1;
  margin-top: 60px;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.footer__grid {
  display: grid;
  grid-gap: 60px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 2fr));
  width: 100%;
}
.footer__column {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  flex-grow: 1;
  align-content: flex-start;
  background-color: #F5F7FC;
  width: 0;
  min-width: 300px;
  padding: 10px;
  margin-bottom: 40px;
}
.footer__side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.footer__text {
  padding-top: 5px;
  padding-bottom: 5px;
}

<div class="footer__floor">
  <div class="footer__inner">
    <div class="footer__grid">
      <div class="footer__column">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sint ratione doloremque laboriosam laborum! Id sunt ut corrupti repellat vel autem aut velit enim, harum, eveniet, aliquam reprehenderit ea odio.</p>

      </div>
      <div class="footer__column">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sint ratione doloremque laboriosam laborum! Id sunt ut corrupti repellat vel autem aut velit enim, harum, eveniet, aliquam reprehenderit ea odio.</p>
      </div>
      <div class="footer__column">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sint ratione doloremque laboriosam laborum! Id sunt ut corrupti repellat vel autem aut velit enim, harum, eveniet, aliquam reprehenderit ea odio.</p>
      </div>
    </div>
  </div>
</div>

我知道可以通过媒体查询和grid-template: span 2属性来实现。但是，我根本不想编写任何其他媒体查询。我希望获得与上述弹性盒相同的自动行为。

问题是：可能吗？如果是，您能提供解决方案吗？