Grid items are not wrapping properly using minmax() function - html

Question

I am trying to create a responsive page where the "boxes" wrap to another row when browser window it made smaller. I used:
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
to accomplish this in the pen below.
See link for example of behavior desired.
https://codepen.io/DukeJellington/pen/BrMQga
html {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
color: var(--dark)
}
body {
background: #ccc;
margin: 30px 50px;
line-height: 1.4;
}
.boxes {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.box {
background: var(--primary);
text-align: center;
padding: 1.5rem 2rem;
box-shadow: var(--shadow);
}
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
<!-- Boxes -->
<section class="boxes">
<div class="box">
<i class="fas fa-chart-pie fa-4x"></i>
<h3>Analytics</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
<div class="box">
<i class="fas fa-globe fa-4x"></i>
<h3>Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
<div class="box">
<i class="fas fa-cog fa-4x"></i>
<h3>Development</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
<div class="box">
<i class="fas fa-users fa-4x"></i>
<h3>Support</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
</section>
Notice how the icons/text will wrap to the lower row when window is made smaller, until there is one grid item is on top of another.
However, there is something prohibiting this behavior on the full page that was created in the link below; and I am unable to find what is prohibiting this behavior.
https://codepen.io/DukeJellington/pen/vRbyqb
/* CSS Variables */
:root {
--primary: #ddd;
--dark: #333;
--light: #fff;
--shadow: 0 1px 5px rgba(104, 104, 104, 0.8)
}
html {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
color: var(--dark)
}
body {
background: #ccc;
margin: 30px 50px;
line-height: 1.4;
}
.btn {
background-color: var(--dark);
color: var(--light);
padding: 0.6rem 1.3rem;
text-decoration: none;
border: 0;
}
img {
max-width: 100%;
}
.wrapper {
display: grid;
grid-gap: 20px;
}
/* Navigation */
.main-nav ul {
display: grid;
grid-gap: 20px;
padding: 0;
list-style: none;
grid-template-columns: repeat(4, 1fr);
}
.main-nav a {
background: var(--primary);
display: block;
text-decoration: none;
padding: 0.8rem;
text-align: center;
color: var(--dark);
text-transform: uppercase;
font-size: 1.1rem;
box-shadow: var(--shadow);
}
.main-nav a:hover {
background: var(--dark);
color: var(--light);
}
/* Top Container */
.top-container {
display: grid;
grid-gap: 20px;
grid-template-areas: 'showcase showcase top-box-a' 'showcase showcase top-box-b'
}
.showcase {
grid-area: showcase;
min-height: 400px;
background: url(img/showcase.jpg);
background-size: cover;
background-position: center;
padding: 3rem;
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
box-shadow: var(--shadow);
}
.showcase h1 {
font-size: 4rem;
margin-bottom: 0;
color: var(--light);
}
.showcase p {
font-size: 1.3rem;
margin-top: 0;
color: var(--light);
}
/* Top Box */
.top-box {
background: var(--primary);
display: grid;
align-items: center;
justify-items: center;
box-shadow: var(--shadow);
padding: 1.5rem;
}
.top-box .price {
font-size: 2.5rem;
}
.top-box-a {
grid-area: top-box-a;
}
.top-box-b {
grid-area: top-box-b;
}
/* Boxes */
.boxes {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.box {
background: var(--primary);
text-align: center;
padding: 1.5rem 2rem;
box-shadow: var(--shadow);
}
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
<div class="wrapper">
<!-- Navigation -->
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<!-- Top Container -->
<section class="top-container">
<header class="showcase">
<h1>Your Web Presence</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, omnis magnam? Tempore ut vero ex.</p>
Read More
</header>
<div class="top-box top-box-a">
<h4>Membership</h4>
<p class="price">$199/month</p>
Buy Now
</div>
<div class="top-box top-box-b">
<h4>Pro Membership</h4>
<p class="price">$299/month</p>
Buy Now
</div>
</section>
<!-- Boxes Section -->
<section class="boxes">
<div class="box">
<i class="fas fa-chart-pie fa-4x"></i>
<h3>Analytics</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
<div class="box">
<i class="fas fa-globe fa-4x"></i>
<h3>Marketing</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
<div class="box">
<i class="fas fa-cog fa-4x"></i>
<h3>Development</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
<div class="box">
<i class="fas fa-users fa-4x"></i>
<h3>Support</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, sapiente.</p>
</div>
</section>
<!-- Information Section -->
<section class="info">
<img src="img/pic1.jpg" alt="">
<div>
<h2>Your Business on the Web</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, minima praesentium accusamus maxime repellat, amet non necessitatibus enim officia ipsam saepe nemo deleniti incidunt vero autem earum accusantium sed corporis.
Learn More
</p>
</div>
</section>
<!-- Portfolio Section -->
<section class="portfolio">
<img src="https://source.unsplash.com/random/200x200" alt="">
<img src="https://source.unsplash.com/random/200x201" alt="">
<img src="https://source.unsplash.com/random/200x202" alt="">
<img src="https://source.unsplash.com/random/200x203" alt="">
<img src="https://source.unsplash.com/random/200x204" alt="">
<img src="https://source.unsplash.com/random/200x205" alt="">
<img src="https://source.unsplash.com/random/200x206" alt="">
<img src="https://source.unsplash.com/random/200x207" alt="">
<img src="https://source.unsplash.com/random/200x208" alt="">
</section>
<!-- Footer -->
<footer>
<p>GridBiz © 2018</p>
</footer>
</div>
<!-- Wrapper Ends -->
In the link above, when the window is made smaller, the final div wraps below, but the other grid items remain on the same row when the window is minimized further.
I played with the code a bit and noticed that when I commented out the following styling for the wrapper class, the grid items behave as desired.
.wrapper {
display: grid;
grid-gap: 20px;
Can somebody tell me what about having the grid display for the wrapper class is prohibiting my grid items below from wrapping properly?

Answer 1

Your .boxes grid doesn't wrap further due to other wider sibling blocks in main .wrapper block.
By default when you add just display: grid for a block, it becomes a grid container. Your .wrapper grid container has only single column and minimum width of this column is defined by a child with the biggest minimum size. The top biggest child in your case is .main-nav ul because it has 4 columns which won't shrink regardless of resolution. The next big container is .top-container which also have big number of unshrinkable content.
So for resolving your issue just make .main-nav ul and .top-container blocks shrinkable in any way.
Also note that for 1D layout you can use Flexbox.