CODEWITHSUNDEEP
csssasscss-grid
Nespony
Nespony

Reputation: 1371

Have equal-sized elements in css grid?

I made a grid with css grid through sass. I want there to be 40 squares of equal size in an overall square shape. However the squares on the right hand side keep autosizing to be much smaller than the others.

The grid is here: https://codepen.io/nessaek/pen/rJmWrv

The key sizing details are here:

ul {
   display: grid;
    grid-template-columns: repeat(10, 1vw);
    grid-template-rows: repeat( 10, 1vw);
    justify-content: center;
    align-content: center;
    grid-gap: 1rem;
    min-height: 90vh;
    list-style: none;
    margin: 0 0 2vw;
    padding: 0;
    font-size: calc(2vw + 10px);
  }

Weirdly when I only have 16 squares, the squares all the same size. But when there are 40 the squares change to be unequal. Grateful for any advice in making all the squares equal size! Many thanks,

Upvotes: 1

Views: 66

Answers (1)

Gibin Ealias
Gibin Ealias

Reputation: 2859

As you have 11 columns and 11 rows, you may set the ul as,

grid-template-columns: repeat(11, 1vw);
grid-template-rows: repeat(11, 1vw);

Please let me know whether this helps.

Upvotes: 1

Related Questions