16
Views
1
Comments
Solved
How to make Dynamic Grid Layout (Auto-Balanced) in 1 page using css?
Question

Hi All, Could you please help to customize the CSS? I would like to make all images automatically fit on a single page. The total number of records is dynamic, with a maximum of 36 images. The layout should automatically adjust so that all images fit on one page. (The number of columns and rows should be balanced automatically)

example:

  • 6 records → 1 column, 6 rows

  • 12 records → 1 column, 12 rows

  • 13 records → 2 columns (7 rows in the first column, 6 rows in the second column)

  • 20 records → 2 columns, 10 rows each

  • 24 records → 2 columns, 12 rows each

  • 25 records → 3 columns (9 rows, 8 rows, 8 rows)

  • 35 records → 3 columns (12 rows, 12 rows, 11 rows)

  • 36 records → 3 columns, 12 rows each

Attached oml file

Appreciate your help, Thanks

ReactiveTest.oml
UserImage.jpg
Muhammad Khoir Al Alim Manurung
Solution

Attached the solution

Thanks

ReactiveTest.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.