Height-adjustable Rows

I recently encountered a challenge while designing a layout for user reviews in one of my projects. Each review varies in length, leading to irregular row lengths with different div element sizes. My goal is to create rows with 3 divs each and have the subsequent divs start below the top row div. Despite my efforts, I couldn't achieve this layout. How can I accomplish this? (Refer to the image linked below for reference.)

Edit: As requested, here's a code snippet for context. Link: https://play.tailwindcss.com/yw2VoqpTBi

<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 min-h-fit ">
      <div className="h-fit grid gap-8 p-6 border rounded-lg bg-red-500">
        [Review content here]
</div>
      <div className="h-fit grid gap-8 p-6 border rounded-lg bg-red-500">
        [Review content here]
</div>
      <div className="h-fit grid gap-8 p-6 border rounded-lg bg-red-500">
        [Review content here]
</div>
...
    </div>

View visual representation of the issue.

javascripthtmlcssnext.jstailwind-css

Answer №1

The desired layout you're aiming for bears some resemblance to a concept known as Masonry layout. To achieve this, you can utilize the flex utility and incorporate space-x / space-y to manually create columns and accomplish the layout structure. Here is an example:

<div class="flex min-h-fit space-x-4">
  <div class="w-full sm:w-1/2 md:w-1/3">
    <!-- First column -->
    <div class="h-fit p-6 border rounded-lg bg-red-500 mb-4">
      <!-- Your content -->
    </div>
    <div class="h-fit p-6 border rounded-lg bg-red-500 mb-4">
      <!-- Your content -->
    </div>
  </div>
  <div class="w-full sm:w-1/2 md:w-1/3">
    <!-- Second column -->
    <div class="h-fit p-6 border rounded-lg bg-red-500 mb-4">
      <!-- Your content -->
    </div>
    <div class="h-fit p-6 border rounded-lg bg-red-500 mb-4">
      <!-- Your content -->
    </div>
  </div>
  <div class="w-full sm:w-1/2 md:w-1/3">
    <!-- Third column -->
    <div class="h-fit p-6 border rounded-lg bg-red-500 mb-4">
      <!-- Your content -->
    </div>
    <div class="h-fit p-6 border rounded-lg bg-red-500 mb-4">
      <!-- Your content -->
    </div>
  </div>
</div>

Tailwind Playground

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

Maintaining hot reload functionality by sharing components between two projects

We are currently working on developing 2 products utilizing Angular 2 (although the same issue may arise with React). Our goal is to find a way to share components between these two products. Initially, we considered breaking things up into npm modules as ...

javascriptangularjsreactjsnpm

Tips on setting dynamic headers in tabulator

Is there a way to dynamically set the header name passed from JSON? Additionally, how can I hide multiple columns in Tabulator instead of just one? I would also like to be able to show/hide multiple columns on button click. These questions pertain to a co ...

javascripttabulator

Executing SQL queries in JavaScript using PHP functions

Is it allowed, or is it a good practice? It worked for me, but what issues might I face in the future? Just to clarify, I am new to PHP scripting. // button <button type="button" class="btn btn-primary" id="Submit-button" >Save changes</button> ...

javascriptphpsql

Create an animation effect where a div increases in height, causing the divs beneath it to shift downward in a

My aim is to create columns of divs where the user can click on a div to see more content as the height expands. I've managed to set this up, but it seems there's an issue with the document flow. When I click on a div in the first column, the div ...

javascriptjqueryhtmlcss

Should the ListItem expand and collapse when clicked?

