使用React和CSS的响应式网格卡
#css #网络开发人员 #react #nextjs

Image description
在网络开发的世界中，用户界面是吸引用户注意并为他们提供愉快体验的关键。实现这一目标的一种方法是创建展示各种类别或产品的视觉吸引力的网格。在本教程中，我们将带您了解如何使用React和CSS网格创建优雅的类别网格。

介绍

在本教程中，我们将使用React并用CSS网格构建类别网格组件。网格将显示不同类别的图像和描述，为用户提供引人入胜的接口。

入门

在我们深入探讨代码之前，请确保您在计算机上安装了Node.js和NPM。如果没有，您可以从官方Node.js网站下载并安装它们。

让我们开始设置我们的React应用程序并创建必要的组件。

项目设置：

使用Create-React-app创建一个新的React应用程序。
npx create-react-app category-grid-app cd category-grid-app

组件设置：
用以下代码替换 src/app.js 的内容。


import React from "react";
import "./globals.css";

const categories = [
  {
    to: "categories/furnitures",
    imgSrc:
      "https://images.pexels.com/photos/1612351/pexels-photo-1612351.jpeg?auto=compress&cs=tinysrgb&w=600",
    alt: "img1",
    description: "Live Comfortably",
    className: "grid-one",
  },
  {
    to: "categories/skin-care",
    imgSrc:
      "https://images.pexels.com/photos/4046316/pexels-photo-4046316.jpeg?auto=compress&cs=tinysrgb&w=600",
    alt: "img2",
    description: "Skincare",
    className: "grid-two",
  },
  {
    to: "categories/kitchen",
    imgSrc:
      "https://images.pexels.com/photos/1080721/pexels-photo-1080721.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    alt: "img3",
    description: "Kitchen",
    className: "grid-four",
  },
  {
    to: "categories/electronics",
    imgSrc:
      "https://images.pexels.com/photos/356056/pexels-photo-356056.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
    alt: "img4",
    description: "Electronics",
    className: "grid-four-low",
  },
];

export default function App() {
  return (
    <div className="home-container">
      <div className="container">
        <div className="grid-container">
          {categories.map((category, index) => (
            <div key={index} className={`featured ${category.className}`}>
              <a Href={category.to}>
                <div id={`img${index + 1}`} className="lil-overlay"></div>
                <img src={category.imgSrc} alt={category.alt} />
                <p className="main-description">{category.description}</p>
              </a>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

样式：在src文件夹中创建一个名为style.css的新文件

@import url('https://fonts.googleapis.com/css2?family=Blinker:wght@200;400;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: 'Blinker', sans-serif;
  position: relative;
}

html {
  font-size: 62.5%;
}

/* global */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 19px;
}
.grid-container {
  display: grid;
  height: 50rem;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: 'one two four' 'one two four-low';
  gap: 1.3rem;
  margin-top: 1.3rem;
}

.home-container {
  padding-top: 12rem;
}

.featured {
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.main-description {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  color: white;
  font-size: 3.8rem;
  font-weight: 600;
}

.featured img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.grid-one {
  grid-area: one;
}

.grid-two {
  grid-area: two;
}

.grid-four {
  grid-area: four;
}

.grid-four-low {
  grid-area: four-low;
}

.lil-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease-in;
}



#img1:hover {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

#img2:hover {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

#img3:hover {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

#img4:hover {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

@media (max-width:750px) {
  .grid-container {
      height: 500px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-template-areas:
          "one two"
          "four four-low";
      grid-gap: 13px;
      gap: 13px;
  }
}

@media (max-width:450px) {
  .main-description {
      bottom: 1rem;
      left: 1rem;
      font-size: 3rem;
  }
}

@media (max-width:400px) {
  .main-description {
      bottom: 1rem;
      left: 0.5rem;
      font-size: 2.5rem;
  }
}

创建类别网格

我们的React组件使用类别数组的数据呈现类别的网格。每个类别都以图像，描述和覆盖效果显示。让我们分解此代码的关键组件：

我们有一个名为类别的数组，其中包含代表每个类别的对象。每个对象都包含（URL），IMGSRC（图像URL），ALT（图像ALT文本），描述（类别描述）和className（CSS类名称）。

在应用程序组件中，我们映射类别数组以生成网格项目。每个类别的className用于将项目定位在网格中。
使用.lil-reforlay CSS类实现覆盖效果，该类提供了悬停的半透明背景。
媒体查询用于使网格响应。随着屏幕宽度的减小，网格适应以确保各种设备上的光滑体验。

结论

在本教程中，我们学习了如何使用React和CSS网格创建令人惊叹的类别网格。我们利用基于反应的基于组件的方法来构建一个动态网格，以展示不同的类别。 CSS网格的使用使我们能够以优雅而响应的方式定位类别。请随时自定义代码以匹配您的项目的设计和要求。

请记住，本教程为您的类别网格提供了基础。您可以扩展此概念以集成实际类别页面，动态数据获取以及更具交互性功能，以创建功能齐全且引人入胜的用户体验。愉快的编码！