I would like to display 8 elements in the page by the following rules. I am surprised that ChatGPT cannot give a proper solution after trying many times...
The rules are as simple as the following, using either CSS Grid system or Flexbox is ok.
When it is mobile mode, all items should be displayed in one single column.
When it is desktop mode,The item 1, 2, 3, and 4 are in the first row, and item 5, 6, 7, and 8 are in the second row. The item 1 should occupy 50% of the first row, item 2, 3, and 4 should equally share the rest space of the first row. Item 5, 6, 7, and 8 always equally share the space of the second row.
The item 3 displays dynamically. If the item 3 doesn't display, then item 2 should extends to take the item 3's space.
What to do that with CSS Grid system or Felxbox?
Which approach is much easier and simplified?