У меня есть рекламная система с двумя категориями: верхняя и базовая. Объявления загружаются из бэкэнда в случайном порядке, возвращая лицевой объект, где ведутся лучшие объявления, а базовая реклама приходит после. Я хочу отобразить их в сетке, используя либо 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
Как я могу создать сетку, которая соответствует пользовательской спецификации? ⇐ CSS
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение
-
-
Как я могу создать сетку, которая соответствует пользовательской спецификации?
Anonymous » » в форуме CSS - 0 Ответы
- 5 Просмотры
-
Последнее сообщение Anonymous
-
-
-
Как создать сетку (например, сетку из миллиметровой бумаги) с помощью только CSS?
Anonymous » » в форуме CSS - 0 Ответы
- 97 Просмотры
-
Последнее сообщение Anonymous
-