How to get a grid 3 columns x 3 rows?

Community Usage questions
1

Hi,

if you got the answer, do not hesitate...

image
image1659Ă—879 70.6 KB

To be clear, is the o-s-c property called gridTemplate is the same as the grid-template in css ?

2

To the question "how to get a 3x3 grid": either enter 3 in gridTemplate or repeat(3, 1fr) / repeat(3, 1fr). The screenshot suggest you want to do something else but it's not clear.

To be clear, is the o-s-c property called gridTemplate is the same as the grid-template in css ?

yes

1 Like
3

Thank you for our answer ! I see more clear !

ok so to get a grid with 3 columns

image

To get 5 rows and 8 columns, each column will take 10% to let a 20 % space.

image
image1380Ă—378 36.1 KB

Nice :slight_smile:

But now let say i want to get some particular fraction, the first row will take 2 fractions of the whole, the second row 5 fraction and the third row 1 fraction.

The frcss unit (a “fraction”) is the solution of course.
The repeat is used to repeat this schema.

And i'd like to get each colums to be 1/3 the width of the matrix width.

image
image906Ă—556 33.1 KB

But why the rows don't take the all vertical available space ?

Edit : as i set 3 repeats 3 rows, the space is reserved. Logical...

cheers

4

I guess i have to count the good number of cells.

as i repeat 3x3 rows and 3 x 3 colums = 9 x 9 = 81 cells so in matrix zone you have to set 81 for the quantity property.

image
image1196Ă—609 53.7 KB

Ok so no hope for vertical "auto-adjust" when the quantity is lower and preserve the fractions set ?

hope i'm understandable :slight_smile: