使用 CSS 网格流不同大小的块的轮播

Question

有一个部分包含人们的感言。我希望它们位于 CSS 网格中，每个网格元素的大小基于其内容，并且所有元素都相互环绕。

有这种可能吗？应该使用哪些库？是否可以用它制作一个 React-carousel，如截图所示：

我尝试使用react-masonry-css库，但这不是我想要的结果。

谢谢！

Answer 1

要为推荐部分创建 CSS 网格布局，您可以按照以下步骤操作：

HTML 结构： 假设您有一个推荐项目列表，将它们包装在容器元素中：

<div class="testimonial-container">
  <div class="testimonial-item">Testimonial 1 content</div>
  <div class="testimonial-item">Testimonial 2 content</div>
  <!-- More testimonial items -->
</div>

CSS 网格样式： 应用 CSS 网格样式来创建所需的布局：

.testimonial-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, max-content));
  gap: 20px;
}

grid-template-columns 的 Repeat(auto-fit, minmax(min-content, max-content)) 部分确保网格项目将根据其内容大小自动换行。

创建 React 轮播：

要创建轮播，您可以使用react-responsive-carousel库。该库提供了一种在 React 应用程序中实现响应式轮播的简单方法。

安装库： 使用npm或yarn安装react-responsive-carousel库：

npm install react-responsive-carousel

使用轮播组件： 使用库中的 Carousel 组件包装您的推荐组件：

import React from 'react';
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';

const TestimonialCarousel = () => {
  return (
    <Carousel>
      <div>
        <p>Testimonial 1 content</p>
      </div>
      <div>
        <p>Testimonial 2 content</p>
      </div>
      {/* Add more testimonial items */}
    </Carousel>
  );
};

export default TestimonialCarousel;