Перейти к содержанию

Сетки

Сетки

Упорядочивайте контент в адаптивные сетки для создания индексных страниц и группировки блоков.

⚙ Настройка

Добавьте в mkdocs.yml:

markdown_extensions:
  - attr_list    # Атрибуты элементов
  - md_in_html   # Markdown внутри HTML

🧩 Типы сеток

Карточная сетка (список)

<div class="grid cards" markdown>
- :material-star: __Заголовок__  
  Текст карточки
- :material-heart: __Другой блок__  
  С описанием и иконкой
</div>

Результат:

  • Заголовок
    Текст карточки
  • Другой блок
    С описанием и иконкой

Карточная сетка (блоки)

<div class="grid" markdown>
:material-account: __Пользователь__  
{ .card }

> **Цитата** в карточке  
> { .card }
</div>

Результат:

Пользователь

Цитата в карточке

Универсальная сетка

<div class="grid" markdown>
```python
print("Код в сетке")

Цитата
Рядом с кодом 

**Результат**:  
<div class="grid" markdown>
```python
print("Код в сетке")

Цитата
Рядом с кодом

💡 Особенности

  • Автоматическая адаптация под мобильные устройства
  • Комбинируйте любые элементы: карточки, код, цитаты, списки
  • Эффекты при наведении для карточных сеток
  • Равномерное распределение по ширине

⚠ Ограничения