Адаптивная решетка Tailwind Flex Box с карточками - PullRequest
Новая
       26

Адаптивная решетка Tailwind Flex Box с карточками

0 голосов
/ 20 мая 2019

Здесь я начал с

Предварительный просмотр

enter image description here

Код: 

<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>

Тогда япопытался сделать его более разнесенным, как показано в примере с кодом: https://codepen.io/codetimeio/pen/RYMEJe

, но каждый раз, когда я пытаюсь добавить некоторые отступы и маржа, он уходит на следующую строку, и я не могу понять, почему он это делает иликак я могу это остановить

enter image description here

Вот строка, которую я обновил: 

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

Вот мой файл конфигурации попутного ветра 

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: []
};

Я действительно хочу понять, что я делаю неправильно, чтобы я мог использовать попутный ветер в качестве моей основной структуры шаблонов

Вот обновленный код согласно приведенному ниже ответу 

<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>

1 Ответ

1 голос
/ 21 мая 2019

Это происходит из-за дополнительных полей, w-1/3 означает ~ width: 33.3333% Если вы добавите поле сверху, три не смогут поместиться в одну строку.

Существуют альтернативные способы (ширина с учетом желоба или свойство промежутка ), но именно в этом случае вы можете просто использовать отступы вместо полей, потому что у вас уже есть элемент обтекания презентации вокруг ваших карточек .

Пример: https://codepen.io/tlgreg/pen/RmLMOx

Не связано, но несколько заметок смотрят на ваш код:

  • Если вы не используете старую цветовую палитру в конфигурации, grey-darker не будет работать.
  • img - это block по умолчанию в v1.
  • invisible и lg:visible изменяет visibility, заголовок будет занимать место, если это не то, что вам нужно, это должны быть hidden и lg:flex.
...