Grid Layout

A primeira coluna está com 100px, a segunda com 300px e a terceira com 200px. Já as linhas estão todas com 100px. Se uma linha for adicionada ela irá ter 80px, e se uma coluna for adicionada ela terá 120px. E caso algo seja adicionado mais algum item, ele irá entrar em formato de row (linha).

A
B
C
D
E
F
G
H
I
J

Grid Layout

As colunas tem valor auto, ou seja elas irão se ajustar automaticamente dependendo de acordo com o conteúdo interno. Todas as linhas possuem o valor de 50 pixels. E caso mais algum item seja adicionado, ele irá entrar em formato de coluna (column).

A
B
C
D
E
F
G
H
I
J

Grid Layout

As colunas estão dividas em formato de fração 6/6. Ou seja, a primeira coluna irá ocupar 1/6 do conteiner, já a segunda coluna irá ocupar 4/6 do conteiner, e a terceira coluna irá ocupar 1/6 da coluna. E as linhas irá ocupar 1fr do conteiner. E caso mais algum item seja adicionado, ele irá entrar em formato de linha (row)

A
B
C
D
E
F
G
H
I
J