How to create equal dimensions Flexible Grid Box

Hello my friends:
I am attempting to implement flexible centered grid boxes.
For example: Assuming I have 12 grid boxes, I need the boxes to be centered with equal dimensions and to grow with equal dimensions when the page expands and same when the page retracts or shrinks. I need the grid boxes to be centered regardless of the viewport.

Problem:
I am currently using fixed width and height because I cannot get the grid to have equal dimensions and expand. Also, I cannot center the grid and when the page shrinks, I have the wrapper with space on the right as illustrated in the screenshot below.

So how do I get the grid boxes to be centered and when they wrap to have no spaces in the container?
The only way I know to do this is with Media Queries. I could also wrap the grid container in a flex box but when I do that and try to center the items, then the grid items all become one long vertical stack.

CSS/HTML:

    <style>
        div.grid-container{
            display: grid;
            row-gap: 20px;
            column-gap: 20px;
            grid-template-columns: repeat(auto-fit, 300px);
            grid-template-rows: repeat(10, 300px);
            padding: 10px;
            background-color: aqua;
        }

        div.grid-item {
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(0, 0, 0, 0.8);
            padding: 20px;
            font-size: 30px;
            text-align: center;
        }
    </style>

<body>
<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
    <div class="grid-item">10</div>
    <div class="grid-item">10</div>
</div>
</body>

Hi @amplitude64 — Welcome to these forums. :slight_smile:

Not completely sure what you’re looking for here, but one idea I’ll put forward is to use aspect-ratio. Does this demo at least do what you want? If so, let’s look at other ways to do it.

.grid-container{
    display: grid;
    row-gap: 20px;
    column-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    padding: 10px;
    background-color: aqua;
}

.grid-container div {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    font-size: 30px;
    text-align: center;
    aspect-ratio: 1;
}
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>10</div>
  <div>10</div>
</div>

Here’s another version that doesn’t use aspect-ratio, so is prolly better:

@ralphm Thank you so, so much for taking the time to respond.
This is precisely what I am looking for and can build further on this.

I was going to ask you, how do I make these 12 grid boxes stack equally, for example, have the same number above and below and they can grow regardless of the viewport but there is never a break causing them to become uneven.

Here is a visual example:

You can only get that even layout with grid if you always have the same number of items in each row. You could maybe create a lot of media queries to force the issue in various ways, but it’s messy and not a great way to design a layout.

You could instead use display: flex, as that can be used to prevent gaps, although the gaps will be filled by the boxes in the last line stretching to fill the space, which you also probably don’t want.

So you need to think carefully about what you really want here.

Here’s how you can do it with some fairly minor media queries, as long as you always have 12 boxes:

The various column counts are fractions of 12 (2, 3, and 4), but you could also do 6 for really wide screens (grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;), and go down to 1 column on small screens if you like (grid-template-columns: 1fr;).

NOTE: rather than write lines like this:

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;

we can be a bit more efficient by writing this:

grid-template-columns: repeat(6, 1fr);

That is, with repeat() we can write the number of columns we want followed by their size.

1 Like