Tailwind Flex Box Responsive Grid with Cards 问题

Question

这是我开始的地方

预览

代码：

<div class="container my-12 mx-auto">
            <div className="flex flex-wrap ">
              {error ? <p>{error.message}</p> : null}
              {!isLoading ? (
                users.map(user => {
                  const { username, name, email } = user;
                  return (
                    <div
                      key={username}
                      className="w-full md:w-1/2 lg:w-1/3  my-5"
                    >
                      <article class="overflow-hidden rounded-lg shadow-lg">
                        <img
                          alt="Placeholder"
                          className="block h-auto w-full"
                          src="https://picsum.photos/600/400/?random"
                        />
                        <header class="flex items-center justify-between leading-tight p-2 bg-white invisible lg:visible">
                          <h1 class="text-lg">{name}</h1>
                          <p class="text-grey-darker text-sm">
                            {email}
                          </p>
                        </header>
                      </article>
                    </div>

然后我试着让它更间隔开，就像这里的 codepen 示例所示： https://codepen.io/codetimeio/pen/RYMEJe

但每次我尝试添加一些填充和边距时，它都会转义到下一行，但我无法弄清楚为什么会这样做或如何阻止它

这是我更新的行：

<div key={username} className="w-full md:w-1/2 lg:w-1/3  my-5 mx-5">

这是我的 tailwind 配置文件

module.exports = {
  theme: {
    container: {
      center: true
    },
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px"
    },
    fontFamily: {
      display: ["Gilroy", "sans-serif"],
      body: ["Graphik", "sans-serif"]
    },
    extend: {}
  },
  variants: {},
  plugins: []
};

我真的很想知道我做错了什么，这样我就可以使用 tailwind 作为我的主要模板框架

这是根据下面给出的答案更新的代码

<div class="container my-12 mx-auto bg-gray-400">
            <div className="flex flex-wrap ">
              {error ? <p>{error.message}</p> : null}
              {!isLoading ? (
                users.map(user => {
                  const { username, name, email } = user;
                  return (
                    <div key={username} className="w-full p-5 md:w-1/2 lg:w-1/3">
                      <article className="overflow-hidden rounded-lg shadow-lg">
                        <img alt="Placeholder" className="w-full" src="https://picsum.photos/600/400/?random" />
                        <header className="flex items-center justify-between leading-tight p-2 bg-white">
                          <h1 className="text-lg">{name}</h1>
                          <p className="text-grey-darker text-sm">
                            {email}
                          </p>
                        </header>
                      </article>
                    </div>

Answer 1

它的发生是因为额外的边距，w-1/3 意味着 ~ width: 33.3333% 如果你在它上面添加一个边距，三个不能放在一行中。

有其他方法（考虑到装订线或 gap property 的宽度），但在这种情况下，您可以只使用填充而不是边距，因为您的卡片周围已经有一个展示性的包装元素。

示例：https://codepen.io/tlgreg/pen/RmLMOx

不相关，但查看您的代码时有几点注意事项：

除非您在配置中使用旧的调色板，否则 grey-darker 将不起作用。
img 在 v1.

block

invisible和lg:visible改成visibility，header会占用space，如果那不是你想要的，应该是hidden并且lg:flex.

Tailwind Flex Box Responsive Grid with Cards 问题

Tailwind Flex Box Responsive Grid with Cards issue

html

javascript

css

reactjs

tailwind-css