Grid System

Grid - это легкая утилита гибкой адаптивной разметки, оптимизированная для мобильных телефонов, планшетов и настольных компьютеров.

Basic

123

<div class="p-grid">
  <div class="p-col">
    <div class="box">1</div>
  </div>
  <div class="p-col">
    <div class="box">2</div>
  </div>
  <div class="p-col">
    <div class="box">3</div>
  </div>
</div>

Dynamic

i + 1

<button
  pButton
  pRipple
  type="button"
  icon="pi pi-plus"
  title="Add Column"
  (click)="addColumn()"
  [disabled]="columns.length === 20"
  class="p-mr-2"
></button>
<button
  pButton
  pRipple
  type="button"
  icon="pi pi-minus"
  title="Remove Column"
  (click)="removeColumn()"
  [disabled]="columns.length === 1"
></button>
 
<div class="p-grid p-mt-2">
  <div class="p-col" *ngFor="let col of columns; let i = index" [@animation]="'visible'">
    <div class="box">{ { i + 1 } }</div>
  </div>
</div>

Reverse Direction

123

<div class="p-grid p-flex-row-reverse">
  <div class="p-col">
    <div class="box">1</div>
  </div>
  <div class="p-col">
    <div class="box">2</div>
  </div>
  <div class="p-col">
    <div class="box">3</div>
  </div>
</div>

Column Direction

123

<div class="p-grid p-flex-column">
  <div class="p-col">
    <div class="box">1</div>
  </div>
  <div class="p-col">
    <div class="box">2</div>
  </div>
  <div class="p-col">
    <div class="box">3</div>
  </div>
</div>

Reverse Column Direction

123

<div class="p-grid p-flex-column-reverse">
  <div class="p-col">
    <div class="box">1</div>
  </div>
  <div class="p-col">
    <div class="box">2</div>
  </div>
  <div class="p-col">
    <div class="box">3</div>
  </div>
</div>

12 Column Grid

411111111264822

<div class="p-grid">
  <div class="p-col-4">
    <div class="box">4</div>
  </div>
  <div class="p-col">
    <div class="box">1</div>
  </div>
  <div class="p-col">
    <div class="box">1</div>
  </div>
  <div class="p-col">
    <div class="box">1</div>
  </div>
  <div class="p-col">
    <div class="box">1</div>
  </div>
  <div class="p-col">
    <div class="box">1</div>
  </div>
  <div class="p-col">
    <div class="box">1</div>
  </div>
  <div class="p-col">
    <div class="box">1</div>
  </div>
  <div class="p-col">
    <div class="box">1</div>
  </div>
</div>
 
<div class="p-grid">
  <div class="p-col-2">
    <div class="box">2</div>
  </div>
  <div class="p-col-6">
    <div class="box">6</div>
  </div>
  <div class="p-col-4">
    <div class="box">4</div>
  </div>
</div>
 
<div class="p-grid">
  <div class="p-col-8">
    <div class="box">8</div>
  </div>
  <div class="p-col-2">
    <div class="box">2</div>
  </div>
  <div class="p-col-2">
    <div class="box">2</div>
  </div>
</div>

MultiLine

6666

<div class="p-grid">
  <div class="p-col-6">
    <div class="box">6</div>
  </div>
  <div class="p-col-6">
    <div class="box">6</div>
  </div>
  <div class="p-col-6">
    <div class="box">6</div>
  </div>
  <div class="p-col-6">
    <div class="box">6</div>
  </div>
</div>

Fixed Width Column

100pxauto

<div class="p-grid">
  <div class="p-col-fixed" style="width: 100px">
    <div class="box">100px</div>
  </div>
  <div class="p-col">
    <div class="box">auto</div>
  </div>
</div>

Responsive

p-col-12 p-md-6 p-lg-3p-col-12 p-md-6 p-lg-3p-col-12 p-md-6 p-lg-3p-col-12 p-md-6 p-lg-3

<div class="p-grid">
  <div class="p-col-12 p-md-6 p-lg-3">
    <div class="box">p-col-12 p-md-6 p-lg-3</div>
  </div>
  <div class="p-col-12 p-md-6 p-lg-3">
    <div class="box">p-col-12 p-md-6 p-lg-3</div>
  </div>
  <div class="p-col-12 p-md-6 p-lg-3">
    <div class="box">p-col-12 p-md-6 p-lg-3</div>
  </div>
  <div class="p-col-12 p-md-6 p-lg-3">
    <div class="box">p-col-12 p-md-6 p-lg-3</div>
  </div>
</div>

Адаптивная верстка достигается путем применения к столбцам классов, специфичных для брейкпоинтов, в то время как p-col-* определяет поведение по умолчанию для мобильных устройств с маленькими экранами. Поддерживаются четыре размера экрана с различными брейкпоинтами:

Prefix	Devices	Media Query	Example
p-sm-*	Small devices	min-width: 576px	p-sm-6, p-sm-4
p-md-*	Medium sized devices such as tablets	min-width: 768px	p-md-2, p-md-8
p-lg-*	Devices with large screen like desktops	min-width: 992px	p-lg-6, p-lg-12
p-xl-*	Big screen monitors	min-width: 1200px	p-xl-2, p-xl-10

