Hi all, I found a way to center a CSS Grid but I’m left feeling like there is probably a better way of doing it. Some background, this is for the Personal Portfolio Webpage (final project) and I’ve successfully completed it, but I just feel like I probably used a crude method to get it to work.
I have a few questions and any help from the community would be greatly appreciated, thanks in advance and sorry about the long post.
Question #1: Is there a better way to have the CSS Grid horizontally centered on the page?
Quick background, I have <div id="project-grid"> that is a CSS Grid (3 columns, each of equal width) and inside the Grid I have 7 items that are basically all more or less the same (apart from images used).
Here is the HTML:
<!-- PROJECT SECTION -->
<section id="projects">
<h3>These are some of my projects</h3>
<div id="project-grid"> <!-- START OF CSS GRID -->
<a href="https://tribute-page.freecodecamp.rocks/">
<div class="project-tile">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg" class="grid-image">
<div class="project-tile-title">Project 1</div>
</div>
</a>
<div class="project-tile">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png" class="grid-image">
<div class="project-tile-title">Project 2</div>
</div>
<div class="project-tile">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png" class="grid-image">
<div class="project-tile-title">Project 3</div>
</div>
<div class="project-tile">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png" class="grid-image">
<div class="project-tile-title">Project 4</div>
</div>
<div class="project-tile">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png" class="grid-image">
<div class="project-tile-title">Project 5</div>
</div>
<div class="project-tile">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png" class="grid-image">
<div class="project-tile-title">Project 6</div>
</div>
<div class="project-tile">
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png" class="grid-image">
<div class="project-tile-title">Project 7</div>
</div>
</div> <!-- END OF CSS GRID -->
And here is the CSS:
#project-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
grid-gap: 2rem;
width: calc(1200px + 4rem); /* with this and margin, I actually don't need "justify-items: center" because the width is precise */
margin: 0 auto;
}
.grid-image {
width: 400px;
height: 300px;
object-fit: cover; /* this will crop image as necessary to keep aspect ratio */
display: block; /* by default images are inline elements by default. Setting to block removes space between .grid-image and .project-tile-title (ASK IF CORRECT) */
}
.project-tile-title {
/* creating a flexbox and having align-items and justify items allow me to easily center the text both horizontally and vertically inside the .project-tile-title div container */
display: flex;
align-items: center;
justify-content: center;
/* end of flexbox code */
width: 400px;
height: 50px;
background-color: orange;
font-family: sans-serif;
text-align: center;
font-size: 2rem;
}
As you can see, I have set the width of the CSS Grid (#project-grid) to be the exact width of the three images (400px each) plus 4rem (2rem is the column gap but there’s two of them).
By using the exact width, and then using margin: 0 auto; I’m able to center the CSS Grid.
This achieves what I want, as I also want the space between the images and space between the rows to be the same. But is there a more efficient way of achieving this without having to actually calculate the exact width of the 3 images plus the column gaps?
I understand if I simply have this as the CSS:
#project-grid {
display: grid;
grid-template-columns: repeat(3, 1fr)
justify-items: center;
grid-gap: 2rem;
}
…I can have the items centered horizontally within each column, although the space between the items (column gap) looks bigger than the gap between the rows, which is not what I want.
Question #2: Is my method of having the following the right approach?
.grid-image {
width: 400px;
height: 300px;
object-fit: cover; /* this will crop image as necessary to keep aspect ratio */
display: block; /* by default images are inline elements by default. Setting to block removes space between .grid-image and .project-tile-title (ASK IF CORRECT) */
}
Although this works, I’m worried this is not the ideal way of tackling this. First off, I’m actually setting the width and height of the .grid-image rather than the container (.project-tile).
It seems like logically, I should really be setting the width and height of the container (.project-tile) rather than the image.
Question #3: Is there an ideal way of achieving the same effect?
Once I have the CSS Grid set up for 3 columns of equal width and a grid-gap of 2rem; is there a way I can simply tell the browser something like “have the CSS Grid the width of the page, and fit each .project-tile in a column and make sure there’s a grid-gap of 2rem, then center the whole CSS Grid horizontally so that it is centered on the page”?
Could that be achieved without defining the width of .grid-image (can’t we just tell the images to fit within the column, and keep the aspect ratio?) and also without calculating the exact width of the CSS Grid?
I’ve tried different approaches like setting #project-grid {width: 100%} but I think the problem is when it comes to centering the CSS Grid because it somehow doesn’t take into account the grid-gap of 2rem (x2). Sorry if I’m confusing things.
Question #4: In the freeCodeCamp sample Portfolio, the images gradually shrink according to the browser width, how is that done?
fCC sample portfolio:
https://personal-portfolio.freecodecamp.rocks/
In the sample portfolio, the images in the 3 column grid gradually shrink as you reduce the size of the browser before switching to a 2 column grid at a certain point. With my media queries, I can get the CSS Grid to change to 2 columns when the browser gets too small but I can’t figure out how to get the images to gradually resize as you shrink the browser. Any help would be greatly appreciated. Thanks a million and again, just want to stress I’ve completed the project so I’m not looking to cheat (I think the moderators can access my project) but I’m just looking for ways to improve the code and implement the image resizing function.
Thanks everyone and sorry about the long post.
P.S. I don’t mind sharing my project (in its entirety) here but don’t quite know how, doesn’t look like I can link to it.