Automatically aligning flex items in Tailwind/Vue to match the height of their neighboring elements

Looking to create a grid of elements using flex, tailwind, and vue like this: https://i.sstatic.net/UyFIE.png

I have a backend that provides me with a lot of items, and I want to display each item within a flex container next to each other, with only 2 items in one row. Achieving this with justify-between and w-1/2 for each item is easy. However, the challenge is to make sure that items in the same row have the same height, adjusting based on the content of the item with more content. The height is currently fixed with only the margins changing. How can I make this work? I have a similar setup working but only with a predetermined number of items. How can I make this work dynamically, since I do not know how many items I will receive?

My current code:

<div class="mt-3 flex flex-row flex-1 flex-wrap justify-between">
  <div v-for="item in items"  class="w-1/2 mt-1.5">
    <div
      class="border border-solid rounded-lg border-black border-opacity-10"
    >
    The content for each item belongs here
     </div>
      </div>
    </div>
cssvue.jsflexboxtailwind-css

Answer №1

To optimize the loop, divide it into chunks of 2 and implement the following strategy. Check out the demo for reference.

<div class="p-4 space-y-4">
  <div class="flex space-x-4">
    <div class="flex w-1/2 border p-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum assumenda eaque veritatis, porro culpa reprehenderit nisi. Iusto labore ex culpa excepturi velit eos a consequatur beatae aliquam, vero quidem ut.Beatae dolores eligendi accusantium delectus fugiat ex iure vero quam doloribus quo sapiente, necessitatibus fuga! Voluptatibus eaque aut quis omnis magni dolorum iusto delectus laborum, nesciunt id quia praesentium rerum?</div>
    <div class="flex w-1/2 border p-4">small content</div>
  </div>

  <div class="flex space-x-4">
    <div class="flex w-1/2 border p-4">small content</div>
    <div class="flex w-1/2 border p-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni ut quod voluptas nisi modi perspiciatis aliquid ad tempora cum corporis sapiente blanditiis dicta, esse reiciendis sed eveniet, libero, dignissimos perferendis.</div>
  </div>

  <div class="flex space-x-4">
    <div class="flex w-1/2 border p-4">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates eum saepe natus, numquam quibusdam praesentium, incidunt debitis at, nihil similique quidem doloribus? Natus delectus vero quidem, autem fugiat amet odit. Maxime dolorum nostrum vitae adipisci, exercitationem corporis iure, repellat sunt quidem numquam voluptatem beatae dignissimos aliquid suscipit laboriosam modi quibusdam excepturi possimus voluptatibus voluptas deleniti maiores saepe atque doloremque. Totam. Fuga dignissimos ducimus dicta pariatur temporibus dolor commodi soluta. Expedita neque hic explicabo deleniti laudantium animi nesciunt aut vero. Deserunt, sint. Deleniti illum optio rem unde placeat ab eos fuga. Cumque illum odio, consequuntur repudiandae quis error fugit deserunt velit modi illo soluta nihil architecto, ex cum nesciunt, ad laboriosam. Ex nihil unde modi facere quibusdam, nesciunt quod aliquid voluptatum.</div>
    <div class="flex w-1/2 border p-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni ut quod voluptas nisi modi perspiciatis aliquid ad tempora cum corporis sapiente blanditiis dicta, esse reiciendis sed eveniet, libero, dignissimos perferendis.</div>
  </div>
</div>

Answer №2

If you want to view a code example, click on this link. For dynamic data, the code can be written as shown below.

<div class="grid grid-cols-2">
  <div v-for="item in items">
   <div class="border p-4 rounded-lg m-3">
    Lots of content here
   </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide on defining the width of an element within a flex container when it overflows

Here is the code snippet I have: .divA { background: red; width: 500px; display: flex; flex-direction: row; overflow-y: scroll; } .epi { width: 50%; background: blue; } <div class="divA"> <div class="epi"> <h1>dsds ...

css

Bootstrap allows for word wrapping on either one or three lines

I am currently utilizing Bootstrap 3 for my website, and I have a sentence composed of three parts at a certain point on the page. For example, it might read "Bud Spencer walks with Terence Hill." where X="Bud Spencer", Y="walks with", Z="Terence Hill." T ...

htmlcsstwitter-bootstrap

Applying styled numbering to elements using nth-child selector in

