Reputation: 3
I want to make a responsive grid that takes up the entire width of the screen and without any gaps between each element.
Each elements have to be a square.
I want four elements per line on large screens and one element per line on smartphones.
#work {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.post {
margin: 0;
padding: 0;
width: 480px;
height: 480px;
border: 1px solid red;
}
<div id="work">
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
</div>
Image of the result:
Perfect in large screen but when i reduce the size of my window, elements don't go under each other but still in place and i can scroll in X.
I've tried many solutions i could have found on the internet but no one worked.
Excuse me in advance for any mistakes I may have, I am a beginner in HTML & CSS
Upvotes: 0
Views: 73
Reputation: 1
You could do this with flexbox and set the flex-wrap to wrap.
#work {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.post {
margin: 0;
padding: 0;
width: 480px;
height: 480px;
border: 1px solid red;
}
<div id="work">
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
</div>
Upvotes: 0
Reputation: 1577
you can use @media
role by setting the grid-template-columns
to 1
#work {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.post {
margin: 0;
padding: 0;
width: 480px;
height: 480px;
border: 1px solid red;
}
@media only screen and (max-width: 800px) {
#work {
grid-template-columns: repeat(1, 1fr);
}
.post {
width:100%;
}
}
<div id="work">
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
</div>
Upvotes: 1
Reputation: 70
#work {
display: grid;
grid-template-columns: repeat(auto-fit, 20rem);
gap: 2rem;
}
.post {
width: 480px;
height: 480px;
border: 1px solid white;
background: red;
}
Large Screen
I've added a red background just for demonstration and you can tweak the sizes. But this should help you achieve what you are looking to do?
Upvotes: 0