Make responsive CSS Grid

Question

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

you can use the css media rule w3schools.com/cssref/css3_pr_mediaquery.asp set the width of post elements to 100% when a specific min-width get reached @media screen and (max-width: 1000px) { .post { width: 100%; } } — Aalexander
– Aalexander, Commented Jan 27, 2021 at 13:59

Burham B. Soliman · Accepted Answer · 2021-01-27 14:04:26Z

1

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>

answered Jan 27, 2021 at 14:04

Burham B. Soliman

1,6051 gold badge12 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kim · Accepted Answer · 2021-01-27 14:01:34Z

0

#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

Mobile

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?

answered Jan 27, 2021 at 14:01

Kim

702 silver badges10 bronze badges

Comments

Miha Jan · Accepted Answer · 2021-01-27 14:07:36Z

0

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>

edited Jan 27, 2021 at 14:07

answered Jan 27, 2021 at 14:01

Miha Jan

12 bronze badges

Collectives™ on Stack Overflow

Make responsive CSS Grid

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related