html – Receptive grid based upon viewport dimension making use of minmax()

What I am attempting to do, making use of CSS just and also preferably without media inquiries, is develop a grid that is constantly 100% of the viewport wherein:

1. the variety of rows and also columns is established by the dimension of the viewport and also the complying with standards

2. a cell’s elevation or size is never ever much less than 180px unless the viewport’s elevation or size is much less than 180px, in which instance the row or column and also therefore the cell would certainly be every one of the offered area (e.g. if the viewport’s elevation and also size were 150px by 400px, after that the grid would certainly have 1 row with an elevation of 150px and also 2 columns; if the viewport’s elevation and also size were 400px by 200px, after that the grid would certainly have 2 rows and also 1 column)

 viewport: 150px elevation
400px size
1 row: 150px
2 columns: each 200px
+ -------+ -------+.
|||
+ -------+ -------+.

viewport: 400px elevation.
200px size.
2 rows: each 200px.
1 column: 400px.
+ -------+.
| |
| |
+ -------+.
| |
| |
+ -------+.

3. a cell’s elevation or size is never ever greater than 359px

4. consequently, a cell’s elevation or size would certainly be receptive in between 180px to 359px

5. brand-new rows and also columns need to be included every single time the viewport raises by 180px in whichever instructions

Below are some efforts that undoubtedly do not help one factor or an additional.

 html, body, #grid {size: 100%; elevation: 100%; margin: 0; box-sizing: border-box;}

#grid {
grid-template:.
repeat( minmax( 1, calc( 100vh/ 180px)), minmax( 180px, minmax( 1fr, 359px)))/.
repeat( minmax( 1, calc( 100vw/ 180px)), minmax( 180px, minmax( 1fr, 359px)));.
}

#grid {
grid-template:.
repeat( auto-fit, minmax( 180px, minmax( 1fr,359 px)))/.
repeat( auto-fit, minmax( 180px, minmax( 1fr,359 px)));.
}

Is it feasible with pure CSS and also no media inquiries? If so, just how?