How to put everything into 1 grid
when using auto-fit

These 3 grid containers use:

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

When using auto-fit you need one specific size measurement. The 1fr is telling the grid to fill up the remaining space.

This means you can resize the whole grid block down to a single column of 150 pixels wide.

box 01
box 02
box 03
box 04
box 05
box 06
box 07
box 08
box 09
box 10
box 11
box 12
box 13
box 14
box 15
box 16
box 17
box 18
box 19
box 20
box 21
box 22
box 23
box 24
box 25
box 26

With the first box set to grid-column: 1 / 8; the grid will break at 8 x 150px or 1200px.

box 01
box 02
box 03
box 04
box 05
box 06
box 07
box 08
box 09
box 10
box 11
box 12
box 13
box 14
box 15
box 16
box 17
box 18
box 19
box 20
box 21
box 22
box 23
box 24
box 25
box 26

The fix is to set the first box to grid-column: 1 / -1;. This tells the first box to stretch from the first to the last grid track, regardless of the number of columns. And you can apply this to the last cell pretty easily too.

box 01 (header)
box 02
box 03
box 04
box 05
box 06
box 07
box 08
box 09
box 10
box 11
box 12
box 13
box 14
box 15
box 16
box 17
box 18
box 19
box 20
box 21
box 22
box 23
box 24
box 25
box 26 (footer)

Extra info

To vertically center the text in the boxes:

  1. For undefined height: add padding and use text-align: center;
  2. For defined height: make the line-height the same as the height
  3. Alternative: display: table-cell; and vertical-align: middle;

To resize the boxes by dragging the bottom right corner use: resize: both;. Other values are: none, horizontal, vertical. Use with overflow: auto;.

To skew the text in the header: transform: skewY(-5deg)

To use an image to cover a box (like backgrounds) use object-fill: cover;

Fonts used on this page: Vast Shadow for headings and Patua One for everthing else.