What is the best way to align my grid cells to the center?

I'm facing an issue where the grid cells do not move closer together as I resize the window, instead they just stay in their place. I want to achieve a similar layout to . To share my project code, I have uploaded it on codepen: https://codepen.io/Alessandro-Garcia/pen/RwqNaPq

The following code manages the grid:

main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(589.19px, auto));
    gap: 0;
    overflow-x: hidden;
    justify-items: center;
    align-items: center;
}

And here's the code for the individual grid cells:

article{
    margin: auto;
}
htmlcss

Answer №1

If you're looking to achieve your desired layout, consider utilizing the power of flexbox over grid. Take a shot at incorporating the following code snippet into your main element.

main {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
}

If you'd like to delve deeper into the code, here's a link to the full example in this Rick and Morty-themed CodePen project. Hopefully, this information proves to be beneficial! :)

For additional insights on utilizing flexbox, especially since you mentioned you're relatively new to CSS, I recommend checking out this resource here.

Answer №2

To center your grid items, simply add justify-content: center to your grid container. For a comprehensive guide on CSS grid, check out this helpful cheat sheet.

I made a quick adjustment to your codepen by adding justify-content: center; to the main element. It seems to be working fine now.

Here's an example:

* {
  box-sizing: border-box;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 200px);
  gap: 0.5rem;
  outline: 1px solid red;
  justify-content: center;
}

.container>div {
  width: 100%;
  background-color: gray;
  border-radius: 1rem;
  padding: 2rem;
}
<div class='container'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for centering a button within the body of a webpage

Despite my efforts, the alignment is not working as expected. The CSS I am using specifies that every <div> button inside the body should be centered both vertically and horizontally. However, it seems like something is preventing this from happeni ...

htmlcssflexbox

Tips for incorporating a PDF file into a website when the Adobe Reader add-on is disabled in Internet Explorer

I attempted to insert a PDF into my website using the <embed> tag. Unfortunately, it doesn't seem to be functioning properly in Internet Explorer when the Adobe Reader add-on is disabled. Is there a solution that will allow it to work even if th ...

javascriptjqueryhtmlcss

Increase the border at the bottom while hovering with React.js and the Material UI library

Can someone help me achieve a hover effect similar to the one in this question on Stack Overflow: Hover effect : expand bottom border I am attempting to create the same effect in React using makeStyles of Material UI. Here is my current code: const useSty ...

javascriptcssreactjsanimationmaterial-ui

jQuery slider - display unlimited images

Currently, I am encountering issues with a Flickity carousel of images. When an image/slide is clicked, a modal window opens to display a zoomed-in version of the image. The problem arises when there are more or fewer than 3 images in the slider — my cod ...

javascriptjquerycsscarousel

Hovering over a link causes malfunction in CSS drop-down menu

I have been struggling for hours to make this drop-down menu work, but it just won't cooperate. I want the list menu .dropdown to appear when you hover over .droptoggle. I'm including the entire page because I can't figure out what's wr ...

htmlcss

How can I create a responsive navigation bar in Bootstrap that displays a menu button and collapses the list items when the browser is resized?

I am looking to create a navigation bar that transforms into a menu button and collapses when the browser window is minimized. I would like it to function similarly to the one found at . While I have searched for tutorials, most only cover how to create ...

htmlcsstwitter-bootstrap

Tips for positioning HTML elements at the exact mouse location as it moves, without any delay?

Currently, I am in the process of developing a web-based drawing application that does not rely on using a canvas. My decision to avoid using a canvas is because I plan to incorporate CSS Keyframes into the HTML elements upon placement. This approach allow ...

javascriptjqueryhtmldrawing

Ways to detect the use of vue.js on a webpage without relying on vue-devtools

One way to determine if the page is utilizing Angular or AngularJS is by inspecting window.ng and window.angular. Is there a similar method to identify whether Vue is being used on the page directly from the console, without relying on vue-devtools? ...

javascripthtmlvue.js

Struggling to follow the placement of elements within the treeview component

I have successfully implemented a method to track the positions of Div elements on my webpage. However, I am facing an issue with keeping track of the position of a div within a modal popup extender that contains a TreeView. The position is always reset to ...

c#asp.nethtmlajaxmodalpopupextender

Achieving full opacity text within a semi-transparent div: a simple guide

Within my div, I have an a tag. I applied opacity:0.5 to the div, causing the text inside to also appear at 0.5 opacity. I am looking for a way to have the text display with opacity:1 inside my div that has an overall opacity of 0.5, without resorting to ...

cssopacity

help with coding in html and css

Hey there, I’m currently working on creating a loading page for my website, but I seem to be facing an issue with a white line appearing along the top and one running down the left side. If anyone could provide me with some assistance on this matter, I ...

htmlcss

Establish a background image that can be scrolled

Currently, I am working on a project and have created a fiddle that can be accessed here: https://jsfiddle.net/0g3u8452/1/ The image I am using is 1920x4000, and I want it to span the full width of the screen similar to setting background-size ...

htmlcss

Troubleshooting CSS compatibility issues in Firefox browser (or HTML rendering as plain text)

In a unique web page comparing two photos, the clicked one changes, but there's an issue in Firefox where HTML displays as text and links don't work. CODE:- * { box-sizing: border-box; } html { height: 100%; } body { height: 100%; mar ...

javascriptjqueryhtmlcssfirefox

What are the best methods for placing content within a box and ensuring it is responsive?

Having trouble solving a simple problem that seems to have an easy solution. The code I'm working on is meant to display multiple bubbles with similar content, but the text gets distorted due to using strange margin values to fit a specific resolution ...

htmlcss

Conceal a different div unless it includes

Hi everyone, I need help with a filter code snippet: $(".title").not(":contains('" + $("[name=filter]").val() + "')").hide() The issue I'm facing is that the .title class is nested within the .sortAll class along with many other divs. I w ...

javascriptjqueryhtml

Automatically increase the height of a text area as you type beyond the maximum width limit

Is there a way to dynamically expand the textarea width as I type beyond its maximum set width without displaying a horizontal scrollbar? Here is the HTML code in its rendered form: <textarea name="CatchPhrase" class="inp ...

javascriptjquerycssasp.net-mvcrazor

Updating a data table using POST values in ASP.NET: A step-by-step guide

I am working on updating values in my database and want to ensure that my script is functioning correctly. In order to check, I created a POST method to send the values and confirm they are being received. https://i.sstatic.net/h0IH5.gif Now, my question ...

javascripthtmljqueryasp.netasp.net-mvc

Reduce the size of your CSS files using Gulp through the .pipe method

Is it feasible to incorporate a plugin like clean-css to minify CSS every time a page is refreshed or saved? How can I chain it through pipes to ensure that the minified file ends up in the dist folder? Thank you for any assistance! Presented below is the ...

cssgulpbundling-and-minificationgulp-clean-css

Include a triangle shape at the top of a div container that has a background image using CSS

Struggling to add a point or triangle shape to my div with a background image, finding it difficult to create enough open space. This is the desired outcome: https://i.sstatic.net/LZVaF.png This is what I have implemented so far: <div class="bg"> ...

htmlcss

The view of the Google map is filled with numerous rounded tiles

Map divided into 3x3 tiles I am looking to customize the appearance of my map and remove all spaces and rounded corners to create a seamless, undivided visual. Is there a way to modify a map tile attribute to achieve this effect? Below is the code snippet ...

javascriptcssgoogle-mapsmatrixgoogle-api