All Widths Set to Width of Widest Element

All widths set to width of widest element

Yes. This can be done with pure CSS.

Here's a simple solution:

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

<div class="container">   <button>a normal button</button>   <button>tiny</button>   <button>a really, really, really wide button</button></div>

Getting flex to have equal width columns to the widest element

You are almost good, you should use inline-flex instead of flex to have the shrink-to-fit behavior thus the biggest button will define the width of the container and all the elements are by default stretched to that width:

.container {  margin-top: 15px;  text-align:center;}
.buttons {  display: inline-flex;  flex-direction: column;  padding: 15px;  background-color: gray;}
.buttons .btn {  display: block;  margin-bottom: 11px;}
.buttons .btn:last-child {  padding-bottom: 21px;}
a.btn {  display: inline-block;  text-align: center;  height: 35px;  padding: 0 20px;  min-width: 128px;  font-weight: bold;  color: #fff;  background-color: orange;  border: 2px solid #000;  white-space: nowrap;  text-decoration: none;}

<div class="container">
  <div class="buttons">    <a href="" class="btn alt">Plumbing</a>    <a href="" class="btn alt">Electrical</a>    <a href="" class="btn alt">Groundskeeping</a>    <a href="" class="btn alt">Construction</a>    <a href="" class="btn alt">Cleaning</a>    <a href="" class="btn alt">Security</a>    <a href="" class="btn alt">Trades Assistant</a>    <a href="" class="btn alt">General Duties</a>  </div>
</div>

Set all elements to the width of the widest in set

Alternatives to looping to get the widest:

// Using modern JavaScript:
const widest = Math.max(...$("#mySet span").map((i, span) => $(span).width()));

// Using older JavaScript:
var widest = Math.max.apply(
  null,
  $("#mySet span").map(function() {
    return $(this).width();
  })
);

And then $("#mySet span").width(widest); to set the widths of all spans in one go.

Make all column widths equal to the length of the widest column

Jquery solution

get the maximum width of all items:

var maxWWidth =Math.max.apply(Math, $('.item').map(function(){ return $(this).width(); }).get());

set it for all items

$('.item').width(maxWWidth);

check snippet:

$(function(){
var maxWWidth =Math.max.apply(Math, $('.item').map(function(){ return $(this).width(); }).get());
$('.item').width(maxWWidth);
});

.container {
  width: 400px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max-content, 100px));
  grid-gap: 5px;
}

.item {
  background: yellow;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="item">1 I am a very very wide cell</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</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>