Expanding Cells in CSS Grid Layout

Expand CSS grid cell

Use grid-template-columns: auto 1fr auto.

This seems a bit odd as 1fr seems to be a somewhat fixed length and auto seems to represent a dynamic length. But check out the values for grid-template-columns

<flex>

Is a non-negative dimension with the unit
fr specifying the track's flex factor. Each <flex>-sized track
takes a share of the remaining space in proportion to its flex factor.
When appearing outside a minmax() notation, it implies an automatic
minimum (i.e. minmax(auto, <flex>)).

auto

As a
maximum represents the largest max-content size of the items in that
track.
As a minimum represents the largest minimum size of items in that
track (specified by the min-width/min-height of the items). This is
often, though not always, the min-content size.
If used outside of minmax() notation, auto represents the range
between the minimum and maximum described above. This behaves
similarly to minmax(min-content,max-content) in most cases.

So auto is practically just max-content and 1fr will take all the remaining space.

.post {
  display: grid;
  gap: 2rem;
  grid-template-columns: auto 1fr auto;
}

.post div:nth-child(1) {
  grid-area: 1 / 1;
}
.post div:nth-child(2) {
  grid-area: 1 / 2 / 1 / 2;
}
.post div:nth-child(3) {
  grid-area: 1 / 3;
}

<div class="post">
  <div class="post__id">
    <p>001</p>
  </div>
  <div class="post__body">
    <a href="..."><p>Lorem ipsum</p></a>
    <p>text…</p>
  </div>
  <div class="post__date">
    <p>01.01.2021</p>
  </div>
</div>

Expanding cells in CSS grid layout

You can rely on implicit grid creation:

.main {
  display: grid;
  grid-template-columns: 2fr;
  grid-auto-columns:1fr; /* this will trigger when you add the "right" element */
  grid-auto-flow:column;
  margin:5px;
}

.left {
  background-color: green;
}

.right {
  background-color: orange;
}

<div class="main">
  <div class="left">Left</div>
  <div class="right">right</div>
</div>

<div class="main">
  <div class="left">Left</div>
</div>

CSS Grid Item Expanding Despite Constraints

you didn't define any sizing for your columns so the content will define this and you will have a different layout each time you update the content.

You need to define an explicit size for the columns:

.grid-container {

  height: 100vh;

  min-height:600px;

  display: grid;

  grid-gap: 0;

  grid-auto-columns:1fr; /* this should do the job and force all the columns to be equal */

  /* you can also try minmax(0,1fr) (related: https://stackoverflow.com/a/52861514/8620333) */

}

.grid-item {

  position: relative;

  display: flex;

  padding: 0;

  border-radius: 10px;

  margin: 10px;

  background-color: #f6f6f6;

}

.g-1 {

  margin-top: 20px;

  margin-left: 20px;

  background-color: white;

  grid-column: 1/10;

  grid-row: 1/2;

}

.g-2 {

  margin-top: 20px;

  margin-right: 20px;

  margin-bottom: 20px;

  grid-column: 10/14;

  grid-row: 1/40;

}

.g-3 {

  margin-left: 20px;

  background-color: #eaf0ff;

  grid-column: 1/4;

  grid-row: 2/12;

}

.g-4 {

  background-color: #ebe3ff;

  grid-column: 4/7;

  grid-row: 2/12;

}

.g-5 {

  background-color: #dff6db;

  grid-column: 7/10;

  grid-row: 2/12;

}

.g-6 {

  margin-left: 20px;

  margin-bottom: 20px;

  grid-column: 1/5;

  grid-row: 12/40;

}

.g-7 {

  grid-column: 5/10;

  grid-row: 12/28;

}

.g-8 {

  margin-bottom: 20px;

  grid-column: 5/10;

  grid-row: 28/40;

}

<div class="grid-container">

  <div class="grid-item g-1">

    <h1 class="header">Hello, Levi</h1>

  </div>

  <div class="grid-item g-2"></div>

  <div class="grid-item g-3">

    <h2>Testing Size</h2>

  </div>

  <div class="grid-item g-4"></div>

  <div class="grid-item g-5"></div>

  <div class="grid-item g-6"></div>

  <div class="grid-item g-7"></div>

  <div class="grid-item g-8"></div>

</div>

Expanding a CSS grid area into another grid area when the latter is empty

If you don't have to use grid-area, flexbox gives intended result. No need to use float.

/* Based on example from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas */

.content {

    flex-grow: 1;

}

.sidebar {

    flex-grow: 1;

}

.wrapper {

    display: flex;

}

* {box-sizing: border-box;}

.wrapper {

    border: 2px solid #f76707;

    border-radius: 5px;

    background-color: #fff4e6;

    max-width: 940px;

    margin: 0 auto 30px auto;

}

.wrapper > div {

    border: 2px solid #ffa94d;

    border-radius: 5px;

    background-color: #ffd8a8;

    padding: 1em;

    color: #d9480f;

}

<!-- First grid - works fine -->

<div class="wrapper">

    <div class="content">Content</div>

    <div class="sidebar">Sidebar</div>

</div>

<!-- Second grid - content should expand to fill the area that would be used by sidebar -->

<div class="wrapper">

    <div class="content">Content</div>

</div>

Grid item not expanding with inner content height

You have grid-template-rows: 24px 20px 44px.

This means that the second row, which contains your metadata div, is limited in height to 20px.

Try this: grid-template-rows: 24px auto 44px.

CSS grid expand a single column in a row

You can't have different heights for the same row.

How would you target the different areas of the row? It doesn't work.

A row has a uniform height.

You can, however, adjust the height of grid items in a row.

Because the default height for grid items is stretch (giving them the full height of the row), simply override that setting with align-items: start (causing them to shrink-to-fit the content).

body {

  display: grid;

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

  align-items: start;

}

span {

  border-style: solid;

}

<span class="item1">item 1</span>

<span class="item2">item 2<br><br>expanded</span>

<span class="item3">item 3</span>

Is there a way to only expand the height of one CSS grid row/column?

What you are looking for is Masonry but it´s still experimental
and doesn´t have a wide support.
If you are planning to display static content, with fixed sizes, you can adjust size of each grid box proportion using Mosaic technique.
To moderate the issue you can
center vertically all boxes in their rows by adding align-items: center; to parent element.
Alternatively, if your layout allows it,
you may use flexbox with vertical direction, but if width of the
elements isn´t constant you will encounter the same issue as before:

.content{
    display:flex;
    flex-wrap: wrap;
    flex-direction: column;
    border:1px solid red;
    height: 100vh;
    align-content:center;
}

.green{
    height:30vh;
    width: 30vw;
    background-color: green;
    border-radius: 10px;
    border:3px solid black;
}

.box4{
    height:45vh;
}

        <div class="content">
            <div class="green box1"></div>
            <div class="green box2"></div>
            <div class="green box3"></div>
            <div class="green box4"></div>
            <div class="green box5"></div>
        </div>

Row height expanding in CSS Grid

Here's a rough revision with CSS Grid:

jsFiddle demo

div {

  display: grid;

  grid-template-columns: repeat(10, 10vw);

  grid-template-rows: repeat(10, auto);

  height: 100vh;

  align-items: center;

}

span:nth-child(1) {

  grid-column: 1 / -1;

  font-size: 10vw;

  align-self: end;

  white-space: nowrap;

}

span:nth-child(2) {

  grid-column: 1 / 6;

  font-size: 10vw;

}

span:nth-child(3) {

  grid-column: 6 / -1;

  grid-row: 2 / 3;

  font-family: arial;

  font-size: 2vw;

}

body {

  margin: 0;

  padding: 0 3em;

  font-family: georgia;

  background-color: #222;

  color: #fff;

}

<div>

  <span>Deliver a unique</span>

  <span>experience</span>

  <span>We can work together today<br>to create an exceptional product<br>that screams to the world:<br><br><strong>I belong to you.</strong></span>

</div>