Fixed Width Variable Height Grid CSS

A grid with items having fixed width and height

Flexbox

In your flex version you say:

The cells have a fixed height and width.

No they don't. The width is not fixed.

An initial setting of a flex container is flex-shrink: 1. This means that flex items can shrink from their initial size in order to remain inside their container.

The property applies along the main axis, which means that in a row-direction container, flex-shrink affects width.

Here's your code, with flex-shrink disabled:

$(document).ready(() => {  for (let i = 0; i < 10; i++) {    const parent = $("<div></div>");    parent.addClass("p");    for (let j = 0; j < 10; j++) {      const child = $("<div></div>");      child.addClass("c");      parent.append(child);    }    $("#page").append(parent);  }});

.p {  display: flex;  margin-top: 1px;}
.c {  flex-shrink: 0; /* new */  width: 30px;  height: 30px;  margin-left: 1px;  background: red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="page"></div>

fixed width variable height grid css

The easiest option is to use the jQuery Masonry plugin.

If you want to do it via CSS only, you have to float large, equal width columns and then add your variable height elements within them.

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

And the CSS would look like so:

.parent {
  float: left;
  width: 200px; /* adjust as needed */
}

.child {
  /* these are variable height */
}

CSS Grid - Auto height rows, sizing to content

You can try minmax(min-content, max-content) ^ref

div {
  border: 1px dotted black;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(min-content, max-content);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(min-content, max-content);
}

.left {
  background-color: red;
}
 
.right {
  background-color: green;
}

<div class="grid-2">
      <div class="grid-2">
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
        <div class="left">L</div>
     </div>
     <div class="grid-3">
         <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
        <div class="right">R</div>
     </div>
</div>

Divide sections one with fixed height and one variable with flexbox

In order for the bottom section to fill up the remaining area, you could use the calc() function.

Since your top section has a fixed height, we can se the bottom section like this:

.top-section {
  // Change the X
  height: X; 
}

.bottom-section {
  // X is the height of the top section
  height: calc(100% - X); 
}

Flexbox for fixed-height container that wraps items and has dynamic width

You can use grid's autofill property, so you don't need to know the number of columns.

  .my-container {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(auto-fill, minmax(45px, 1fr));
    background-color: rgb(33, 150, 243);
    padding: 15px;
    height: 600px;
    width: fit-content;
}

.my-item {
    width: 250px;
    height: 25px;
    color: white;
    padding: 10px;
    flex: 0 0 auto;
}

JSFiddle Demo: https://jsfiddle.net/92sak0zc/6/

CSS grid - calculated responsive layout overflows fixed-width parent container

I'd suggest that the approach using a media query is the correct way to go, in order to modify the --fw custom property of the .grid-container to fit the circumstances of the current display:

@media screen and (min-width: 1320px) {
  .grid-container {
    --fw: 1320px;
  }
}

.wrapper {
  width: 1320px;
  margin: 0 auto;
  max-width: 100%;
  overflow: hidden;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.grid-container {
  --fw: 100vw;
  --w1: calc((var(--fw) - 40px + (var(--ratio) * 10px)) / 2);
  /* the width of the big rectangle */
  --ratio: calc(678 / 399);
  --h1: calc(var(--w1) / var(--ratio));
  /* the height of the big rectangle */
  --h: calc((var(--h1) - 10px) / 2);
  /* the height and width of the smaller rectangles */
  --w: calc(var(--h) * var(--ratio));
  display: inline-grid;
  gap: 10px;
  grid-template-areas: "A B C""A D E";
  grid-template-columns: var(--w1) var(--w) var(--w);
  grid-template-rows: auto auto;
  box-sizing: border-box;
  border: solid 10px black;
  background-color: black;
  margin: 0 auto;
}

.grid-container > div {
  height: var(--h);
  width: var(--w);
}

img {
  width: 100%;
  height: 100%;
}

.grid-container > :nth-child(1) {
  width: var(--w1);
  height: var(--h1);
  grid-area: A;
}

.grid-container > :nth-child(2) {
  grid-area: B;
}

.grid-container > :nth-child(3) {
  grid-area: C;
}

.grid-container > :nth-child(4) {
  grid-area: D;
}

.grid-container > :nth-child(5) {
  grid-area: E;
}

@media screen and (min-width: 1320px) {
  .grid-container {
    --fw: 1320px;
  }
}

<div class="wrapper">
  <div class="grid-container">
    <div class="grid-item">
      <img src="https://picsum.photos/id/1015/678/399">
    </div>
    <div class="grid-item">
      <img src="https://picsum.photos/id/1015/678/399">
    </div>
    <div class="grid-item">
      <img src="https://picsum.photos/id/1015/678/399">
    </div>
    <div class="grid-item">
      <img src="https://picsum.photos/id/1015/678/399">
    </div>
    <div class="grid-item">
      <img src="https://picsum.photos/id/1015/678/399">
    </div>
  </div>
</div>