Question 196697 in Html Question posted in
Some basic documentation can be found here.

Html – Use tailwind grid with horizontally dynamic size of content (Masonry, but horizontal)

I am trying to achieve dynamically display of span elements horizontally. When there is no place left, let them move uncut on the second line and so on. Right now it looks close but not what is expected the code to do. Here is the sandbox. And this is the code:

export default function Home({ clientData }) {
  return (
    <div className="p-2 w-[200px] bg-white ">
      {clientData.addons.map((addon, i) => {
        return (
          <span
            key={"addon" + i}
            className={
              addon.value
                ? "border px-4 py-1 text-[#262833]/70 rounded-md font-semibold bg-[#53A659]"
                : "border px-4 py-1 text-[#262833]/70 rounded-md font-semibold"
            }
          >{addon.label}</span>
        );
      })}
    </div>
  );
}

export async function getStaticProps() {
  return {props: {clientData: {addons: [{ value: true, label: "test" },{ value: false, label: "test test" },{ value: false, label: "testtesttesttest" },{ value: false, label: "test a" },{ value: false, label: "test test 23" },{ value: false, label: "test 36" },],},},};
}

On image you can see how it is displayed now:
enter image description here

The result should be something like this:
enter image description here

Results in case if whitespace-nowrap is applied on the spans:
enter image description here

If you look at Masonry style, it is similar to what I try to get, only the difference is that horizontal fitting is prioritized.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    flex-wrap flex gap-2 in the main <div> resolved the issue:
    enter image description here


  2. 0

    Consider using a horizontal flex layout that can wrap. If you would like each row to appear "full", apply flex-grow: 1 via the grow class to the <span> elements.

    function Home({ clientData }) {
  return (
    <div className="p-2 w-[200px] bg-white flex flex-wrap gap-2">
      {clientData.addons.map((addon, i) => {
        return (
          <span
            key={"addon" + addon.id + i}
            className={
              addon.value
                ? "border px-4 py-1 text-[#262833]/70 rounded-md font-semibold bg-[#53A659]"
                : "border px-4 py-1 text-[#262833]/70 rounded-md font-semibold"
            }
          >
            {addon.label}
          </span>
        );
        // })
      })}
    </div>
  );
};

const props = {
  clientData: {
    addons: [
      { value: true, label: "test" },
      { value: false, label: "test test" },
      { value: false, label: "testtesttesttest" },
      { value: false, label: "test a" },
      { value: false, label: "test test 23" },
      { value: false, label: "test 36" },
    ],
  },
};

ReactDOM.createRoot(document.getElementById('app')).render(<Home {...props}/>)
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-slate-700 text-white">
  <div id="app"></div>
</body>

    You could also consider applying inline-block with margin to space them out, but you have a little less control:

    function Home({ clientData }) {
  return (
    <div className="p-2 w-[200px] bg-white">
      {clientData.addons.map((addon, i) => {
        return (
          <span
            key={"addon" + addon.id + i}
            className={`inline-block mr-2 mb-2 ${
              addon.value
                ? "border px-4 py-1 text-[#262833]/70 rounded-md font-semibold bg-[#53A659]"
                : "border px-4 py-1 text-[#262833]/70 rounded-md font-semibold"
            }`}
          >
            {addon.label}
          </span>
        );
        // })
      })}
    </div>
  );
};

const props = {
  clientData: {
    addons: [
      { value: true, label: "test" },
      { value: false, label: "test test" },
      { value: false, label: "testtesttesttest" },
      { value: false, label: "test a" },
      { value: false, label: "test test 23" },
      { value: false, label: "test 36" },
    ],
  },
};

ReactDOM.createRoot(document.getElementById('app')).render(<Home {...props}/>)
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-slate-700 text-white">
  <div id="app"></div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search