Incorrect column alignment in Tailwind CSS

I am working on a straightforward flexbox layout with a two-column grid setup.

    <div class="flex relative">
        <div class="columns-2 gap-4 space-y-4">
            <div class="bg-red-500 p-10">1</div>
            <div class="bg-blue-500 p-10 py-14">2</div>
            <div class="bg-orange-500 p-10 py-20">3</div>
            <div class="bg-green-500 p-10">4</div>
        </div>
    </div>

The issue I am facing is that the columns are arranged in the "incorrect" direction. The first row consists of div1 and div3, but I intend it to include div1 and div2 instead. How can I adjust the order?

I aim for the divs to be positioned as shown here: https://i.sstatic.net/4MBCH.png

csstailwind-css

Answer №1

It appears that you are not utilizing the grid system of tailwind-css correctly! To do so, replace columns:2 with grid grid-cols-2

 <div class="flex relative">
        <div class="grid grid-cols-2 gap-4 space-y-4"> 👈 grid grid-cols-2
            <div class="bg-red-500 p-10">1</div>
            <div class="bg-blue-500 p-10 py-14">2</div>
            <div class="bg-orange-500 p-10 py-20">3</div>
            <div class="bg-green-500 p-10">4</div>
        </div>
    </div>

Now, observe that div1 and div2 are in the same row.

Edit:

However, this will position the divs but the grid may appear similar. How can you address this?

Try using the following code:

<div class="grid grid-cols-2 grid-rows-5 gap-4">
  <div class="row-span-2 flex h-64 items-center justify-center bg-red-500 text-5xl">1</div>
  <div class="row-span-3 flex items-center justify-center bg-blue-500 text-5xl">2</div>
  <div class="row-span-2 flex items-center justify-center bg-orange-500 text-5xl">3</div>
  <div class="row-span-2 flex items-center justify-center bg-green-500 text-5xl">4</div>
</div>

Output:

https://i.sstatic.net/9879k.png

Tailwind-play

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

Rotate a div using CSS by 10 degrees while spanning the full width

I stumbled upon the website recently, particularly noticing the Social News section on the side. I am curious about how to create rotated divs (around 10 degrees) that span the full width of a webpage. Is it possible to make this responsive so that it wor ...

jqueryhtmlcss

Customizable Button component featuring background image options

