A simple but powerful grid system.
The Ueyen grid system allows creating a grid system that can be easily controlled and combined with other selectors (such as the width and height selector). The grid system is using flexbox to construct the grid structure.
The following selectors class names can be used to create a simple 1-column to 6-column grid.
un-gr-11 item on each row.
Grid items will have 100% width.
un-gr-22 items on each row.
un-gr-33 items on each row.
un-gr-44 items on each row.
un-gr-55 items on each row.
un-gr-66 items on each row.
The following class name un-gr-3 is assigned to the parent, so the children turn into a grid of
3-elements on each row
The content goes here...
The content goes here...
The content goes here...
The content goes here...
All the selectors in the basic mode can be followed by :s to :h (small to
huge) to have different number of items on each row.
:sLarger than Breakpoint Small
:mLarger than Breakpoint Large.
:lLarger than Breakpoint large.
:hLarger than Breakpoint Huge.
The following grid has these class names: un-gr-1 un-gr-2:s un-gr-3:m un-gr-4:l un-gr-5:h
un-gr-1 One item on each row by default.
un-gr-2:s 2 items after breakpoint small.
un-gr-3:m 3 items after breakpoint medium.
un-gr-4:l 4 items after breakpoint large.
un-gr-5:h 5 items after breakpoint huge.
The content goes here...
The content goes here...
The content goes here...
The content goes here...
The width selectors can be used to have a custom width on each element in the grid.
The following class name un-w-1/2 is assigned to the first two elements, so they will be half of the size
of the row, even though the grid is un-gr-4, which means 4 items on each row.
The content goes here...
The content goes here...
The content goes here...
The content goes here...
The content goes here...
The content goes here...
The content goes here...
The height selectors can be used to have a custom height on each element in the grid.
The following class name un-h-l is assigned to the second element, and un-h-h to the third element, so the second element has large height "-l", and the third element has huge height "-h".
un-h*-m is a children-selector for height. It targets all the children of the element and gives them the medium height.
The content goes here...
The content goes here...
The content goes here...
The content goes here...
The grids can be nested inanother grid.
In the following sample, a grid of 3 .un-gr-3 in nested in a grid of 2.un-gr-2.
The content goes here...
The content goes here...
The content goes here...
The content goes here...
The content goes here...
The content goes here...