УрФУ

Grid 🔗

Выстраивайте контент в колонках.
Компонент возьмёт на себя все задачи по адаптированию контента к ширине экрана

Пример использования:

Swift

Перейти

JavaScript

Перейти

C++

Перейти

Go

Перейти


Исходный код для примера выше: 

<Grid xs={1} m={2} l={3} xl={4} gap={2}>
    <Card variant="white" color="blue-2">
        <svelte:fragment slot="title">Swift</svelte:fragment>
        <svelte:fragment slot="right">Перейти</svelte:fragment>
    </Card>
    <Card variant="white" color="red-1">
        <svelte:fragment slot="title">JavaScript</svelte:fragment>
        <svelte:fragment slot="right">Перейти</svelte:fragment>
    </Card>
    <Card variant="white" color="red-2">
        <svelte:fragment slot="title">C++</svelte:fragment>
        <svelte:fragment slot="right">Перейти</svelte:fragment>
    </Card>
    <Card variant="white" color="blue-1">
        <svelte:fragment slot="title">Go</svelte:fragment>
        <svelte:fragment slot="right">Перейти</svelte:fragment>
    </Card>
</Grid>

Параметры:

xs
number

Количество колонок на мобильных экранах (до 400 пикселей в ширину).
Поддерживаются значения от 1 до 12

s
number

Количество колонок на маленьких экранах (от 400 до 768 пикселей в ширину).
Поддерживаются значения от 1 до 12

m
number

Количество колонок на средних экранах (от 768 до 1000 пикселей в ширину).
Поддерживаются значения от 1 до 12

l
number

Количество колонок на широких экранах (от 1000 до 1440 пикселей в ширину).
Поддерживаются значения от 1 до 12

xl
number

Количество колонок на самых широких экранах (от 1440 пикселей в ширину).
Поддерживаются значения от 1 до 12

customLayout
string

Кастомное значение для свойства grid-template-columns
Поддерживаются любые валидные CSS значения. Например: repeat(4, 1fr), 150px 250px или 4fr 3fr 10em

gap
number

Расстояние между колонками и строчками.
Поддерживаются любые целочисленные значения

margin
object

Объект, описывающий внешние отступы компонента. Имеет следующие свойства:
x – отступ по горизонтали
y – отступ по вертикали
top – отступ сверху
bottom – отступ снизу
left – отступ слева
right – отступ справа
Все значения могут иметь один из двух типов: string или number
В случае, если значение одного из свойств имеет тип number, ему будет добавлена единица измерения em
Пример: margin={{ top: 1, x: 'auto' }} будет преобразовано в margin: 1em auto 0

alignItems
enum

Устанавливает значение align-self для всех прямых дочерних элементов как группы. В макете сетки он управляет выравниванием элементов по оси блока в пределах их области сетки.
Список поддерживаемых значений:
normal, flex-start, flex-end, center, start, end, self-start, self-end, baseline, stretch, safe, unsafe, inherit, initial, unset, revert, revert-layer

justifyItems
enum

Определяет значение justify-self по умолчанию для всех элементов блока, предоставляя им всем способ выравнивания каждого блока по соответствующей оси по умолчанию.
Список поддерживаемых значений:
normal, flex-start, flex-end, center, start, end, self-start, self-end, baseline, stretch, safe, unsafe, inherit, initial, unset, revert, revert-layer

placeItems
enum

Устанавливает значение для обоих свойств alignItems и justifyItems
Список поддерживаемых значений:
normal, flex-start, flex-end, center, start, end, self-start, self-end, baseline, stretch, safe, unsafe, inherit, initial, unset, revert, revert-layer

alignContent
enum

Задает распределение пространства между элементами содержимого и вокруг них вдоль поперечной оси сетки.
Список поддерживаемых значений:
normal, flex-start, flex-end, center, start, end, self-start, self-end, baseline, stretch, safe, unsafe, inherit, initial, unset, revert, revert-layer, space-between, space-around, space-evenly

justifyContent
enum

Определяет, как браузер распределяет пространство между элементами содержимого и вокруг них вдоль встроенной оси контейнера.
Список поддерживаемых значений:
normal, flex-start, flex-end, center, start, end, self-start, self-end, baseline, stretch, safe, unsafe, inherit, initial, unset, revert, revert-layer, space-between, space-around, space-evenly

placeContent
enum

Устанавливает значение для обоих свойств alignContent и justifyContent
Список поддерживаемых значений:
normal, flex-start, flex-end, center, start, end, self-start, self-end, baseline, stretch, safe, unsafe, inherit, initial, unset, revert, revert-layer, space-between, space-around, space-evenly

node
HTMLElement

Параметр для связки с HTML-элементом, который лежит в основе компонента
(аналог стандартного bind:this)

id
string

Аналог стандартного атрибута id

className
string

Аналог стандартного атрибута class