Getting Columns to Wrap in CSS Grid

Getting columns to wrap in CSS Grid

Neither HTML or CSS have any concept of when descendants of a container wrap.

Essentially, the browser renders the document during an initial cascade. It does not reflow the document when a child wraps.

Therefore, to change the number of columns, you will need to set a width limit somewhere along the line or use media queries.

Here's a more in-depth explanation: Make container shrink-to-fit child elements as they wrap

If you can define a column width, then grid layout's auto-fill function makes wrapping easy.

In this example, the number of columns is based entirely on the width of the screen:

#grid {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* see notes below */  grid-gap: 1em;}
#grid > div {  background-color: #ccddaa;}

<div id="grid">  <div>text</div>  <div>text</div>  <div>text</div>  <div>text</div>  <div>text</div>  <div>text</div>  <div>text</div>  <div>text</div>  <div>text</div></div>

CSS grid wrapping

Use either auto-fill or auto-fit as the first argument of the repeat() notation.

<auto-repeat> variant of the repeat() notation:

repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

`auto-fill`

When auto-fill is given as the repetition number, if the grid
container has a definite size or max size in the relevant axis, then
the number of repetitions is the largest possible positive integer
that does not cause the grid to overflow its grid container.
^{https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fill}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Wrapping css grid and streching one grid item to take up all empty columns

It can be achieved with display: flex. In addition, it is necessary to use flex-grow property.

As mdn says about flex-grow:

The flex-grow CSS property sets the flex grow factor of a flex item's
main size

* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-element {
  width: 10%;
  border: 1px solid #000;
  flex-grow: 1;
  min-height: 120px;
  box-sizing: border-box;
  margin: 0 5px 10px;
  justify-content: space-between;
  text-align: center;
}

<div class="flex-container">
    <div class="flex-element">
      1
    </div>
    <div class="flex-element">
      2
    </div>
    <div class="flex-element">
      3
    </div>
    <div class="flex-element">
      4
    </div>
    <div class="flex-element">
      5
    </div>
    <div class="flex-element">
      6
    </div>
    <div class="flex-element">
      7
    </div>
  </div>

Wrap text onto other side of a grid cell with CSS

Finally, I managed to deploy a solution of my own.

I removed the suggested inner div row, column and I operated on the div class="cell" directly.

On CSS I used the column attributes to get the text displayed as I need. Afterwards I formatted the text to be visible in its entirety.

This solution is the best fit for me, as the page is meant to be static (it will serve as a dashboard and not as a website, therefore I count with some rigidity).

.cell {
  justify-content: center;
  column-count: 3;
  align-items: center;
  font-family: Arial;
  background: white;
  width: 848px;
  height: 310px;
  color: black;
  font-size: 16px;
  margin: 5px;
  overflow-wrap: break-word;
  /*Column Style*/
  column-count: 3;
  column-gap: 40px;
  column-rule-width: 440px;
}

Is it possible to use a fixed min and max width for columns in a CSS grid which are repeating and wrappable?

In order to achieve what you're trying to do, you'll need to work on both the container and the child.

On the container, you'll set a min-width to 100px and a max that should be the size of the child:

.gridContainer {
  grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
}

And on each child, you'll have a fixed width, but a max-width of 100% so it shrinks if needed:

.child {
  width: 200px;
  max-width: 100%;
}

Updated fiddle: https://jsfiddle.net/7exd5hom/

Getting Columns to Wrap in CSS Grid