Equal width columns in CSS Grid

The common answer of repeat(3, 1fr) is not quite correct.

This is because 1fr is about the distribution of available(!) space. This breaks as soon as the content becomes bigger than the track size. By default, it does not overflow and adjust the column width accordingly. That's why not all 1fr are guaranteed to be of equal width. 1fr is actually rather just a shorthand for minmax(auto, 1fr).

If you really need the columns to be the exact same width you should use:

grid-template-columns: repeat(3, minmax(0, 1fr));

minmax(0, 1fr) allows the grid tracks to be as small as 0 but as large as 1fr, creating columns that will stay equal. But, be aware that this will cause overflows if the content is bigger than the column or cannot be wrapped.

Here is an example that demonstrates the difference.

@Michael_B's answer is almost there.

.grid-container {
   display: grid;
   grid-auto-columns: minmax(0, 1fr);
   grid-auto-flow: column;
}

Gives you one row of equally sized columns in Chrome, Firefox, and Safari as of writing.

Define this on your grid container. Sets up three columns of equal width.

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

Try this:

.grid-container {
   display: grid;
   grid-auto-columns: 1fr;
}

.grid-items {
   grid-row: 1;
}

Otherwise, here's a demo that may be useful: jsFiddle

To learn about the fr unit, see these posts:

• Does CSS Grid have a flex-grow function?
• The difference between percentage and fr units in CSS Grid Layout

The question asks for arbitrary number of columns, not 3! So use this:

.grid-container {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}
.grid-container > * {
  overflow: hidden;
}

This way, its children (selected using ">*" in css) do not need to have any specific class or even be div.

Example: https://codepen.io/dimvai/pen/RwVbYyz

This allows the columns to distribute better, and the columns are the same size regardless of whether the size of the items does not adjust.

.row {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(33.33%, 1fr) );
}
.item {
  grid-column: span 1;
}

Full-Width with Responsive Wrapping

None of these answers were full width or wrapped to a new row when downsizing on mobile. This is probably what you are looking for if you want something similar to bootstrap. Note the 200px is the lower bound where wrapping to a new row will occur.

.grid-container {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

How about this?

.row {
  display: grid;
  grid-template-columns: repeat(3, calc(100% / 3));
}

Here is simple answer(at least in my perspective). I got this issue above answers not helped me. Here the code to divide 'div' into equal width and with required number of columns.

//CSS

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto; // no of 'auto's will be number of columns here it's 3
}

//HTML
<div class="grid-container">
    <div></div>
    <div></div>
    <div></div>
</div>

more info on grid can be seen here W3Schools

You can try to distribute each list to take all the space that the parent grid has for it, instead of allowing the grid to automatically distribute the space based on what each list has as content.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid-container .list {
  width: 100%;
}

<div class="grid-container">
  <div class="list">a</div>
  <div class="list">b</div>
  <div class="list">c</div>
</div>

If you want same width in row and don't want wrap, because etc., you want scroll on X. U can use this:

Parent of Container

overflow-x: auto

Container

display: grid;
gap: 0.6rem;
grid-auto-columns: minmax(8rem, 1fr);
grid-auto-flow: column;
inline-size: fit-content; // max-content
margin-inline: auto;

Children, everything what you want...

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid-container .list {
  min-width: 0;   <-----------
}