4
0
forked from crowetic/commerce

4 types of layout grids

This commit is contained in:
Belen Curcio 2020-10-04 13:25:16 -03:00
parent b1e6aa25b5
commit cf9495e6c2
5 changed files with 81 additions and 24 deletions

View File

@ -1,5 +1,5 @@
.root { .root {
@apply relative w-full h-full p-6 box-border overflow-hidden; @apply relative w-full p-6 box-border overflow-hidden;
} }
.productTitle { .productTitle {

View File

@ -16,6 +16,7 @@ interface ProductData {
const ProductCard: FC<Props> = ({ className, productData }) => { const ProductCard: FC<Props> = ({ className, productData }) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(s.root, className)
return ( return (
<div className={rootClassName}> <div className={rootClassName}>
{/* Overlay */} {/* Overlay */}
@ -30,18 +31,17 @@ const ProductCard: FC<Props> = ({ className, productData }) => {
</div> </div>
</div> </div>
</div> </div>
<div className={s.wishlistButton}> <div className={s.wishlistButton}>
<Heart /> <Heart />
</div> </div>
</div> </div>
<div className="absolute box-border top-0 left-0 w-full h-full z-0 m-12"> {/* <div className="absolute box-border top-0 left-0 w-full z-0 m-12"> */}
{/* <img {/* <img
className="object-cover object-center w-full" className="object-cover object-center w-full"
src={productData.images.edges[0].node.urlSmall} src={productData.images.edges[0].node.urlSmall}
/> */} /> */}
</div> {/* </div> */}
</div> </div>
) )
} }

View File

@ -1,23 +1,23 @@
.root { .root {
--row-height: calc(100vh - 80px - 56px); --row-height: calc(100vh - 80px - 56px);
@apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-4 w-full; @apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-2 gap-0;
& > * { & > * {
@apply row-span-1 lg:col-span-1 h-full bg-black box-border; @apply row-span-1 lg:col-span-1 bg-black border border-yellow-300 box-border overflow-hidden;
height: 500px; height: 500px;
max-height: 800px;
@screen lg { @screen lg {
height: auto; height: inherit;
} }
} }
}
.layoutA {
& > div:nth-child(6n + 1), & > div:nth-child(6n + 1),
& > div:nth-child(6n + 5) { & > div:nth-child(6n + 5) {
@apply row-span-2 lg:col-span-2 bg-violet; @apply row-span-2 lg:col-span-2 bg-violet;
height: var(--row-height);
@screen lg {
min-height: var(--row-height);
}
} }
& > div:nth-child(6n + 5) { & > div:nth-child(6n + 5) {
@ -32,3 +32,55 @@
@apply bg-cyan; @apply bg-cyan;
} }
} }
.layoutB {
& > div:nth-child(6n + 2) {
@apply row-span-2 lg:col-span-2 bg-violet;
height: var(--row-height);
}
& > div:nth-child(6n + 4) {
@apply row-span-2 lg:col-span-2 bg-blue;
height: var(--row-height);
}
& > div:nth-child(6n + 3) {
@apply bg-pink;
}
& > div:nth-child(6n + 6) {
@apply bg-cyan;
}
}
.layoutC {
& > div:nth-child(12n + 1) {
@apply row-span-2 lg:col-span-2 bg-violet;
height: var(--row-height);
}
& > div:nth-child(12n + 8) {
@apply row-span-2 lg:col-span-2 bg-cyan;
height: var(--row-height);
}
& > div:nth-child(6n + 3) {
@apply bg-pink;
}
}
.layoutD {
& > div:nth-child(12n + 2) {
@apply row-span-2 lg:col-span-2 bg-violet;
height: var(--row-height);
}
& > div:nth-child(12n + 7) {
@apply row-span-2 lg:col-span-2 bg-cyan;
height: var(--row-height);
}
& > div:nth-child(6n + 3) {
@apply bg-pink;
}
}

View File

@ -6,10 +6,20 @@ interface Props {
className?: string className?: string
children?: any children?: any
products: [any] | any products: [any] | any
layout?: 'A' | 'B' | 'C' | 'D'
} }
const ProductView: FC<Props> = ({ products, className }) => { const ProductView: FC<Props> = ({ products, className, layout = 'A' }) => {
const rootClassName = cn(s.root, className) const rootClassName = cn(
s.root,
{
[s.layoutA]: layout === 'A',
[s.layoutB]: layout === 'B',
[s.layoutC]: layout === 'C',
[s.layoutD]: layout === 'D',
},
className
)
return ( return (
<div className={rootClassName}> <div className={rootClassName}>
{products.map((data: any) => ( {products.map((data: any) => (

View File

@ -16,17 +16,12 @@ export default function Home({
return ( return (
<> <>
<ProductGrid <ProductGrid
products={[ products={[...products, ...products, ...products, ...products]}
...products, layout="C"
...products,
...products,
...products,
...products,
...products,
]}
/> />
<div>asdsasad</div> {/* <ProductGrid products={[...products.slice(0, 3)]} layout={2} /> */}
<ProductGrid products={products.slice(3)} /> {/* <div></div> */}
{/* <ProductGrid products={products.slice(3)} /> */}
</> </>
) )
} }