npm install quadThere are two main positioning models used in layouts:
1) Fixed (Absolute)
2) Grid (Responsive)
Both models declare element positions using 4-attribute box models:
1) Fixed (Absolute)
```
{
x :
y :
width :
height :
}`
2) Grid (Responsive)``
{
col :
row :
cols :
rows :
}
Fixed layouts are used for viewports with unchanging dimensions, for example
traditional IAB ad units.
For grid layouts, the four attributes values are converted into absolute
dimensions using a layout-specified (default = 16) number of columns. The
container viewport is divided into squares based on that number of columns, with
their width equal to the viewport width divided by the number of columns and
their height also equal to that width. The grid box values are converted to
absolute pixel values by multiplying their values with this column width.
Each layout must specify the range of widths it is applied to using the size
attribute.
Fixed size layouts are declared by providing a numeric width and height as size
attributes. These layouts are only active when the viewport matches both the
height and width exactly.
In contrast, grid layouts specify width via min and max arguments in order to
describe the range of viewports for which they are applicable. Both arguments
are optional. Min defaults to 0 and max defaults to Infinity, so that if
neither are specified, the layout will apply to all viewport ranges. This allows
for the user to specify a series of disjount layouts that apply to different
ranges of viewport widths. For example, you could have three grid-based layouts
one running from 0-480, one from 480-768, and another handling 768 and above.
These grid layouts can specify their height via either a ratio argument or ..