Equal Width Columns in CSS Grid

CSS grid equal size columns

Your grid is fine - the content is the problem here.

You can try word-break or overflow as a workaround:

word-break solution:

.grid-container {  display: grid;  grid-template-columns: repeat(3, 1fr);  border: 2px dotted green;}
.content {  margin: 2em;  border: 2px solid red;}
.content p {  word-break: break-word;}

<div class="grid-container">  <div class="content">    <p>TESTTESTTESTTESTTESTTESTTESTTESTTES</p>  </div>  <div class="content">    <p>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>  </div>  <div class="content">    <p>TESTESTTESTTESTTESTTESTTESTTESTTESTTESTTES</p>  </div></div>

Equal column widths in CSS with container only as wide as children's combined width

You need to do like below:

.full-width-banner {
  background-color: #aaa;
  padding: 5px;
  margin-bottom: 5px;
}

.days-of-week {
  display: inline-grid; /* inline grid */
  grid-auto-columns: 1fr; /* all of them the same size */
  grid-auto-flow:column; /* a column flow */
}

.item {
  padding: 2px;
  border: 1px solid #ccc;
}

<div class="container">
  <div class="full-width-banner">Hi there!</div>
  <div class="days-of-week">
  <div class="item">Monday</div>
  <div class="item">Tuesday</div>
  <div class="item">Wednesday</div>
  <div class="item">Thurdsday</div>
  <div class="item">Friday</div>
  <div class="item">Saturday</div>
  <div class="item">Sunday</div>
</div>

CSS Grid layout with equal width sections columns and sections with borders/margins

Margin can be replaced with gap and border with individual border on your elements:

.grid {  display: grid;  grid-template-columns: auto auto 1fr;  row-gap:12px;  padding: 12px;  border: 2px solid red;}
.sectionWrap {  display: contents;}

.c1 {  border:3px solid purple;  border-right:1px solid blue;}.c2 {  border:3px solid purple;  border-right:1px solid blue;  border-left:1px solid blue;}.c3 {  border:3px solid purple;  border-left:1px solid blue;}

<div class="grid">  <div class="sectionWrap">    <div class="c1">      shorter text    </div>    <div class="c2">      2    </div>    <div class="c3">      3    </div>  </div>  <div class="sectionWrap">    <div class="c1">      longer text...............    </div>    <div class="c2">      2    </div>    <div class="c3">      3    </div>  </div></div><span>

Grid display columns have not equal width

In the ideal case, the two cells will have the same size.

But every cell has a minimum size! It is defined as the minimum content width. For example: the larger word, the larger button, or the larget image that it contains.

To avoid this, you should use minmax(0, 1fr) for each column definition. It allows you to say that 1fr, one fraction, is the maximum width of the column.

To sum up, use this code:

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

Here is a live demo of the problem and solution.

.grid {  display: grid;  grid-template-columns: 1fr 1fr;}
.grid--fix {  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
/* Demo styles */.grid {  grid-gap: 20px;  max-width: 400px;}
.cell {  background: hotpink;  text-align: center;  padding: 1em;}

<p>Exact same cells</p><div class="grid">  <div class="cell">Cell 1</div>  <div class="cell">Cell 2</div></div>
<p>The cells adapt their size to contain their content</p><div class="grid">  <div class="cell">Cell 1</div>  <div class="cell">Cell 2 is biiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiig</div></div>
<p>This behaviour could be disabled with <code>minmax(0, 1fr)</code></p><div class="grid grid--fix">  <div class="cell">Cell 1</div>  <div class="cell">Cell 2 is biiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiig</div></div>

Table with CSS Grid: give all columns of same type width of entry with widest content?

You said it at the beginning: "table design" so use table

.Table {
  display: table;
  width: 100%;
}

.Table__row {
  background-color: plum;
  display: table-row;
}

.Table__row > * {
  display: table-cell;
  white-space: nowrap;
}

.Table__row > *:not(.Table__day) {
  width: 50%;
}

.Table__row:nth-of-type(even) {
  background-color: lime;
}

<div class="Table">

  <div class="Table__row">
    <div class="Table__day">Mon</div>
    <div class="Table__time">10am</div>
    <div class="Table__title">Some event</div>
  </div>

  <div class="Table__row">
    <div class="Table__day">Tue</div>
    <div class="Table__time">12:30pm</div>
    <div class="Table__title">Another event</div>
  </div>

  <div class="Table__row">
    <div class="Table__day">Wed</div>
    <div class="Table__time">9:00am</div>
    <div class="Table__title">A different event</div>
  </div>

</div>

Equal width columns (fit-content)

Don't use a lsit for this task. IMHO compeltely wrong sue for a list.
grid-template-columns: repeat(3, min-content) will create 3 columns with minimal row-size.
You will have an unintend wordwrap. That can be countered with: white-space: nowrap;

Your grid doesnt work as you create sub-grids. They render independently from each other. You must only use one grid to achieve what you want.

.grid {
  display: grid;
  border: 1px solid #000;
  grid-template-columns: repeat(3, min-content);
  white-space: nowrap;
  padding: 2px;
}

.grid > div {
  border: 1px solid #000;
  padding: 2px;
  margin: 2px;
}

<div class="grid">

  <!-- first row -->
  <div>First column</div>
  <div>Second column</div>
  <div>Third column</div>
  
  <!-- second row -->
  <div>Data dynamic length.......</div>
  <div>Data dynamic length..</div>
  <div>Data dynamic length....</div>
  
  <!-- third row -->
  <div>Data dynamic length...</div>
  <div>Data dynamic length...</div>
  <div>Data dynamic length....</div>
  
  <!-- fourth row -->
  <div>Data dynamic length..</div>
  <div>Data dynamic length.......</div>
  <div>Data dynamic length.....</div>
  
</div>

Html grid-template-columns with same width and height

Update the following line inside your .grid-container:

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

This will set 4 columns of equal width. Some further reading on "fractional units" or "flexible length" units. So your full code may look like this:

body,html {  width: 100%;  height: 100%;  margin: 0;  padding: 0}
.grid-container {  display: grid;  grid-template-columns: 1fr 1fr 1fr 1fr;  grid-template-rows: auto auto;  grid-gap: 8px;  background-color: #fff;  padding: 1px;}
.grid-item {  background-color: #fafafa;  text-align: center;  padding: 0px 0;  font-size: 30px;  border: 0px solid #d2d2d7;  border-radius: 5px;}

<body style='background: #fff;'>
<div id='mainBg' class='grid-container' style='grid-auto-flow: row;margin-top:40px;height:calc(100% - 90px)'>
  <div class="grid-item">    <div style="height: 100%; width: 100%;"> </div>  </div>  <div class="grid-item">    <div style="height: 100%; width: 100%;"> </div>  </div>  <div class="grid-item">    <div style=" height: 100%; width: 100%;"> </div>  </div>  <div class="grid-item">    <div style=" height: 100%; width: 100%;">      <video width="100%" height="100%" controls>          </video>    </div>  </div>  <div class="grid-item">    <div style=" height: 100%; width: 100%;">      <video width="100%" height="100%" controls>
          </video>    </div>  </div></div></body>