bora

1,5 month later, after I did most of the project and be sure that I understand PW system, I finally finished that part. It's not perfect of course but it's working fine.
Here is how I did it:
Templates And Fields:
I created 2 templates: grid and grid_item and 1 pagetableextended field grid_items. In grids page I can enter grid_items like below:
Title, summary, featured_image for content on the grid items,
external url for obvious reasons, 
grid_ratio is to determine size of item. Design is limited with ratios from 1x1 to 3x3, so I made it selectable page items from options
use_border : for images with white bg, so they don't look like they are floating

Modules
I have created 3 modules. InputfieldGridBuilder,FieldtypeGridBuilder and GridBuilder. 
Whenever I save the page, new items from grid_items pagetable are available to use like below.
I can order items, add new rows, delete row etc. 
Whenever I change something, there is a method that works to serialize data to the hidden input field,InputfieldGridBuilder. Also, just in case I call the function it every 5 seconds.
I make a small fixed grid that is very similar to the one used in the frontend. So anything that you can do here with jQueryui sortables, it's available for using in the frontend.

Last module GridBuilder is used for mostly utility purposes for both frontend and backend. It has methods like getItemSize, getItemImage, build etc.
Frontend
Normally these will be used in homepage but I made the view of page available to users with editing roles, so before using them they can see that it look like. For example this one in the gif above looks like this. So even with the empty rows, it works.

And for using in the homepage, I added a multiple selection page field. So they can use more than one grid, or with the location options we already added they can select to have a different view for different countries. (I added Location settings is globally for every page)

Questions, critics, feedbacks or "hi,there buddy"'s are highly welcomed.