CSS grid min span 3 and if class object is only object in grid row fill all grid elements in row

Question

I am using CSS grid to design my web application. I want define that a class must have a min grid-column span of 3 frames and should span over the whole grid row, if the respective class object is the only one in the respective (in this case last row).

Grid Definition

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, auto));
  grid-template-rows: 1fr min-content;
  grid-gap: 50px;

}

Respective Definitions

.overalldata {
  grid-column: auto / span 3;
}

.clustergraph {
  grid-column: auto / span 6;
  justify-items: center;
}

.userinfoboard {
  grid-column: auto / span 3;
  justify-items: center;
  align-self: center;;
}

My Browser on full width is allowing 19 columns. If I downsize the window, so that only 11 columns are allowed, the userinfoboard class object should span over the full width of the window, as it is the only object in its grid row.

How can I accomplish that?

I tried an answer for a question that seems close to my issue, but it is missing the characteristic of PSEUDO: min-span: span 3:

.userinfoboard {
  grid-column: 1 / -1;
  justify-items: center;
  align-self: center;;
}

Thank you very much!

don't think there is a "PSEUDO: min-span: span 3" in CSS grid... maybe a flexbox solution with relatively specified `flex-basis` will suit your question... — kukkuz, May 09 '19 at 14:17
I dont think you can. There is no CSS method of selecting an element by unknown last row let aone whether it's the only element in this row. — Paulie_D, May 09 '19 at 14:36
It must not be in the last row. But if the respective object is the only one in its grid row, then it should span over all grid elements. @Paulie_D — Mike_H, May 09 '19 at 14:39
Regardless, CSS can't detect rows and so it has no method of determining whether the item is the only one on it. — Paulie_D, May 09 '19 at 14:40
a flexbox possibility manipulating `flex-basis` and `max-width` (also taking into account the gutter between the items): https://jsfiddle.net/hsu0v23y/ fiddle with it and let me know if it suits your problem - will convert this to answer if it does — kukkuz, May 10 '19 at 13:51
@kukkuz It perfectly fits! However, why is only the last div spanned over the whole width? I need every element that is the only one in its "row" to be spaced over the whole width, like the last row. :) — Mike_H, May 10 '19 at 16:17
I thought only `userinfoboard` should have that behavior, try this: https://jsfiddle.net/2a9y7vrk/ (just removed the `max-width`s) — kukkuz, May 10 '19 at 16:22
@kukkuz Sorry my bad! Your previous solution totally fits my idea! You are right. Only userinfoboard should have that behavior. — Mike_H, May 10 '19 at 16:25

kukkuz · Accepted Answer · 2019-05-10T17:20:02.857

You can use a flexbox by manipulating flex-basis and max-width (also taking into account the gutter between the items):

to create a grid gap you can apply a margin to the flex items and apply negative margin on the container,
add flex-grow: 1 to all flex items and set calc(n * var(--column) + 2 * var(--gutter)) to span n columns,
restrict overalldata and clusterdata from growing by specifying a max-width value same as flex-basis.

You can see that userinfoboard will now span a minimum of three columns - see demo below:

.wrapper {
  overflow: hidden;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  --column: 100px; /* size of one column */
  --gutter: 20px; /* size of gap between columns */
  margin: -10px; /* remove space between container and items */
}

.grid > * {
  background: lightblue;
  border: 1px solid cadetblue;
  height: 50px;
  margin: 10px;
  flex-grow: 1; /* grow items */
}

.overalldata { /* span three columns */
  flex-basis: calc(3 * var(--column) + 2 * var(--gutter));
  max-width: calc(3 * var(--column) + 2 * var(--gutter));
}

.clustergraph { /* span six columns */
  flex-basis: calc(6 * var(--column) + 5 * var(--gutter));
  max-width: calc(6 * var(--column) + 5 * var(--gutter));
}

.userinfoboard { /* span miniumum three columns */
  background: beige;
  flex-basis: calc(3 * var(--column));
}

<div class="wrapper">
  <div class="grid">
    <div class="overalldata"></div>
    <div class="userinfoboard"></div>
    <div class="clustergraph"></div>
    <div class="overalldata"></div>
    <div class="userinfoboard"></div>
    <div class="clustergraph"></div>
    <div class="userinfoboard"></div>
  </div>
</div>

CSS grid min span 3 and if class object is only object in grid row fill all grid elements in row

1 Answers1