My react/material-ui component has the following structure: export const TodoItem: React.FC<Props> = ( {todo, itemKey}) => { const [dialogState, setDialogState] = React.useState<boolean>(false); const handleClose = () => { setDial ...

javascriptreactjsmaterial-ui

Utilizing styled-components or personalized components alongside cypress

Cypress selector made simple: just use cy.get('.myComp') and it will select <input className="myComp" />. But when it comes to styled-components... Perhaps we have to resort to using custom attributes like cy-data or cy-testid. Sadly, it s ...

javascriptcypresse2e-testing

What methods can be used to selectively intercept routes?

On the /job page, when a user clicks on a job in the Link component, it intercepts the route to /job/<jobId>. Is there a way to conditionally redirect the user to the actual page (rendering the entire page without intercepting the route) without hav ...

reactjsnode.jsnext.js

When utilizing row.add in AngularJS and jQuery DataTables, the ng-click function may not function as expected

As a newcomer to angularjs, I have successfully implemented the jQuery DataTable directive with angularJS. However, I am encountering an issue when trying to add a JavaScript function to "TR" dynamically using "ng-click", as it does not seem to be recogniz ...

javascriptjqueryangularjsdatatables

Initiate the printing process by executing the window.print() function. As the document is being

Here's the code snippet : <body> <div class="headerCont noprint"> <div class="headerHold"> <div class="logoCont"><img src="images/logo.jpg" width="104" height="74" alt="Logo"> ...

javascripthtmlcssprinting

Error encountered in my application due to Node.js (Error [ERR_HTTP_HEADERS_SENT]: Unable to change headers once they have been sent to the client)

Experiencing an error message in my application when typing nodeJS. Please assist. , Encountering an error after sending the first POST request while running the app. const express = require('express') const Workout = require("../models/work ...

javascriptnode.jsreactjsexpress

Utilize AngularJS $sanitize to convert characters into HTML code

When attempting to decode characters using $sanitize, I encountered a problem. I must use the $sanitize service instead of ng-bind-html, yet I am getting different results with each one. Despite ng-bind-html utilizing $sanitize internally, the outputs are ...

javascripthtmlangularjs

Having difficulty retrieving textbox value through ajax within a php function

There is a text box for weight input where the user can enter the weight and then click a button. Here's the HTML code snippet: <tr> <td> <?php echo "Weight:"; ?> </td> <td> <span class=&ap ...

javascriptphpjqueryajax

Converting Numbers into Words with the power of HTML and JavaScript

CONVERT NUMBER TO WORDS Write a simple JavaScript program that converts a number to words. Include an HTML page where the user can input the number to be converted. The conversion process should involve using both for loops and switch statements. ...

javascriptfor-looptype-conversionswitch-statementstring-conversion

Retrieve email addresses from an HTML document

I recently obtained the HTML source code from a website and am now exploring ways to extract specific content, such as email addresses, from the source. I am considering utilizing a tool like jsoup with the following function: public static String html2te ...

javahtmlemailextract

What causes npm start to fail with a CORS error, but run successfully with HOST=127.0.0.1 npm start?

Currently, I am in the process of creating a basic application that utilizes Flask for the backend and React for the frontend. An issue arises when attempting to initiate my React application through npm start, as it triggers a CORS error. Strangely enough ...

javascriptreactjsflasknpmcors

Make sure link opens in the same window/tab

Currently, I am utilizing the Open Link in Same Tab extension on Google Chrome. This extension can be found here. The purpose of this extension is to ensure that all links open in the same window/tab, which is necessary for touch screen kiosk left/right s ...

javascriptjqueryhtmlgoogle-chromekiosk

One or multiple web browsers set in the Browserslist of the project

I have recently started working with the Ionic framework and encountered some warnings while setting up my application. Can anyone help me with a solution? [ng] When starting the Ionic application, I received the following warnings: [ng] One or more browse ...

javascriptangularionic-framework

Arranging Bootstrap Grids within Laravel

On my current web page, I have implemented Bootstrap Grids as seen in the image below. Check out My Bootstrap Grid Layout However, I am aiming to achieve a grid layout similar to the one shown in the picture with a red indicator. Here is the Desired Boo ...

phpcsslaravelbootstrap-4

Adjusting the transparency of a div's background using RGBa

I am currently working on adjusting the background opacity of a div using a jquery ui slider. Allowing users to modify the background color of the div, I am seeking guidance on how to adjust only the alpha parameter of the background while keeping the col ...

jquerycss

Struggling to retrieve the file parameter value with Angular.js and PHP?

I have encountered an issue while attempting to upload a file using Angular.js and PHP. Although I am able to successfully send the file parameter value, I am unable to retrieve it on the PHP side. Below is an explanation of my code. workspesh.html: & ...

javascriptphpangularjs