<!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>
Related
.skills {
display: grid;
gap: 1.5rem;
max-width: 300px;
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);
}
#media screen and (min-width:1024px) {
.skills {
max-width: 300px;
grid-template-columns: 1fr;
grid-template-areas: 'one1 two2 three3' 'four4 five5';
}
}
<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>
So as you can see here, I tried to change the layout of the grid in the media query, But it isn't working, When the screen size becomes 1024px, The layout doesn't change, Despite me changing the grid template areas format, I don't know if it's something I am missing.
And whenever I set the grid template column:1fr; it doesn't change in any way.
grid-template-areas must form a rectangle, i.e. have the same amount of columns in each row.
.skills {
display: grid;
gap: 1.5rem;
max-width: 300px;
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);
}
#media screen and (min-width:1024px) {
.skills {
max-width: 300px;
grid-template-columns: 1fr;
grid-template-areas:
"one1 two2 three3"
"four4 five5 none";
}
}
<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>
I'm trying to recreate the flex layout exercise from The Odin Project.
Here is what my page looks like but I can't figure out how to make the footer stick at the bottom of the page so that the main container can occupy most of the screen. For the exercise, I can only use display: flex and its properties. What is wrong with my code?
#import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght#0,100;0,300;0,400;0,900;1,900&display=swap');
body {
font-family: 'Alegreya Sans', sans-serif;
background-color: #FEF9F8;
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
header {
background-color: #ED9275;
height: 70px;
display: flex;
font-size: 32px;
align-items: center;
padding: 16px;
}
.main-container {
display: flex;
flex: 1;
}
.sidebar {
background-color: #2A6877;
flex-shrink: 0;
width: 300px;
padding: 16px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
font-weight: 400;
}
li {
margin-bottom: 5px;
font-size: 20px;
}
.card-container {
display: flex;
margin: 30px;
flex-wrap: wrap;
gap: 8px;
padding: 8px;
}
.card {
border: 1px solid black;
width: 200px;
padding: 10px;
text-align: center;
margin: 16px;
}
footer {
background-color: #ED9275;
color: black;
font-weight: 300;
height: 72px;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<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>
<body>
<header>
<h1>Box Zilla</h1>
</header>
<main>
<div class="main-container">
<div class="sidebar">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Packages
</li>
<li>
Contact Us
</li>
</ul>
</div>
<div class="card-container">
<div class="card">
<h2>Heading 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 4</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 5</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 6</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
</div>
</div>
</div>
<footer>
<p>Property of Box Zilla Corporated</p>
</footer>
</main>
</body>
</html>
Your webpage has 3 main elements
Header
Content
Footer
I would suggest you to add justify-content:space-between; to the body tag as you have to use flex properties
Alternatively, you can use a media query to keep footer at bottom using position. After that, your content will fill the page's empty space and your footer will be automatically at the bottom
Changes Made
Moved footer outside main tag (idk why)
Tips
Use padding in percentage (ex: Padding:2%;) for responsiveness
Have a nice day ^_^
#import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght#0,100;0,300;0,400;0,900;1,900&display=swap');
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Alegreya Sans', sans-serif;
background-color: #FEF9F8;
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
/* Changes Made */
justify-content: space-between;
}
header {
background-color: #ED9275;
height: 70px;
display: flex;
font-size: 32px;
align-items: center;
padding: 16px;
}
.main-container {
display: flex;
flex: 1;
}
.sidebar {
background-color: #2A6877;
flex-shrink: 0;
width: 300px;
padding: 16px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
font-weight: 400;
}
li {
margin-bottom: 5px;
font-size: 20px;
}
.card-container {
display: flex;
margin: 30px;
flex-wrap: wrap;
gap: 8px;
padding: 8px;
}
.card {
border: 1px solid black;
width: 200px;
padding: 10px;
text-align: center;
margin: 16px;
}
footer {
background-color: #ED9275;
color: black;
font-weight: 300;
height: 72px;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Box Zilla</h1>
</header>
<main>
<div class="main-container">
<div class="sidebar">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Packages
</li>
<li>
Contact Us
</li>
</ul>
</div>
<div class="card-container">
<div class="card">
<h2>Heading 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 4</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 5</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 6</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
</div>
</div>
</div>
</main>
<footer>
<p>Property of Box Zilla Corporated</p>
</footer>
</body>
</html>
The best way would be to add position: relative; with bottom: 0; on your footer. However, when your content does not exceed the length of the page (y-axis scroll) the footer will be directly under the content and not at the very bottom of the page.
In the event that there is no scroll and you still want the footer at the bottom I would then use either position fixed or absolute and add width: 100%; on the footer.
I added a static height on your main-container to demonstrate how relative works.
#import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght#0,100;0,300;0,400;0,900;1,900&display=swap');
body {
font-family: 'Alegreya Sans', sans-serif;
background-color: #FEF9F8;
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
header {
background-color: #ED9275;
height: 70px;
display: flex;
font-size: 32px;
align-items: center;
padding: 16px;
}
.main-container {
display: flex;
flex: 1;
height: 1074px;
}
.sidebar {
background-color: #2A6877;
flex-shrink: 0;
width: 300px;
padding: 16px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: white;
font-weight: 400;
}
li {
margin-bottom: 5px;
font-size: 20px;
}
.card-container {
display: flex;
margin: 30px;
flex-wrap: wrap;
gap: 8px;
padding: 8px;
}
.card {
border: 1px solid black;
width: 200px;
padding: 10px;
text-align: center;
margin: 16px;
}
footer {
background-color: #ED9275;
color: black;
font-weight: 300;
height: 72px;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
position: relative;
bottom: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<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>
<body>
<header>
<h1>Box Zilla</h1>
</header>
<main>
<div class="main-container">
<div class="sidebar">
<ul>
<li>
Home
</li>
<li>
About
</li>
<li>
Packages
</li>
<li>
Contact Us
</li>
</ul>
</div>
<div class="card-container">
<div class="card">
<h2>Heading 1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 4</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 5</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
<div class="card">
<h2>Heading 6</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</div>
</div>
</div>
</main>
<footer>
<p>Property of Box Zilla Corporated</p>
</footer>
</body>
</html>
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>
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 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.