+ Гибкая сетка на гридах — Гайд по grid — Дока
+
+
+
+
+
+
+
+
+
+
+
+
Изображение
+
Название
+
Цена
+
Описание
+
Рейтинг
+
Отзывы
+
Характеристики
+
Наличие
+
Доставка
+
Оплата
+
Связь
+
Гарантия
+
Размеры
+
Материал
+
Сопутствующие
+
+
+
diff --git a/css/grid-guide/images/practice-desktop.png b/css/grid-guide/images/practice-desktop.png
new file mode 100644
index 0000000000..13441c57e8
Binary files /dev/null and b/css/grid-guide/images/practice-desktop.png differ
diff --git a/css/grid-guide/images/practice-mobile.png b/css/grid-guide/images/practice-mobile.png
new file mode 100644
index 0000000000..e01056e0ab
Binary files /dev/null and b/css/grid-guide/images/practice-mobile.png differ
diff --git a/css/grid-guide/practice/meded90.md b/css/grid-guide/practice/meded90.md
new file mode 100644
index 0000000000..b666460431
--- /dev/null
+++ b/css/grid-guide/practice/meded90.md
@@ -0,0 +1,45 @@
+Грид выручит, когда нужно сверстать сложную сетку, которая меняется в зависимости от размеров экрана устройства. Возьмём пример с интерфейсом онлайн-магазина:
+
+![пример сетки с использованием гридов для десктоп](images/practice-desktop.png)
+Сетка десктопа
+
+![пример сетки с использованием гридов для мобильной версии](images/practice-mobile.png)
+Сетка мобильной версии
+
+В мобильной версии нужно сильно поменять порядок отображения, а для SEO нужно сохранить определённый порядок.
+
+В демо ниже используются именованные области для расположения элементов. При переключении на мобильную версию элементы перестраиваются в нужном порядке за счёт изменения расположения именованных областей
+
+```css
+.cart-product {
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ grid-template-rows: repeat(5, 1fr);
+ grid-template-areas:
+ "image image image title title title"
+ "image image image price rating rating"
+ "features features features price payment payment"
+ "description description description description reviews reviews "
+ "shipping contact availability availability warranty sizes"
+ "material material related related related related";
+}
+
+@media (max-width: 720px) {
+ .cart-product {
+ grid-template-columns: repeat(4, 1fr);
+ grid-template-areas:
+ "image image price rating"
+ "image image description description"
+ "title title title title"
+ "reviews reviews features features"
+ "availability payment shipping contact"
+ "warranty warranty sizes sizes"
+ "warranty warranty sizes sizes"
+ "material material material related";
+ }
+}
+```
+
+
+
+Балдин Кирилл — наставник на курсе «[Мидл фронтенд-разработчик](https://practicum.yandex.ru/middle-frontend/?utm_source=pr&utm_medium=content&utm_campaign=middle-frontend_doka_content)» в Яндекс Практикуме.
diff --git a/people/meded90/index.md b/people/meded90/index.md
new file mode 100644
index 0000000000..7500f616f6
--- /dev/null
+++ b/people/meded90/index.md
@@ -0,0 +1,11 @@
+---
+name: 'Балдин Кирилл'
+url: https://github.com/meded90
+photo: photo.jpg
+roles:
+ - praktikum-mentor
+badges:
+ - first-contribution-small
+---
+
+Ментор на курсе «[Мидл фронтенд-разработчик](https://practicum.yandex.ru/middle-frontend/?utm_source=pr&utm_medium=content&utm_campaign=middle-frontend_doka_content)» в Яндекс Практикуме
diff --git a/people/meded90/photo.jpeg b/people/meded90/photo.jpeg
new file mode 100644
index 0000000000..789906e90e
Binary files /dev/null and b/people/meded90/photo.jpeg differ