This question already exists:
Why my grid-auto-row inside a grid isn't working? [duplicate]
Closed 2 years ago.
My aim is to create a layout initially having grid display and for each direct child inside that, having flex display for perfect centering the items inside them, so far, it worked out until I gave one .wrapper(the first parent)'s child(.nested) some children and I gave the .nested display: grid;; but for some reason the display: grid of the .nested is omitted and doesn't take the grid-auto-rows: 100px property, which is my problem.
I digged out everywhere for a solution but couldn't find one, Can anybody help me with this issue?
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
main{
max-width: 100%;
}
.wrapper{
padding: 0 50px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1em;
grid-auto-rows: minmax(100px, auto);
}
.wrapper > div{
background-color: silver;
padding: 1em;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper > div:nth-child(odd){
background-color: #dbdbdb;
}
.nested{
display: grid;
grid-template-columns: 1fr;
grid-gap: 1em;
grid-auto-rows: 100px !important;
}
.wrapper .nested div{
border: 1px solid #000;
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<main>
<div class="wrapper">
<div class="box box1">
Lorem ipsum dolor sit.
</div>
<div class="box box2">
Lorem ipsum dolor sit.
</div>
<div class="box box3">
Lorem ipsum dolor sit.
</div>
<div class="box box4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, asperiores at atque beatae cum cupiditate doloremque, error est, eveniet laboriosam nihil officiis pariatur porro rem tempore. A accusamus animi delectus, dolore eaque eveniet impedit maiores molestiae perspiciatis quidem sequi, veniam?
</div>
<div class="box box5">
Lorem ipsum dolor sit.
</div>
<div class="box box6 nested">
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
</div>
<div class="box box7">
Lorem ipsum dolor sit.
</div>
<div class="box box8">
Lorem ipsum dolor sit.
</div>
<div class="box box9">
Lorem ipsum dolor sit.
</div>
<div class="box box10">
Lorem ipsum dolor sit.
</div>
<div class="box box11">
Lorem ipsum dolor sit.
</div>
</div>
</main>
</body>
</html>
the selector in your css file is wrong and you have to replace it
you have to replace this selector
.nested{
display: grid;
grid-template-columns: 1fr;
grid-gap: 1em;
grid-auto-rows: 100px !important;
}
with this
.wrapper > div.nested{
display: grid;
grid-template-columns: 1fr;
grid-gap: 1em;
grid-auto-rows: 100px !important;
}
for better debugging check regularly in your DevTool
Well you are overriding the display:grid with display:flex because ".wrapper > div" has higher precedence than ".nested".
You could potentially add a new div inside box6 for the nested class...
<div class="box box6">
<div class="nested">
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
<div>lorem</div>
</div>
</div>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.skills{
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
place-content: center;
margin: 0 auto;
grid-template-areas:
'one1'
'two2'
'three3'
'four4'
'five5'
;
}
.skillz:nth-child(1){
grid-area: one1;
}
.skillz:nth-child(2){
grid-area: two2;
}
.skillz:nth-child(3){
grid-area: three3;
}
.skillz:nth-child(4){
grid-area: four4;
}
.skillz:nth-child(5){
grid-area: five5;
}
.content-head_links{
display: none;
}
.skillz{
border-radius: 10px;
padding: 20px;
box-shadow: -1px 1px 22px -1px rgba(202,202,202,0.75);
-webkit-box-shadow: -1px 1px 22px -1px rgba(202,202,202,0.75);
-moz-box-shadow: -1px 1px 22px -1px rgba(202,202,202,0.75);
transition: 250ms;
}
.skillz:hover{
transform: translateY(5px);
}
.Top-skills{
width: min(95%, 70rem);
margin: 150px auto;
text-align: center;
position: relative;
}
#media screen and (min-width:1024px){
.skills{
margin: 0 auto;
width: min(95%, 70rem);
gap: 20px;
max-width: 400px;
grid-template-columns: 1fr 1fr 1fr;
place-content: center;
grid-template-areas:
'one1 two2'
'three3 four4'
'five5 .'
;
}
}
</style>
<body>
<div class="Top-skills">
<div class="skills">
<div class="skillz html">
<img src="" alt="">
<h3>html</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz css">
<img src="" alt="">
<h3>css</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz scss">
<img src="" alt="">
<h3>scss</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz javascript">
<img src="" alt="">
<h3>javascript</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz React">
<img src="" alt="">
<h3>React</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
</div>
</div>
</body>
</html>
So I'm trying to make the grid contents center on the webpage and each of the child element have the same size, But whenever I try to center it using place content or margin:0 auto; It doesn't work, In 768px the size of the grid contents become smaller in size.
I want the grid contents to be center and also have equal reasonable size on smaller screens and when it reaches 768px.
P.S I'm working with mobile first
This link will be useful for you to learn about grid layouts in css https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
In here, as I understood you problem, you want to center your skill cards one card in one row.
In grid layout there are two properties called,
grid-template-columns - specifies the number of coulmns in a grid(https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows)
grid-template-rows - specifies number of rows in a grid(https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns)
Here, if you want to keep all the cards in one row, you have to use the grid-template-columns property. And If you want to keep one card at a row, you need to use the grid-template-rows property.
Another thing is when you use grid-template-areas, we have to define the areas that we want to locate a single row, inside the one '' . You can refer this to find more details. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
In your code you can try like below.
.skills{
display: grid;
gap: 1.5rem;
width: 50%;
align-content: center;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
margin: 0 auto;
grid-template-areas: 'one1' 'two2' 'three3' 'four4' 'five5';
}
.skillz:nth-child(1){
grid-area: one1;
}
.skillz:nth-child(2){
grid-area: two2;
}
.skillz:nth-child(3){
grid-area: three3;
}
.skillz:nth-child(4){
grid-area: four4;
}
.skillz:nth-child(5){
grid-area: five5;
}
.content-head_links{
display: none;
}
.skillz{
border-radius: 10px;
padding: 20px;
box-shadow: -1px 1px 22px -1px rgba(202,202,202,0.75);
-webkit-box-shadow: -1px 1px 22px -1px rgba(202,202,202,0.75);
-moz-box-shadow: -1px 1px 22px -1px rgba(202,202,202,0.75);
transition: 250ms;
}
.skillz:hover{
transform: translateY(5px);
}
.Top-skills{
width: min(95%, 70rem);
margin: 150px auto;
text-align: center;
position: relative;
}
#media screen and (min-width:1024px){
.skills{
margin: 0 auto;
width: min(95%, 70rem);
gap: 20px;
max-width: 400px;
grid-template-columns: 1fr 1fr 1fr;
place-content: center;
grid-template-areas:
'one1 two2'
'three3 four4'
'five5 .'
;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" src="style.css">
<title>Document</title>
</head>
<body>
<div class="Top-skills">
<div class="skills">
<div class="skillz html">
<img src="" alt="">
<h3>html</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz css">
<img src="" alt="">
<h3>css</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz scss">
<img src="" alt="">
<h3>scss</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz javascript">
<img src="" alt="">
<h3>javascript</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
<div class="skillz React">
<img src="" alt="">
<h3>React</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam exercitationem </p>
</div>
</div>
</div>
</body>
</html>
I am trying to get a flex display living in a grid to behave like I want. Upon resizing the browser, the flex area refuses to drop below 2 columns no matter what I tinker with and am at a loss as to what to do. I've just taken up markup/coding and am still in the phase of layouts. I'm trying to leverage the powers of Grid and Flex together but am having minimal luck.
Here is what I have so far....please disregard and styling as this is just me tinkering.
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
color: #333;
}
.container {
display: grid;
grid-template-columns: repeat(autofit, minmax(200px, 1fr));
grid-template-rows: autofit 250px 1fr autofit;
grid-template-areas:
"h h h"
"c c c"
"p p p"
"f f f";
}
.flex-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
margin: 0, auto;
}
.main-box {
width: 350px;
text-align: center;
justify-content: center;
margin-top: 2rem;
}
.text-wrap {
background-color: #eee;
width: 300px;
margin: auto;
}
.main-box p {
max-width: 200px;
margin: auto;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
}
.green {
grid-area: h;
}
.red {
grid-area: c;
background-image: url("img/bgmain.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 250px;
}
.blue {
grid-area: p;
}
.yellow {
grid-area: f;
}
<!DOCTYPE html>
<html>
<head>
<title>Grid/Flex Test</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<div class="container">
<div class="green">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<div class="red">Test</div>
<div class="blue">
<div class="flex-container">
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
<div class="main-box">
<img
src="https://source.unsplash.com/random/300x300/?webdesign"
alt=""
/>
<div class="text-wrap">
<h3>Project Name</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum
error ea corporis perferendis facere exercitationem.
</p>
</div>
</div>
</div>
</div>
<div class="yellow">
<span>Copyright © Designed by: Useless Dipshit</span>
</div>
</div>
</body>
</html>
So yeah, I'm a noob.
I forgot:
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
That solved everything for me.
I know a solution to create equal height columns using display:table like:
.row {
display: table;
width: 100%;
}
.col{
display: table-cell;
}
but my case is a bit different, since I am using flexbox and row class has display:flex:
.row {
display: flex;
display: ms-flex;
flex-wrap: wrap;
}
and all cols have .large-4 class:
.large-4 {
width: 25%;
max-width: 25%;
flex: 0 0 30%;
}
I can't use flex:1 for .large-4 as well because it varies in different viewport.
here is a snippet of html:
<div class="row">
<div class="large-4">
<div class="card">
<img src="https://picsum.photos/200/200" alt="author">
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="grey-text mgb-05">2012-09-05, by Basir Payenda</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae quas eligendi id est iste
distinctio
optio vel aliquam provident, ipsa reprehenderit in corrupti quia ratione quisquam amet veniam totam
veritatis.
</p>
</div>
</div>
</div>
<div class="large-4">
<div class="card">
<img src="https://picsum.photos/200/200" alt="author">
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="grey-text mgb-0">2012-09-05, by Basir Payenda</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</p>
</div>
</div>
</div>
<div class="large-4">
<div class="card">
<img src="https://picsum.photos/200/200" alt="author">
<div class="card-content">
<h1 class="card-title">Title</h1>
<p class="grey-text mgb-05">2012-09-05, by Basir Payenda</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae quas eligendi id est iste
distinctio.
</p>
</div>
</div>
</div>
</div>
code-pen link can be found here! how to I acheive equal height columns using flexbox? or any other better solution. thanks
You need to add display: flex to the .large-4 element:
.large-4 {
width: 25%;
max-width: 25%;
flex: 0 0 30%;
display: flex;
}
You'll notice when you inspect your elements using the inspector tool, large-4 elements are actually all the same height. It's the content inside that is not. So by making the parent element flex, it will make the children elements fill the space.
You already have equal-height columns, but inside them is a container that is contracting to its content. Expand that container.
.card {
height: 100%;
}
I'm having difficulty aligning texts , i want the texts on the left side of the div & the image on the right also centered equal from the top . I have tried justify-content and text-align but they dont give the results i need , i'm using css grid also .
here is the code in question
/*this is just the css grid stuff*/
.contain{
display: grid;
grid-template-columns: repeat(9, minmax(120px, 1fr)) ;
text-align: center;
justify-content: center;
grid-template-rows: minmax(50px , auto);
grid-template-areas:
"s content2 content2 content2 content2 content2 content2 content2 empty2";
}
/* Here is the code */
.contentc{
background-color: white;
border-radius: 20px;
padding: 40px;
width: 100%;
grid-area: content2;
}
.text3{
margin:auto;
color: black;
}
.para3{
color: black;
margin: auto;
}
<div class="contain">
<div class= "contentc">
<img class="img-3" src="Use Any Image" >
<h2 class="text3">Twitter Clone </h2>
<p class="para3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione itaque cupiditate porro ipsam quod, fugit reprehenderit autem architecto aliquam harum.</p>
</div>
</div>
I would encourage you to learn flex-box, it makes grid outdated.
here is working code for you. this works great on my machine.
Don't forget you can nest flexboxes too which is how i made this work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.contentc {
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-content: center;
}
#text {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
</style>
</head>
<body>
<div class="contain">
<div class="contentc">
<img class="img-3" src="http://interactive.nydailynews.com/2016/05/simpsons-quiz/img/simp1.jpg" >
<div id="text">
<h2 class="text3">Twitter Clone </h2>
<p class="para3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione itaque cupiditate porro ipsam quod, fugit reprehenderit autem architecto aliquam harum.</p>
</div>
</div>
</div>
</body>
</html>
sorry if my answer isn't that helpful but I hope it can in someway.
What I propose is you try to think more simple for the CSS as if all you want is for the text and images to be in certain positions then this code might be up your alley:
.para3 {display:inline; text-align: top}
.img-3 {float: right}
Hope it can contribute somewhat to helping you solve this problem.
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?
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.