Как я могу создать сетку, которая соответствует пользовательской спецификации? ⇐ CSS

[Anonymous]

У меня есть рекламная система с двумя категориями: верхняя и базовая. Объявления загружаются из бэкэнда в случайном порядке, возвращая лицевой объект, где ведутся лучшие объявления, а базовая реклама приходит после. Я хочу отобразить их в сетке, используя либо CSS GRID, либо Flexbox (или любая лучшая альтернатива, которую кто -то может предложить - я бы очень ценил это). < /P>
Мне нужны следующие условия макета в одной и той же контейнере сетки или гибкой ящика: < /p>
/> Таблетка: 3 в строке < /li>
Надзор: 4 на строку < /li>
Большой экран: 5 на строку < /li>
< /ul>
Основная реклама: < /p>

mobile: 2 на ряд < /li>
/> Настольный компьютер: 4 на строку < /li>
Большой экран: 5 в строке < /li>
< /ul>
Это то, что я реализовал до сих пор, но ряды не выровняются должным образом, и некоторые в конечном итоге больше, чем другие, и наоборот. < /p>
не выровняются.//styles.ts
export const AdsGrid = styled.div`
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 1rem;
width: 100%;
`;

export const GridItem = styled.div`
transition: transform 0.3s ease;
&:hover {
transform: scale(1.02);
}

// Mobile (default)
flex: ${({ isTop }) => (isTop ? "31.33%" : "15%")};

@media (min-width: ${({ theme }) => theme.breakpoints.md}) {
width: ${({ isTop }) => (isTop ? "33.33%" : "25%")}; // tablet
}

@media (min-width: ${({ theme }) => theme.breakpoints.lg}) {
width: ${({ isTop }) => (isTop ? "25%" : "20%")}; // desktop
}

@media (min-width: ${({ theme }) => theme.breakpoints.xxl}) {
width: ${({ isTop }) => (isTop ? "31.33%" : "15%")}; // big screen
}
`;

< /code>
и компонент: < /p>

import { useModelProfileContext } from "@/context/ModelProfileContext";
import InfiniteScroll from "react-infinite-scroll-component";
import { AdCardSkeleton, ListSkeleton } from "@/components";
import { AdsContainerStyles, AdsGrid } from "@/components/home/ads/styles";
import { AdCard } from "@/components/home";

const gridConfig = {
gutter: 16,
xs: 3,
sm: 2,
md: 3,
lg: 4,
xl: 4,
xxl: 6,
};

export default function AdsWrapper() {
const { data, hasMore, loadMore, isLoading } = useModelProfileContext();

if (isLoading && data.length === 0) {
return (



);
}

return (



{data.map((model) => (

))}



);
}

< /code>
и adcard.tsx < /p>

"use client";

import {
GridItem,
IsTopAdTagStyles,
NewProfileTagStyles,
} from "@/components/home/ads/styles";
import { Badge, Flex, Typography } from "antd";
import Link from "next/link";
import { CustomCard, Text } from "@/components/antd";
import { AdCover } from "@/components/home";
import { RiVerifiedBadgeFill } from "react-icons/ri";
import { formatSentences, sectionColor } from "@/utils/helper";
import { TfiLocationPin } from "react-icons/tfi";
import { Model } from "@/types/models";

export default function AdCard({ model }: { model: Model }) {
const sectionHex = model?.section && sectionColor(model.section);
const isNew = model?.isNew || false;
const isTop = model?.isTop || false;
return (




{isNew && (
Novedad
)}
{isTop && Novedad}




{model.alias}



{formatSentences(model?.ad?.content || "")}




{model?.location?.cityName}






);
}

```

[Image][1]

[1]: https://i.sstatic.net/Kn6Rs3JG.png


Подробнее здесь: https://stackoverflow.com/questions/796 ... ifications