Parts UI - Grid

.parts-row

Container that initializes the grid

.parts-{number}

Extra class for container

number - value 2 - 6, 8, 10, 12 or 13, indicating the number of parts (columns) into which the grid container will be divided

.col

Column . Its size equals to one part of the division specified in the container

Structurally, column elements must be direct inheritors of a .parts-row container

<div class="parts-row parts-2">
  <div class="col"> ... </div>
  <div class="col"> ... </div>
</div>

Copied

<div class="parts-row parts-3">
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
</div>

Copied

<div class="parts-row parts-4">
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
</div>

Copied

<div class="parts-row parts-5">
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
</div>

Copied

<div class="parts-row parts-6">
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
</div>

Copied

<div class="parts-row parts-8">
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
</div>

Copied

<div class="parts-row parts-10">
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
</div>

Copied

<div class="parts-row parts-12">
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
</div>

Copied

<div class="parts-row parts-13">
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
</div>

Copied

Spaces between columns

By default the columns are pressed together without separating spaces

.parts-space

Sets spaces between columns - 1rem

<div class="parts-row parts-4 parts-space">
  <div class="col">
    ...
  </div>
  <div class="col">
    ...
  </div>
  <div class="col">
    ...
  </div>
  <div class="col">
    ...
  </div>
</div>

Copied

Space sizes

.parts-space-xs

0.1rem

.parts-space-sm

0.2rem

.parts-space-md

0.5rem

.parts-space

1rem

.parts-space-lg

1.5rem

.parts-space-xl

2rem

<div class="parts-row parts-space-xs">
  <div class="col">...</div>
</div>

Copied

<div class="parts-row parts-space-sm">
  <div class="col">...</div>
</div>

Copied

<div class="parts-row parts-space-md">
  <div class="col">...</div>
</div>

Copied

<div class="parts-row parts-space">
  <div class="col">...</div>
</div>

Copied

<div class="parts-row parts-space-lg">
  <div class="col">...</div>
</div>

Copied

<div class="parts-row parts-space-xl">
  <div class="col">...</div>
</div>

Copied

Pay attention

The distance to the next block from the grid equals to the size of the spaces between the columns

Some next block

.parts-clear-bottom

Clears the bottom padding from the grid to the next block

Some next block

<div class="parts-row parts-3 parts-space parts-clear-bottom">
  <div class="col"> ... </div>
  <div class="col"> ... </div>
  <div class="col"> ... </div>
</div>
<div>
  Some next block
</div>

Copied

Sizes of individual columns

.part-{number}

The class applied to the column. Overrides the default width.

number — quantity of container parts that the column will occupy.
For example, the .col.part-3 element that is inside the container .parts-row.parts-4, will be 3/4 of its width, and inside .parts-row.parts-5 - 3/5, etc.

.parts-row.parts-5

.col.part-3

.col.part-2

.col

<div class="parts-row parts-5 parts-space">
  <div class="col part-3">
    ...
  </div>
  <div class="col part-2">
    ...
  </div>
  <div class="col part-2">
    ...
  </div>
  <div class="col part-2">
    ...
  </div>
  </div>
  <div class="col">
    ...
  </div>
  <div class="col">
    ...
  </div>
  <div class="col">
    ...
  </div>
</div>

Copied

.parts-row.parts-10

.col.part-3

.col.part-5

.col.part-2

<div class="parts-row parts-10 parts-space">
  <div class="col part-3">
    ...
  </div>
  <div class="col part-5">
    ...
  </div>
  <div class="col part-2">
    ...
  </div>
</div>

Copied

.part-auto

Autowidth of an individual column. It occupies all the remaining space from the other columns in the row.

.parts-row.parts-5

.col

.col.part-auto

<div class="parts-row parts-5 parts-space">
  <div class="col">
    ...
  </div>
  <div class="col">
    ...
  </div>
  <div class="col part-auto">
    ...
  </div>
</div>

Copied

.parts-row.parts-10

.col.part-auto

.col.part-2

.col.part-3

<div class="parts-row parts-10 parts-space">
  <div class="col part-auto">
    ...
  </div>
  <div class="col part-2">
    ...
  </div>
  <div class="col part-3">
    ...
  </div>
</div>

Copied

Column positioning

Classes for .parts-row container

.parts-center

Alignment of columns to the center of the horizontal

.parts-right

Alignment of columns to the right

.parts-md

Alignment of columns to the center of the vertical

.parts-bottom

Alignment of columns to the bottom of the vertical

<div class="parts-row parts-4 parts-space-sm parts-center">
  <div class="col"> ... </div>
</div>

<div class="parts-row parts-4 parts-space-sm parts-right">
  <div class="col"> ... </div>
</div>

<div class="parts-row parts-4 parts-space-sm parts-md">
  <div class="col"> ... </div>
</div>

<div class="parts-row parts-4 parts-space-sm parts-bottom">
  <div class="col"> ... </div>
</div>

Copied

