useGiphy

Gifs.jsx

import React from "react";
import styles from "./Gifs.module.css";

function Gifs({ gifs }) {
  return (
    <div className={styles["gifs-container"]}>
      <div className={styles["row"]}>
        {gifs.map(gif => (
          <div className={styles["item"]} key={gif}>
            <video autoPlay loop src={gif} />
          </div>
        ))}
      </div>
    </div>
  );
}

export default Gifs;

Gifs.module.css

.gifs-container {
  background-color: #fff;
  padding: 10px 0px 10px 10px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.row > .item {
  flex-grow: 1;
  flex: 1 1 30%;
}

.item {
  padding: 10px;
}