Horizontal Alignment

Start

214

<div class="p-grid p-jc-start">
    <div class="p-col-2">
      <div class="box">2</div>
    </div>
    <div class="p-col-1">
      <div class="box">1</div>
    </div>
    <div class="p-col-4">
      <div class="box">4</div>
    </div>
  </div>

End

214

<div class="p-grid p-jc-end">
    <div class="p-col-2">
      <div class="box">2</div>
    </div>
    <div class="p-col-1">
      <div class="box">1</div>
    </div>
    <div class="p-col-4">
      <div class="box">4</div>
    </div>
  </div>

Center

214

<div class="p-grid p-jc-center">
    <div class="p-col-2">
      <div class="box">2</div>
    </div>
    <div class="p-col-1">
      <div class="box">1</div>
    </div>
    <div class="p-col-4">
      <div class="box">4</div>
    </div>
  </div>

Between

214

<div class="p-grid p-jc-between">
    <div class="p-col-2">
      <div class="box">2</div>
    </div>
    <div class="p-col-1">
      <div class="box">1</div>
    </div>
    <div class="p-col-4">
      <div class="box">4</div>
    </div>
  </div>

Around

214

<div class="p-grid p-jc-around">
    <div class="p-col-2">
      <div class="box">2</div>
    </div>
    <div class="p-col-1">
      <div class="box">1</div>
    </div>
    <div class="p-col-4">
      <div class="box">4</div>
    </div>
  </div>

Even

214

<div class="p-grid p-jc-evenly">
    <div class="p-col-2">
      <div class="box">2</div>
    </div>
    <div class="p-col-1">
      <div class="box">1</div>
    </div>
    <div class="p-col-4">
      <div class="box">4</div>
    </div>
  </div>

Vertical Alignment

Start

444

<div class="p-grid p-ai-start vertical-container">
  <div class="p-col">
    <div class="box">4</div>
  </div>
  <div class="p-col">
    <div class="box">4</div>
  </div>
  <div class="p-col">
    <div class="box">4</div>
  </div>
</div>

End

444

<div class="p-grid p-ai-end vertical-container">
  <div class="p-col">
    <div class="box">4</div>
  </div>
  <div class="p-col">
    <div class="box">4</div>
  </div>
  <div class="p-col">
    <div class="box">4</div>
  </div>
</div>

Center

444

<div class="p-grid p-ai-center vertical-container">
  <div class="p-col">
    <div class="box">4</div>
  </div>
  <div class="p-col">
    <div class="box">4</div>
  </div>
  <div class="p-col">
    <div class="box">4</div>
  </div>
</div>

Stretch

444

<div class="p-grid p-ai-stretch vertical-container">
  <div class="p-col">
    <div class="box" style="height: 100%;">4</div>
  </div>
  <div class="p-col">
    <div class="box" style="height: 100%;">4</div>
  </div>
  <div class="p-col">
    <div class="box" style="height: 100%;">4</div>
  </div>
</div>

Per Column

444

<div class="p-grid vertical-container">
  <div class="p-col p-as-start">
    <div class="box">4</div>
  </div>
  <div class="p-col p-as-center">
    <div class="box">4</div>
  </div>
  <div class="p-col p-as-end">
    <div class="box">4</div>
  </div>
</div>

Offset

644

<div class="p-grid">
  <div class="p-col-6 p-offset-3">
    <div class="box">6</div>
  </div>
</div>
 
<div class="p-grid">
  <div class="p-col-4">
    <div class="box">4</div>
  </div>
  <div class="p-col-4 p-offset-4">
    <div class="box">4</div>
  </div>
</div>

Классы смещения позволяют определять левое поле для столбца, чтобы избежать добавления пустых столбцов для интервалов

Список классов смещения, изменяющихся в диапазоне от 1 до 12:

Prefix	Devices	Media Query	Example
p-col-offset-*	All devices	All screens	p-col-offset-6, p-col-offset-4
p-sm-offset-*	Small devices	min-width: 576px	p-sm-offset-6, p-sm-offset-4
p-md-offset-*	Medium sized devices such as tablets	min-width: 768px	p-md-offset-6, p-md-offset-4
p-lg-offset-*	Devices with large screen like desktops	min-width: 992px	p-lg-offset-6, p-lg-offset-4
p-xl-offset-*	Big screen monitors	min-width: 1200px	p-xl-offset-6, p-xl-offset-4

Nested

66124

<div class="p-grid">
<div class="p-col-8">
  <div class="p-grid">
    <div class="p-col-6">
      <div class="box">6</div>
    </div>
    <div class="p-col-6">
      <div class="box">6</div>
    </div>
    <div class="p-col-12">
      <div class="box">12</div>
    </div>
  </div>
</div>
<div class="p-col-4" style="padding-bottom: 1rem;">
  <div class="box" style="height: 100%;">4</div>
</div>
</div>

Panels

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Form Layout Spacing