CSS Grid Collapse / Auto Shrink Children - css

Question

NOTE: All needs to be done in CSS Grid
Below is my code and a screenshot. For some reason the content is overflowing its container. All content should fit inside of the cell, but it is breaking out. That leads me to a couple questions that I will list below:
Is it possible to make the contents of a cell in this case fit the container? The content should fit inside the cell.
Also, is there a way to shrink the cells to the size of the content? For example in flex you could just set display:flex and it fits to the container automatically. I would also like to refrain from using minmax() with a static value if possible. For example grid-template-columns:repeat(auto-fit, minmax(100px, 1fr)); has a static value of 100px, but I don't ever know what that value will be. Let me know if that doens't make sense.
SCSS
.row,
.column {
display:grid;
margin:auto;
max-width:1200px;
}
.row {
grid-template-columns:repeat(12, 1fr);
grid-column-gap:120px;
.cell {
grid-column:span 12;
&.large-3 {
grid-column:span 3
}
}
}
HTML
<div class="row row-gap">
<div class="cell large-3">
<h4>Menu</h4>
<nav>
<ul>
<li>Home</li>
<li>About Shoup's</li>
<li>Shop Online</li>
<li>News Archive</li>
<li>Contact Shoups</li>
</ul>
</nav>
</div>
<div class="cell large-3">
<h4>Services</h4>
<nav>
<ul>
<li>Shoup's Catering</li>
<li>Arborwood by Shoup's</li>
<li>On The Rocks</li>
<li>Shoup's Country Store</li>
</ul>
</nav>
</div>
<div class="cell large-3">
<div class="reviews">
<div class="item flex justify-between align-center">
<div class="block">
<div class="rating flex">
#for($i = 1; $i <= $rating; $i++)
#svg('star')
#endfor
</div>
<div class="info">
<p class="name">Shoups Seasoning</p>
<p class="review">by Torie</p>
</div>
</div>
<div class="block">
<div class="image">
<img src="" alt="">
</div>
</div>
</div>
<hr>
<div class="item flex justify-between align-center">
<div class="block">
<div class="rating flex">
#for($i = 1; $i <= $rating; $i++)
#svg('star')
#endfor
</div>
<div class="info">
<p class="name">Shoups Seasoning</p>
<p class="review">by Donna Jackson</p>
</div>
</div>
<div class="block">
<div class="image">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="cell large-3">
<h4>Contact</h4>
<p>Connect with us to receive promotional updates and specials.</p>
<div class="social">
<ul class="flex">
<li>#svg('facebook')</li>
<li>#svg('twitter')</li>
<li>#svg('linked-in')</li>
<li>#svg('google-plus')</li>
<li>#svg('pinterest')</li>
</ul>
</div>
</div>
</div>