How to Use CSS-Grid to Display an Unknown Number of Items, in Left-To-Right Reading Order, Over Two Rows

Can I use css-grid to display an unknown number of items, in left-to-right reading order, over two rows?

A CSS only solution where you need to write a bit of CSS to cover many cases. The below code covers up to 12 elements and the CSS isn't that big. You can keep adding more to cover more cases.

.box {
  display: grid;
  grid-auto-flow:columns;
  grid-auto-columns:1fr;
  counter-reset: divs;
  margin: 5px;
  border:1px solid;
}

.box div  {
  border:1px solid red;
}

.box div:before {
  counter-increment: divs;
  content: counter(divs);
}

.box div:nth-child(1):nth-last-child(2) ~ *,
.box div:nth-child(2):nth-last-child(3) ~ *,
.box div:nth-child(3):nth-last-child(4) ~ *,
.box div:nth-child(4):nth-last-child(5) ~ *,
.box div:nth-child(5):nth-last-child(6) ~ *,
.box div:nth-child(6):nth-last-child(7) ~ *
/*
.box div:nth-child(N):nth-last-child(N+1) ~ * 
*/{
   grid-row:2;
}

<div class="box">
  <div></div>
</div>

<div class="box">
  <div></div>
  <div></div>
</div>

<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div> 
  <div></div> 
</div>

<div class="box">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
</div>

Allow an unknown number of rows between header and footer grid items

Consider making the dynamic area between the header and the footer a nested grid.

#grid {
    display: grid;
}

.big {
    grid-template-columns: repeat(3 1fr);
    grid-template-rows: auto;
    grid-template-areas:
    "header header header"
    "misc misc misc"
    "flexible flexible flexible" <-- unknown number of rows inside
    "footer footer footer";
}

flexible {
   display: grid;
   grid-auto-rows: 60px; /* or whatever */
   grid-template-columns: 1fr;
}

CSS grid items exiting grid with <input>s but acts correctly with <div>s

Because Inputs have an initial width (read more here) it is needed to reset these by setting the width to the 100% of its parent:

.table > * {
    width: 100%;
}

Another solution or best to work with the above together, is to prevent the cols from overflowing by setting and overflow value. The overflowing happens only because there is not enough space.

.table > * {
    overflow: hidden;
}

I would also suggest giving every child a class instead of using the asterisk (*).

Make Dynamic Grid Items Start From Left

You can mix grid and flex rules in some instances.
For this one, try:

justify-content: flex-start

When you have row-oriented items, it controls their horizontal alignment.

align-items: center will - by default - given the default flex rule is rows - center items vertically - but not horizontally.

You can read more on it here:

https://www.w3schools.com/csSref/css3_pr_justify-content.asp

CSS Grid make the column gap identical

Flexbox now offers a gap property. We could use that along with multiple rows of content to make it work.

You should use flexbox for the flexible-sizing. It is because grid is meant to be table-like. And it does not really want to have you mess around with the spaces too much. It is always aligned to some raster.

It should work accross all major browsers (see: https://caniuse.com/?search=gap) but you could always fallback to using paddings instead or space the items evenly and make the rows wide enough so that the available space is equal to the n * n_size + (n-1) * gap.

#container {
  border: 1px dashed black;
  /* just for visuals */
  display: flex;
  align-items: center;
  justify-content: center;
}

#innerContainer {
  display: flex;
  flex-flow: column nowrap;
  gap: 10px;
}

.row {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.item {
  width: 90px;
  height: 90px;
  background-color: blue;
}

<div id="container">
  <div id="innerContainer">
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="row">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
</div>

Align React Material UI Grid with different number of rows per column

I check your code and the issue is that you are using two different container but as per your requirement you can make it using one main container and after you can use the second container.

I made a demo for you.

<div className="App">
  <Grid container sx={{ m: 1, p: 2 }}>
    <Grid
      item
      xs={6}
      style={{
        backgroundColor: "red",
        display: "flex",
        alignItems: "center"
      }}
    >
      Display a MUI Icon over two rows instead of one
    </Grid>
    <Grid item xs={6} style={{ backgroundColor: "green" }}>
      <Grid container direction="column">
        <Grid item>Top right</Grid>
        <br />
        <br />
        <Grid item>Bottom right</Grid>
      </Grid>
    </Grid>
  </Grid>
</div>

How to stack unknown number of generic content items in a CSS Grid template area

You can approximate it like below:

body {
  margin: 0;
}

.container {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr max-content;
  grid-auto-flow: dense;
  gap: 0 40px; /* set only column gap */
}

.header {
  grid-row: 1;
  grid-column: 1/-1;
}

.graphic {
  grid-column: 2;
  grid-row: 2/ span 100; /* this will do the trick */
}

.container *:not(.graphic,:last-child) {
  margin-bottom: 40px; /* replace the row gap */
}

/* For presentation only, no need to copy the code below */

.container * {
  border: 1px solid red;
  position: relative;
  margin: 0;
}

<div class="container">
  <div class="header">Full-width title</div>
  <div class="graphic">Some Graphic here</div>
  <h4>Random element here</h4>
  <p>Random element here</p>
  <p>Random element here</p>
</div>