Classes for .col column

.part-md

Separate column, centered

.part-bottom

Separate column, aligned to the bottom

.part-right

Separate column, aligned to the right

.part-left

Separate column, aligned to the left

.part-center

Separate column, aligned to center

<div class="parts-row parts-4 parts-space-sm">
  <div class="col">...</div>
  <div class="col part-top"> ...</div>
  <div class="col"> ...</div>
  <div class="col"> ...</div>
</div>

Copied

<div class="parts-row parts-4 parts-space-sm">
  <div class="col">...</div>
  <div class="col part-bottom"> ...</div>
  <div class="col"> ...</div>
  <div class="col"> ...</div>
</div>

Copied

<div class="parts-row parts-4 parts-space-sm">
  <div class="col">...</div>
  <div class="col"> ...</div>
  <div class="col part-right"> ...</div>
</div>

Copied

<div class="parts-row parts-right parts-4 parts-space-sm">
  <div class="col part-left">...</div>
  <div class="col"> ...</div>
  <div class="col"> ...</div>
</div>

Copied

<div class="parts-row parts-right parts-4 parts-space-sm">
  <div class="col"> ...</div>
  <div class="col"> ...</div>
  <div class="col part-center">...</div>
</div>

Copied

Filling types

Many columns can be placed in a container, regardless of quantity that grid is divided by. Those that do not fit are transferred to a new row. If you do not specify the number of parts of the division, then the elements of the columns will be located one behind the other from left to right and will be width, that equals to its content.

Lorem ipsum

Lorem ipsum dolor sit amet.

Lorem

Lorem ipsum dolor sit amet

Lorem

Lorem ipsum dolor

Lorem

.parts-stretch

Columns of the same height, which is determined by the largest column in a row.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas vitae

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto voluptas ut dolorum sunt dicta nihil tenetur aut? Quibusdam ducimus quia, cum similique velit illo, quis nemo reiciendis odit, atque ab.

Lorem, ipsum dolor

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto voluptas ut dolorum sunt dicta nihil tenetur aut?

<div class="parts-row parts-space parts-4 parts-stretch">
  <div class="col">
    ...
  </div>
  <div class="col">
    ...
  </div>
  <div class="col">
    ...
  </div>
  <div class="col">
    ...
  </div>
</div>

Copied

.parts-auto

Columns autosize

The number of columns specified to such a container will not work as a strict division, but only as a limitation of the maximum possible number.

Lorem ipsum

Lorem ipsum dolor sit amet.

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

Lorem ipsum

<div class="parts-row parts-auto">
  <div class="col">
    ...
  </div>
  <div class="col">
    ...
  </div>
  <div class="col">
    ...
  </div>
  <div class="col">
    ...
  </div>
</div>

Copied

<div class="parts-row parts-auto parts-5">
  <div class="col">
    ...
  </div>
  <div class="col">
    ...
  </div>
  <div class="col">
    ...
  </div>
  <div class="col">
    ...
  </div>
</div>

Copied

.parts-justify

Uniform distribution of columns from edge to edge of the container.

Most often used when the number of columns in the container is either not specified or less than the specified

<div class="parts-5 parts-space">
  <div class="col">
    ...
  </div>
  <div class="col">
    ...
  </div>
  <div class="col">
    ...
  </div>
</div>

Copied

.parts-nowrap

Prohibition of columns carry-over

Such a grid, in order to avoid undesirable stretching of the page, recommended to put in special container (with --scroll modifier)

<div class="parts-row parts-nowrap">
  ...
</div>

Copied

Responsive for screen resolutions

Rules for .parts-row container

.parts-{number}-{breakpoint}

Overriding of the number of columns that depends on the width of the screen

number — number of columns
breakpoint - the value of the screen resolution, which can be:

xl — < 1240px
lg — < 1024px
md — < 768px
sm — < 540px
xs — < 375px

.parts-collapse-{breakpoint}

Cancellation of column view and setting of 100% width to blocks

breakpoint — value of xl, lg, md, sm or xs, depending on which resolution the override should take place

.parts-row.parts-8.parts-6-xl.parts-4-lg.parts-3-md.parts-2-sm.parts-collapse-xs

<div class="parts-row parts-8 parts-6-xl parts-4-lg parts-3-md parts-2-sm parts-collapse-xs">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Copied

.parts-unspace-{breakpoint}

No spaces between columns at a specific screen resolution

.parts-row.parts-space.parts-unspace-lg

<div class="parts-row parts-4 parts-space parts-unspace-lg">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Copied

Rules for a separate .col column

.part-{number}-{breakpoint}
.part-collapse-{breakpoint}

Rules for reassigning the adaptive properties of a column.

Classes like for container:
number — columns size
breakpoint — the value of the screen resolution

.part-first-{breakpoint}
.part-last-{breakpoint}

Moving a column to the beginning or end of a container at a specific resolution

The project is being tested and under development

If you find a mistake or have ideas for the development of the project - send a message