Сетки

Сетки позволяют определённым образом располагать элементы на странице. Существует две разновидности сеток: flex и grid. Flex-сетка не имеет жёстких ограничений для контента и позволяет выстраивать блоки в ряд, пока они помещаются и переносить их на новую строку, если не помещаются. Grid-сетка же имеет заранее определённую жёсткую структуру, согласно которой размещаются элементы внутри.

Q.Palette упрощает работу с сетками, заранее определив два класса:.q-flexи.q-grid.

Q-Flex

Изменяйте размеры этого блока, чтобы наглядно увидеть, как это работает.

<div class="q-flex">
  <div>Your</div>
  <div>Blocks</div>
</div>

Q-Grid

Растягивает вложенные блоки по высоте самого высокого, располагая их по жёсткой сетке.

Сетка задаётся свойствами--q-grid-template-columnsи--q-grid-template-rows.

Menu 1
Menu 2
Menu 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid atque aut beatae dolore doloribus, eius fugit harum id inventore nesciunt officiis praesentium quas, repellat sapiente sit suscipit temporibus voluptatum!

<div
  class="q-grid"
  style="--q-grid-template-columns: auto 1fr;
         --q-grid-template-rows: 1fr;"
>
  <div class="block">
    <ul>
      <li>Menu 1</li>
      <li>...</li>
    </ul>
  </div>
  <div class="block">
    <p>Lorem ...</p>
  </div>
</div>

По умолчанию задано расстояние между блоками, равное1em, однако, вы можете отключить его, добавив класс.no-gap.

Menu 1
Menu 2
Menu 3

<div class="q-grid no-gap">
...
</div>

Вам может понадобиться выровнять блоки по центру или по базовой линии текста. Для этого добавьте класс.ai-centerили.ai-baseline.

По центру:

Menu 1
Menu 2
Menu 3

По базовой линии текста (обратите внимание, что первые строки обоих блоков находится на одной линии):

Menu 1
Menu 2
Menu 3

Обёртки для фильтров Прогресс спиннер