I have a div with multiple p tags inside. My goal is to assign them numbers using CSS. The number of p tags may vary. By using the :nth-child() selector and the ::before pseudo-element, I can achieve something like this: div p:first-child::before { ...

htmlcsscss-selectorspseudo-class

I'm looking to customize my d3.js Bar Graph by changing the color of each bar individually and adding a Scale for them. How can I

I am currently working on constructing a graph that illustrates the data for the Amount of Resources utilized Per Project by creating a bar graph. I am aiming to customize the colors of the bars so that each one has its own unique color. Currently, the col ...

javascripthtmlcssd3.jsvisualization

When attempting to reference from a variable, you may encounter an error stating that setAttribute

In my VueJS project, I am facing an issue with dynamically adding the width attribute to an inline SVG code stored in a variable called icon. Despite having the correct SVG icon code in the variable, the setAttribute method is not working as expected and t ...

javascriptvue.jssvg

Expanding the onClick functionality for a `router-link` in Vue3 router: A step-by-step guide

I'm trying to create a <router-link /> in my Vue 3 application that will take me to another page, but I also need to execute an additional function when this link is clicked. Currently, I am having to wrap the <router-link /> in a redunda ...

vue.jsvue-router

Tips for using jQuery dropdown menus

I am currently in the process of creating a prototype for a quick dropdown menu using jQuery. However, I have reached the limits of my knowledge on jQuery and could use some assistance in solving my issue. My objective is to have a dropdown animate down w ...

javascriptjqueryhtmlcss

Improving post liking response time in a Firebase Vue application

My app has a feature where users can like different 'procedures' (similar to posts or pages). Currently, when a user taps on the like button, it triggers the "likeProcedure" method, which then dispatches an action to update the UI. While this pro ...

firebasevue.jsfirebase-realtime-databasevuexlag

Ensuring that my divs remain stationary despite changes in the size of the browser window

Hey there! I'm new to web design/development and I've been working on a simple website to get the hang of things. I managed to make my webpage look good at full screen, but as soon as I resize the window, everything starts shifting around and it ...

htmlcss

Scrolling left and right, text floats atop the image

Trying to implement a rollover effect image using CSS. The initial state shows only the title, but upon hovering, a text overlay appears. Everything seems to be working well except that the text area extends off to the right. Also, there is scrolling up an ...

htmlcssimagetextrollover

A guide to showing JSON data in reverse order on a Vue.js HTML page

Here is the order of my JSON data: {"data": {"pid": 50, , "location": {"lat": 10.0520222278408, "lon": 76.5247535705566, "state": "Kerala", "country": "India"}, "package": 0, "contact": {"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_emai ...

htmljsonvue.jsvue-component

The issue of VueRouter malfunctioning in history mode within Wordpress

I have integrated Vue into my Wordpress theme, but I am facing an issue with the router when setting mode: 'history'. The site goes blank and even after trying to configure the .htaccess file, nothing seems to work. My project is located in the V ...

javascriptwordpress.htaccessvue.jsvue-router

What methods can I use to ensure my HTML/CSS code is compatible with all browsers? It functions properly on Chrome but encounters issues on Safari, Edge, and other

My hosting for the website is with bluehost, and interestingly when viewed on Chrome, everything appears perfect. However, upon switching to Safari, I noticed that the background of the about me section is not black as intended, and the footer seems to be ...

htmlcss

Struggling with eliminating the bottom margin on your website?

I can't figure out where this mysterious margin is coming from in the CSS - there's a consistent 30px of space at the bottom of each web page. Any assistance would be greatly appreciated. I know it's probably something simple, but my brain ...

htmlcss

Having difficulty adjusting the width of the CSS menu bar to fit the entire page

I found a useful CSS menu tutorial online that seems to work well, but unfortunately, it doesn't stretch the full width of the page. You can check out the tutorial here: Even after trying to set the width to 100%, the menu still falls short of extend ...

htmlcssnavbar

"Integrating Phylotree.js into your Nuxt project: A step-by-step

After installing phylotreejs with the command npm install --save phylotree, I encountered an issue when trying to import it into my page as shown below: import * as d3 from 'd3'; import phylotree from 'phylotree/build/phylotree'; This ...

vue.jsd3.jsvuejs2nuxt.js

Deleting a division with the help of media queries

As a challenge, I am attempting to eliminate the .navbar-brand>img element once the screen size exceeds 768px by using media queries. Unfortunately, my efforts have not been successful so far. Although the styling applied to the img is successfully remo ...

cssbootstrap-4media-queries

Guide on creating a menu that remains open continuously through mouse hovering until the user chooses an option from the menu

I have a unique scenario where I am working with two images. When the mouse hovers over each image, two corresponding menu bars appear. However, the issue is that when the mouse moves away from the images, the menu disappears. Any suggestions on how to im ...

javascriptjqueryhtmlcss

What are the reasons behind the malfunctioning of VUE 3 CompositionAPI's reactivity?

Can you explain the issue with reactivity between unrelated components? Here's the code that demonstrates the problem: ModalsController.js: import { ref } from 'vue'; export const useModal = (init = false) => { const isShowModal = ref( ...

vue.jsvuejs3

Creating a responsive design with dynamic width using HTML and CSS to handle overflow situations

Struggling to figure out how to achieve this in html, I would like the solution to be limited to just html + css. Javascript/jquery is being utilized on the site, yet I don't want my design to rely on javascript. Section A contains a list of variable ...

csshtml