CSS Grid and Media Queries

Question

I am currently struggling to get a CSS grid to work with some media queries for smaller screen size. I essentially have a grid with two rows and 3 columns which goes down to 3 rows with two columns at smaller screen sizes. I want this to then go down to a grid with 6 rows and one main column at a phone size screen. Here is my code so far:

@media (max-width: 549px) {
 .projects-container {
  grid-template-columns: 200px;
  grid-template-rows: 200px 200px 200px 200px 200px 200px;
  justify-items: center;
  align-items: center;
}
.project-tile {
 justify-self: center;
 align-self: center;
}

}

This is working for the most part. However, for some odd reason the boxes aren't centered at the smaller screen size despite my crude efforts seen above. Here is the full code pen to illustrate my problem: https://codepen.io/hudsontay/pen/WNGdwpw?editors=1100

The specific issue is under the "Work" section of the portfolio.

s.kuznetsov · Accepted Answer · 2020-12-29T06:42:47.207

2

Set the justify-content: center rule to .projects-container. And you don't need to specify this rule in media queries.

See the result.

.projects-container {
    ...
    justify-content: center;
}

edited Dec 29 '20 at 06:42

answered Dec 29 '20 at 06:36

s.kuznetsov

14,870
3
10
25

1

This is right answer, in my answer below, i got a link showing how its work. Peace! – Manh Nguyen Dec 29 '20 at 06:51
1

@ManhNguyen, Thank you. Your answer is also good. I give +1 to your answer. – s.kuznetsov Dec 29 '20 at 06:54

score 2 · Answer 2 · answered Dec 29 '20 at 06:46

Change justify-items to justify-content because justify-content put padding to space, help align child items center of the box.

You can found the difference here CSS - The difference between justify-* and align-*

@media (max-width: 549px)
.projects-container {
    grid-template-columns: 200px;
    grid-template-rows: 200px 200px 200px 200px 200px 200px;
    /* justify-items: center; */
    justify-content: center;
    align-items: center;
}

I tested on your codepen and this is result:

CSS Grid and Media Queries

2 Answers2