a grid component allows you to build a gallery. This pattern responds to usecases such as a photo gallery, a quick access page, a preview of machine learning scores, ...
exemple of grid in google photos
example captured from streamsync documentation
example of grid generated with matplotlib
Design
P1: a grid is a container with a fixed number of columns. In streamsync, a grid is a container in which cells are instantiated. The grid defines a spacing between each cell and defines the number of cells before wrapping. The size of the cells adapts according to these parameters.
grid-container parameters
description
default
column
cells per line
4
column-phone
cells per line on a phone (< 512px)
1
column-tablet
cells per line on a tablet (<1024px)
2
gap
space betwen cells
8px
layout
see proposal P4
classic
P2: a grid is responsive : a grid can be made responsive depending on the device on which it is displayed by modifying the number of cells per line.
P3: the height of a cell depends on its content or is fixed by the developer . If the height is set to auto, the content enlarges the cell in height.
P4: the grid offers several renderings. The classic rendering displays each line after the first. The masonry renderer displays the next cell below the previous column.
P5: a cell can occupy several horizontal or vertical locations. A cell can be extended over several columns. The number of locations must be an integer.
I hesitated to untroduce this notion of vertical space. It makes it possible to manage some use cases but will have to be the subject of teaching if we keep it.
P6: a cell can be use in a repeater. A grid can contain a repeater which itself contains a cell.
P7: the parameters of a cell
parameters
description
default
height
cell height
auto
size-x
the number of spaces occupied by a cell
1
size-y
the number of vertical spaces used by a cell
1
offset
the number of spaces ignored before displaying a cell
0
overflow
display of horizontal and vertical content scroll bars
this proposal has been drafted after the discussion : https://github.com/streamsync-cloud/streamsync/discussions/144
purpose of a grid component
a grid component allows you to build a gallery. This pattern responds to usecases such as a photo gallery, a quick access page, a preview of machine learning scores, ...
exemple of grid in google photos
example captured from streamsync documentation
example of grid generated with matplotlib
Design
P1: a grid is a container with a fixed number of columns. In streamsync, a grid is a container in which cells are instantiated. The grid defines a spacing between each cell and defines the number of cells before wrapping. The size of the cells adapts according to these parameters.
P2: a grid is responsive : a grid can be made responsive depending on the device on which it is displayed by modifying the number of cells per line.
P3: the height of a cell depends on its content or is fixed by the developer . If the height is set to auto, the content enlarges the cell in height.
P4: the grid offers several renderings. The classic rendering displays each line after the first. The masonry renderer displays the next cell below the previous column.
P5: a cell can occupy several horizontal or vertical locations. A cell can be extended over several columns. The number of locations must be an integer.
I hesitated to untroduce this notion of vertical space. It makes it possible to manage some use cases but will have to be the subject of teaching if we keep it.
P6: a cell can be use in a repeater. A grid can contain a repeater which itself contains a cell.
P7: the parameters of a cell