CODEWITHSUNDEEP
htmlcssflexboxcss-grid
A. L
A. L

Reputation: 12639

css - using grid-auto-column to create dynamic widths

I'm trying to get my css grid to either be 2 blocks per row (if there are enough items) or a single block that spans the entire width. However, I can't seem to get it to work using grid-auto-column.

The top block is what I want it to look like, and the bottom block is what my current css is creating.

.flex1 {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.grid1 {
  display: grid;
  grid-auto-columns: minmax(50%, 100%);
}

div.height {
  height: 50px;
  width: 100%;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}
<div class="flex1">
  <div class="red height">
  </div>
  <div class="blue height">
  </div>
</div>
<div>
  <div class="green height">
  </div>
</div>

<br><br>

<div class="grid">
  <div class="red height">
  </div>
  <div class="blue height">
  </div>
  <div class="green height">
  </div>  
</div>

Upvotes: 2

Views: 110

Answers (2)

VXp
VXp

Reputation: 12058

Unfortunately, as far as I know, this isn't possible with the Grid, but it's a perfect and easy job for Flexbox, since you only need to handle one or single dimensional layout, in your case rows.

Below I'm giving you the shorter version of the desired result / behavior of flex-items, with less markup and styling:

.flex {
  display: flex;
  flex-wrap: wrap; /* enables wrapping of flex-items */
}

.flex > div {
  flex: 1 0 50%; /* grows full width if alone in a row / doesn't shrink / initial width set to 50%, i.e. can't be less than 50% of the parent's width */
  height: 50px;
}

.red {background: red}
.blue {background: blue}
.green {background: green}
.yellow {background: yellow}
<div class="flex">
  <div class="red"></div>
</div>
<br>
<div class="flex">
  <div class="red"></div>
  <div class="blue"></div>
</div>
<br>
<div class="flex">
  <div class="red"></div>
  <div class="blue"></div>
  <div class="green"></div>
</div>
<br>
<div class="flex">
  <div class="red"></div>
  <div class="blue"></div>
  <div class="green"></div>
  <div class="yellow"></div>
</div>

Upvotes: 1

לבני מלכה
לבני מלכה

Reputation: 16251

Use grid-template-areas: "a b" "c c";(change .grid1 to .grid as in html)

Also set grid-area:; to each div inside .grid

.flex1 {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.grid {
  display: grid;
  grid-auto-columns: minmax(50%, 100%);
  grid-template-areas: "a b" "c c";
}

div.height {
  height: 50px;
  width: 100%;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}
<div class="flex1">
  <div class="red height">
  </div>
  <div class="blue height">
  </div>
</div>
<div>
  <div class="green height">
  </div>
</div>

<br><br>

<div class="grid">
  <div class="red height" style="grid-area: a;">
  </div>
  <div class="blue height" style="grid-area: b;">
  </div>
  <div class="green height" style="grid-area: c;">
  </div>  
</div>

Upvotes: 1

Related Questions