R23 CSS Grid

Inspired by Bootstrap 5.2 CSS Grid: https://getbootstrap.com/docs/5.2/layout/css-grid/#customizing

Basic Usage

Elements and classes:
  .r23-container (optional class .r23-container--max-width, used for larger screens)
    .r23-grid
      grid items (es: div)
      (optional class .r23-col-[breakpoint]-[colspan])
      (optional class .r23-start-[breakpoint]-[colspan])

When there are no classes on the grid items (the immediate children of a .r23-grid), each grid item will automatically be sized to one column.

CSS Variables

The CSS Grid is built using the following CSS Variables, that in turn are initialized with @r23-grid-... @r23-gap-... @r23-container-margin-... LESS variables

You can contextually customize the number of columns, the gaps, container margins, the number of rows with local CSS variables:

Variable Description

--r23-container-margin The horizontal margins of the container

--r23-grid-rows The number of rows in your grid template

--r23-grid-columns The number of columns in your grid template

--r23-gap The size of the gap between columns (vertical and horizontal)

Note that CSS variables are inherited by child elements, and can be overridden also within media queries.

Variable	Description
--r23-container-margin	The horizontal margins of the container
--r23-grid-rows	The number of rows in your grid template
--r23-grid-columns	The number of columns in your grid template
--r23-gap	The size of the gap between columns (vertical and horizontal)

Defaults

(see \Stores\WebContent\FerragamoR17SAS\css\Custom\r17\src\base\scaffold_r23.less)

12 columns on XS and SM; 14 columns on MD and above;
8px of gap and container margin on XS; 20px of gap and container margin on SM and above

Responsive

Use responsive classes to adjust your layout across viewports. Here we start with 6 columns on the narrowest viewports, and then grow to reduce them on medium viewports and above.
Syntax: r23-col-[breakpoint]-[start-number], where [start-number] begin at 1 and ends at the maximum number of columns expected.

col

Wrapping

Grid items automatically wrap to the next line when there’s no more room horizontally. Note that the gap applies to horizontal and vertical gaps between grid items.

col

Starts

Start classes can be applied to column elements and tell browsers to “start at this column” by setting the property grid-column-start.
Syntax: r23-start-[breakpoint]-[start-number], where [start-number] begin at 1.

col

Rows

Row classes can be applied to column elements and tell browsers to "position the element at this row" by setting the property grid-row.
Syntax: r23-row-[breakpoint]-[row-number], where [row-number] begin at 1.

Gaps

Row gap and column gap can be changed together by overriding the --r23-gap on the .r23-container element,
or individually by setting the rules row-gap and column-gap on the .r23-grid element.

col

Nesting

The CSS Grid system allows for easy nesting of .r23-grid.
Note that it inherits changes in the rows, columns, and gaps.
Moreover the local CSS variable can be changed only in the child grid, as in the example below where we set only 3 columns with --r23-grid-columns: 3;.

nested col

first level col