Grid

Classes for managing grid layouts.

Container

Class	Description
.grid	Enables grid

Columns

Class	Description
.grid-columns--1fr-1fr	Two equal columns
.grid-columns--1fr-2fr	Columns 1:2
.grid-columns--1fr-3fr	Columns 1:3
.grid-columns--2fr-1fr	Columns 2:1
.grid-columns--3-32	Fixed columns

Examples

Просмотр

Column 1

Column 2

Код

<div class="grid grid-columns--1fr-1fr gap-4">
  <div
    class="p-4"
    style="background: var(--u-blue-100); border-radius: var(--u-rounded)"
  >
    Column 1
  </div>
  <div
    class="p-4"
    style="background: var(--u-green-100); border-radius: var(--u-rounded)"
  >
    Column 2
  </div>
</div>

<div class="grid grid-columns--1fr-1fr gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

Просмотр

1/3

2/3

Код

<div class="grid grid-columns--1fr-2fr gap-4">
  <div
    class="p-4"
    style="background: var(--u-blue-100); border-radius: var(--u-rounded)"
  >
    1/3
  </div>
  <div
    class="p-4"
    style="background: var(--u-green-100); border-radius: var(--u-rounded)"
  >
    2/3
  </div>
</div>

<div class="grid grid-columns--1fr-2fr gap-4">
  <div>1/3</div>
  <div>2/3</div>
</div>