Need help with creating a versatile Button component in React that can easily accommodate different sizes and shapes of background images? This is how my current implementation looks like - Button.js const Button = ({ url }) => { const inl ...

htmlcssreactjsbuttonbackground-image

Animating two elements on scroll at specific point with speed problem

Trying to create an animation with two different images once a user reaches a specific point on the page. The animation works, but there is an issue when using a trackpad - the movement appears slow compared to scrolling with a mouse. I've already att ...

jquerycssanimation

Font reference in IE and Chrome causing HTTPS to fail

Take a look at in both Internet Explorer and Chrome. The header tags (h1 through h6) all have font specifications that rely on a javascript fonts.com specification. However, there seems to be an issue with rendering properly. Interestingly, the fonts ar ...

csshttpstypekit

Numerous changes using media queries

Is there a way to have separate transitions in media queries without duplicating code? @media screen and (min-width: 800px) { #div { transition: width 1s; } } #div { transition: height 1s; /* Overrides previous one :( */ } How can I a ...

htmlcssmedia-queriestransition

What is the proper application of counter-reset when utilizing CSS counters to automatically number headings?

In my quest to automatically number headings with multiple levels of hierarchy in an HTML document using CSS, I have encountered various examples online that heavily rely on counter-reset. However, despite testing it in different configurations, I haven&ap ...

htmlcsscss-counter

The header and footer are not extending across the entire width of the page

While testing on a responsive screen, I noticed that the header and footer both decrease in width instead of maintaining 100% width as intended. The issue only occurs when I reduce the width of the screen. body{ margin: 0; padding: 0; box-si ...

htmlcssheaderfooter

Disable automatic focusing for a material-ui popover component

I am struggling to create a search match list that updates as the user types in their query. However, I am facing an issue where the input element loses focus to the pop-up. I have attempted to programmatically set the focus using refs, but I am unable to ...

javascriptcssreactjsmaterial-ui

Center the div element and adjust its scale to perfectly fit the screen

I have been struggling to optimize my website for mobile devices by centralizing the content display. When I access it on a mobile device through , there is excessive space below the content, forcing me to pinch zoom in order to read properly. How can I el ...

csshtmlmobilecentralized

The back button functionality in Android cannot be altered or overridden using JavaScript

Hey everyone, I'm currently in the process of developing a mobile application using phonegap. I'm facing an issue where I want to disable the functionality of the back button from navigating to the previous page. I simply want it to do nothing or ...

javascriptandroidhtmlcsscordova

What is the best way to adjust the width of a div based on the remaining space in the viewport?

I've created a Wireframe to showcase the concept I'm aiming for. There are 2 screens included to illustrate how the layout should adapt to different screen sizes. Check out the Wireframe here The goal is to have a center-aligned container named ...

htmlcsslayoutflexboxresponsive-design

Tips for positioning the popup ul in relation to its parent li

How can the pop-up ul be positioned in the center of the parent li using CSS? * { margin: 0; padding: 0; } #track-nav { margin-left: 50px; margin-top: 50px; float: left; width: 100%; list-style: none; font-weight: bold; margin-bottom: ...

htmlcss

Web server experiencing issues with loading scripts and CSS files

After successfully building my project using CodeIgniter on localhost, I encountered an issue when trying to run it on a webhost. The site was functional but the design elements such as scripts and stylesheets were not loading properly. Before uploading t ...

javascriptphpcsscodeigniter

Struggling to align Jssor slider perfectly within a Bootstrap container

Struggling to center my slider images while using bootstrap with jssor. Despite trying to zero out the margins in the code below, the images within the slider remain aligned to the left side of the container. Any suggestions on how I can properly center ...

jqueryhtmlcsstwitter-bootstrapjssor

The close button for Fancybox gets cropped out when Foundation 3 and CSS border-box are used together

When the box-sizing is set to border-box, it can sometimes cut off the "close" button. This issue seems to be more prevalent when using Foundation 3 by Zurb. The snippet of code that may be causing conflicts with fancybox is as follows: * { box-sizin ...

cssfancyboxfancybox-2border-box

having difficulty applying a border to the popup modal

Currently, I am utilizing a Popup modal component provided by the reactjs-popup library. export default () => ( <Popup trigger={<button className="button"> Guide </button>} modal nested > {(close: any) =&g ...

javascripthtmlcssreactjstypescript

The navigation bar in Bootstrap 3.2 expands in size as you scroll past it

Whenever I reach the bottom of the page, the navigation bar suddenly enlarges. The navbar is located at the top of my code. I attempted moving the navigation to the bottom of the code... but it didn't fix the issue... Could someone please identify wha ...

jquerycsshtmltwitter-bootstrap

What could be causing my fixed header to disappear in Safari 5?

I am experiencing a strange issue with my fixed header on Safari 5 for iPad. The header disappears once it scrolls down to a certain point, even though it works fine in IE, Firefox, Chrome, and the latest version of Safari. Has anyone else encountered this ...

htmlcsssafaripositionmobile-safari

Misconception about the usage of jQuery's .each() function clarified with an illustrative example

Problem Description (See Fiddle): When clicking on the red boxes, they transform into kittens and display an alert with the current value of i. Clicking on a large fading kitten will reset everything. I am puzzled as to why alert(i) is triggering multipl ...

javascriptjqueryhtmlcsseach

Media Queries elude my complete comprehension

Can anyone provide a brief overview? For example, should buttons and images, as well as a footer, all be placed in one Media Query or kept separate? I'm feeling overwhelmed by this. ...

css