diff --git a/components/product/ProductGrid/ProductGrid.module.css b/components/product/ProductGrid/ProductGrid.module.css index a92e0c6ab..f1b07c035 100644 --- a/components/product/ProductGrid/ProductGrid.module.css +++ b/components/product/ProductGrid/ProductGrid.module.css @@ -1,4 +1,8 @@ .root { @apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-4 w-full h-96; min-height: calc((100vh - 80px - 56px) * 2); + + & div:nth-child(1) { + @apply row-span-2 lg:col-span-2 bg-red-200 h-full; + } } diff --git a/components/product/ProductGrid/ProductGrid.tsx b/components/product/ProductGrid/ProductGrid.tsx index f185022e8..98d0a3ed5 100644 --- a/components/product/ProductGrid/ProductGrid.tsx +++ b/components/product/ProductGrid/ProductGrid.tsx @@ -12,7 +12,7 @@ const ProductView: FunctionComponent = ({ products, className }) => { const rootClassName = cn(s.root, className); return (
-
+
diff --git a/package.json b/package.json index 16b4994d4..d113ad640 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "lodash": "^4.17.20", "next": "^9.5.4-canary.20", "postcss-nested": "^5.0.1", + "postcss-nesting": "^7.0.1", "react": "^16.13.1", "react-dom": "^16.13.1", "swr": "^0.3.3" diff --git a/postcss.config.js b/postcss.config.js index 5bacd33fd..e387d0950 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,7 @@ module.exports = { plugins: [ "tailwindcss", + "postcss-nesting", "postcss-flexbugs-fixes", [ "postcss-preset-env", diff --git a/yarn.lock b/yarn.lock index 899db4c7f..baa2b8374 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5719,7 +5719,7 @@ postcss-nested@^5.0.1: dependencies: postcss-selector-parser "^6.0.4" -postcss-nesting@^7.0.0: +postcss-nesting@^7.0.0, postcss-nesting@^7.0.1: version "7.0.1" resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.1.tgz#b50ad7b7f0173e5b5e3880c3501344703e04c052" integrity sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==