diff --git a/css/grid-guide/demos/mobile-example/index.html b/css/grid-guide/demos/mobile-example/index.html new file mode 100644 index 0000000000..409890f577 --- /dev/null +++ b/css/grid-guide/demos/mobile-example/index.html @@ -0,0 +1,234 @@ + + + + Гибкая сетка на гридах — Гайд по 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