React+ grid

@TheDevilAdvocat · Регистрация: 10.07.2022

Студворк — интернет-сервис помощи студентам

Добрый день, недавно начал изучать реакт и столкнулся с небольшим конфузом.
Интернет магазин, слева sidebar и справа от него 3 колонки с товарами. Для глобально разметки использовал grid-разметку, с 4 колонками

Code
1
2
3
4
5
6
7
8
9
10
11
12
.main_cont{
    grid-area: main;
    width: 94%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-areas: 
    "sidebar view view view"
    "sidebar product product product";
    grid-template-rows:100px 600px; 
    grid-template-columns: repeat(4, 1fr)  ;
}

Функция возвращает товар, и этот тег нужно вызвать 9 раз
Но каждый раз он вызывает в одном и том же месте, если пытаюcь разместить товары флексом, то они двигаются в пределах первой колонки
И вот суть вопроса, как разместить товары в разные колонки?

PS
Я придумал только 1 вариант, но считаю его лепухой
Создал вот такую функцию

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const Products=()=>{
    return(
        <div className={css.main}>
            <div className={css.row}>
                <Product/>
                <Product/>
                <Product/>
            </div>
            <div className={css.row}>
                <Product/>
                <Product/>
                <Product/>
            </div>
        </div>
    )
}

Здесь я уже флексами распологаю элементы так как надо, а в основной файл импортирую эту функцию и выглядит все нормально

@mr_dramm · 10.07.2022, 19:57

---------

Добавлено через 14 минут
попробуйте такую разметку

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
 
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
 
    .main_cont {
        width: 94%;
        margin-left: auto;
        margin-right: auto;
        display: grid;
        grid-template-areas:
            "sidebar view view view"
            "sidebar product product product";
        grid-template-rows: 100px 600px;
        grid-template-columns: repeat(4, 1fr);
    }
 
    .view {
        grid-area: view;
    }
 
    .product {
        grid-area: product;
    }
 
    .product,
    .view {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
 
    .item {
        border: solid;
    }
 
    .sidebar {
        grid-area: sidebar;
        border: solid;
    }
    </style>
</head>
 
<body>
    <div class="main_cont">
        <div class="sidebar">sidebar</div>
        <div class="view">
            <div class="item">view 1</div>
            <div class="item">view 2</div>
            <div class="item">view 3</div>
        </div>
        <div class="product">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>
    <script></script>
</body>
 
</html>

Новые блоги и статьи Все статьи Все блоги /
1С: Контроль уникальности заводского номера Maks 23.03.2026 Алгоритм контроля уникальности заводского (или серийного) номера на примере документа выдачи шин для спецтехники с табличной частью. Данные берутся из регистра сведений, по которому настроено. . .	Хочу заставить корпорации вкладываться в здоровье сотрудников: делаю мат модель здравосохранения anaschu 22.03.2026 e7EYtONaj8Y Z4Tv2zpXVVo https:/ / github. com/ shumilovas/ med2. git	1С: Программный отбор элементов справочника по группе Maks 22.03.2026 Установка программного отбора элементов справочника "Номенклатура" из модуля формы документа. В качестве фильтра для отбора справочника служит группа номенклатуры. Отбор по наименованию группы. . .	Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .
Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	1С: Программный отбор элементов справочника по значению перечисления Maks 21.03.2026 Установка программного отбора элементов справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит значение перечислений. / / Событие "НачалоВыбора" реквизита на форме. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .