Skip to content

Commit

Permalink
Добавил пример применения для css grid (#4638)
Browse files Browse the repository at this point in the history 
* Добавил пример использования css grid

* Добавил alt для картинок в примере

* Update css/grid-guide/practice/mobail-example.md

Co-authored-by: Alena Batitskaia <solarrust@users.noreply.github.com>

* Update css/grid-guide/practice/mobail-example.md

Co-authored-by: Alena Batitskaia <solarrust@users.noreply.github.com>

* Add new mentor profile for Kirill Baldin

* Updated Kirill Baldin's URL link in the mentor profile

* Add mobile layout for product grid

* Renamed a file to represent its purpose more clearly and added two iframes displaying the practical implementation of complex grids. In the updated version, the old irrelevant links were also removed to avoid any confusion for the future developers.

* Немного форматирует демо

* Немного редактирует

* Удаляет пробел из имени файла

* Ублажает линтер

* Ещё попытка ублажить линтер

---------

Co-authored-by: Kirill Baldin <kirill.baldin@alberblanc.com>
Co-authored-by: Alena Batitskaia <solarrust@users.noreply.github.com>
  • Loading branch information
@meded90 @meded7 @solarrust
3 people authored Aug 2, 2023
1 parent dcc7fb6 commit 261b00c
Show file tree
Hide file tree
Showing 6 changed files with 290 additions and 0 deletions.
234 changes: 234 additions & 0 deletions css/grid-guide/demos/mobile-example/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,234 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Гибкая сетка на гридах — Гайд по grid — Дока</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
<style>
*, *::before, *::after {
box-sizing: border-box;
}

html {
color-scheme: dark;
}

.cart-product {
display: grid;
grid-template-columns: repeat(6, 1fr); /* 6 столбцов одинаковой ширины для десктопа */
grid-template-rows: repeat(5, 1fr); /* 5 строки автоматической высоты */
grid-gap: 10px; /* промежуток между блоками */
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); /* 4 столбца одинаковой ширины для мобильника */
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";
}
}

.image {
grid-area: image;
}

.title {
grid-area: title;
}

.price {
grid-area: price;
}

.description {
grid-area: description;
}

.rating {
grid-area: rating;
}

.reviews {
grid-area: reviews;
}

.features {
grid-area: features;
}

.availability {
grid-area: availability;
}

.shipping {
grid-area: shipping;
}

.payment {
grid-area: payment;
}

.contact {
grid-area: contact;
}

.warranty {
grid-area: warranty;
}

.sizes {
grid-area: sizes;
}

.material {
grid-area: material;
}

.related {
grid-area: related;
}

/* Дополнительные стили для каждого блока */
.cart-product {
max-width: 1000px;
margin: auto;
margin-top: 10px;
}

.cart-product > div {
padding: 20px;
text-align: center;
border-radius: 10px;
border: #f9fafc 2px solid;
font-size: 18px;
color: #fff;
font-family: Roboto, sans-serif;
}

.image {
background-color: #4f98f6;
}

.title {
background-color: #f64fec;
}

.price {
background-color: #f6ad4f;
}

.description {
background-color: #4ff659;
}

.rating {
background-color: #ed586f;
}

.reviews {
background-color: #b9ed58;
}

.features {
background-color: #58edd6;
}

.availability {
background-color: #8c58ed;
}

.shipping {
background-color: #ee8957;
}

.payment {
background-color: #70ee57;
}

.contact {
background-color: #57bcee;
}

.warranty {
background-color: #d557ee;
}

.sizes {
background-color: #4f98f6;
}

.material {
background-color: #f64fec;
}

.related {
background-color: #f6ad4f;
}


/*rest*/
body {
background-color: #181A1B;
color: #fff;
padding: 20px;
font-family: Roboto, sans-serif;
margin: 0px;
text-align: center;
}

:checked ~ .cart-product{
max-width: 420px;
grid-template-columns: repeat(4, 1fr); /* 4 столбца одинаковой ширины для мобильника */
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";
}
</style>
</head>
<body>
<input type="checkbox" id="is-mobile">
<label for="is-mobile">
Мобильная версия
</label>
<div class="cart-product">
<div class="image">Изображение</div>
<div class="title">Название</div>
<div class="price">Цена</div>
<div class="description">Описание</div>
<div class="rating">Рейтинг</div>
<div class="reviews">Отзывы</div>
<div class="features">Характеристики</div>
<div class="availability">Наличие</div>
<div class="shipping">Доставка</div>
<div class="payment">Оплата</div>
<div class="contact">Связь</div>
<div class="warranty">Гарантия</div>
<div class="sizes">Размеры</div>
<div class="material">Материал</div>
<div class="related">Сопутствующие</div>
</div>
</body>
</html>
Binary file added css/grid-guide/images/practice-desktop.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added css/grid-guide/images/practice-mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 45 additions & 0 deletions css/grid-guide/practice/meded90.md
View file
Original file line number Diff line number Diff line change
@@ -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";
}
}
```

<iframe title="Гибкая сетка на гридах" src="../demos/mobile-example/" height="600"></iframe>

<!-- yaspeller ignore:start -->Балдин Кирилл<!-- yaspeller ignore:end --> — наставник на курсе «[Мидл фронтенд-разработчик](https://practicum.yandex.ru/middle-frontend/?utm_source=pr&utm_medium=content&utm_campaign=middle-frontend_doka_content)» в Яндекс Практикуме.
11 changes: 11 additions & 0 deletions people/meded90/index.md
View file
Original file line number Diff line number Diff line change
@@ -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)» в Яндекс Практикуме
Binary file added people/meded90/photo.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 261b00c

Please sign in to comment.