CODEWITHSUNDEEP
htmlcsscss-grid
Hugo Boinet
Hugo Boinet

Reputation: 3

Make responsive CSS Grid

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:

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

Answers (3)

Miha Jan
Miha Jan

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

Burham B. Soliman
Burham B. Soliman

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

Kim
Kim

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

enter image description here

Mobile enter image description here

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

Related Questions