What is the best way to vertically align the second row in a carousel using Tailwind CSS?

Currently, I am working on developing an up-and-down carousel with Tailwind CSS. However, I am encountering a challenge in aligning the elements in the second row of my grid. My main objective is to have these elements centered vertically within the grid.

click here for image description

const Carousel = () => {
  return (
    <div className='grid grid-cols-2 gap-12 '>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
        <div className='w-72 h-48 bg-white rounded-xl shadow-xl'>

        </div>
    </div>
  )
}
export default Carousel;

I hope to achieve a layout similar to this:

check out the example image here

cssreactjstailwind-css

Answer №1

To achieve your goal, you'll need to adjust the layout approach slightly. The grid system creates an equal number of blocks on both the x and y axis, even if the last item isn't filled, space will still be allocated for it.

I've made some modifications to your code to accomplish what you're looking for. It may suit your needs, as it uses flex to do exactly what you want.

Check out the result on Tailwind Play.

<div class='grid grid-cols-2 gap-12 justify-center'>
    <div class='flex flex-col justify-center items-center h-full gap-12'>
        <div class='w-72 h-48 bg-white rounded-xl shadow-xl'></div>
        <div class='w-72 h-48 bg-white rounded-xl shadow-xl'></div>
        <div class='w-72 h-48 bg-white rounded-xl shadow-xl'></div>
        <div class='w-72 h-48 bg-white rounded-xl shadow-xl'></div>
    </div>
    <div class='flex flex-col justify-center items-center h-full gap-12'>
        <div class='w-72 h-48 bg-white rounded-xl shadow-xl'></div>
        <div class='w-72 h-48 bg-white rounded-xl shadow-xl'></div>
        <div class='w-72 h-48 bg-white rounded-xl shadow-xl'></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

Issue with Material UI Menu positioning incorrectly when button is aligned to the right or left

When looking at the first image, it appears that the material-UI menu position is working correctly. However, when we change the button position to align-right, the menu position shifts slightly to the left, not perfectly aligning with the right side as in ...

htmlcssreactjsmaterial-uimaterial-design

Issue with div element not functioning properly within table declaration on Internet Explorer

There seems to be an issue with the div tag not functioning properly inside a table definition: <table> <tr></tr> <div id="choice"><tr> <td>-------</td> <td>-------</td> <td>-------</td> &l ...

javascriptcsshtml-table

What's the reason behind this file not opening?

When I try to insert this code into files index.html, style.css, and app.js, the page refuses to open. The browser constantly displays a message saying "The webpage was reloaded because a problem occurred." I am using a MacBook Air with macOS Big Sur and a ...

javascripthtmlcss

Cross-browser compatibility issues with animated SVG line drawing glow effect

Attempting to create a dazzling animation utilizing SVG filters and the stroke-dasharray technique to produce a gradually drawn "glowing" line effect has posed its challenges. After extensive research, a partially functional solution was crafted: JSFiddle ...

htmlcsssvgglowline-drawing

I'm troubleshooting the issue of "navigation.navigate is not defined as an object and causing evaluation error". Can you suggest a solution to this problem?

Here is the Navigation Container that has been created: <NavigationContainer> <Stack.Navigator screenOptions={{ headerShown: false }} > <Stack.Screen name="Home" component={ ...

reactjsreact-nativenavigationreact-navigationscreen

Integrate a resizable sidebar on the webpage's right side that dynamically adjusts the layout

As I develop a Chrome Extension, my goal is to incorporate a sidebar into all webpages without overlapping the existing content. The sidebar should be placed beside the content, effectively reducing the width of the body of the webpage to the initial width ...

javascripthtmlcssgoogle-chrome-extensionsidebar

Signal a return type error when the provided element label does not correspond with an existing entity

I am working on a component that accepts three props: children (React elements), index, and label. The goal is for the component to return the child element at a specific index when index is passed, and to return the element with a specific label when la ...

reactjstypescript

Understanding the fundamentals of positioning elements in CSS as they float on a webpage

Understanding the behavior of float in CSS can be confusing. When floating an element to the left or to the right, it affects how other elements wrap around it. But why do some elements wrap while others don't? For example, when you have a floated im ...

csscss-float

What is the best method for getting rid of blank white space on my website?

Having some trouble removing unnecessary white space on my website. The goal is to have the main text and logo centered on an image background, but I've been unsuccessful so far. I've experimented with different CSS properties like overflow-x: ...

htmlcss

Using the `preventDefault` method within an `onclick` function nested inside another `onclick

I am currently working on an example in react.js <Card onClick="(e)=>{e.preventDefault(); goPage()}"> <Card.body> <Media> <img width={64} height={64} className="mr-3" ...

javascriptreactjs

AngularJs - Show the response only upon verifying the correct answer

Let me provide an overview of what has been implemented so far: When a user selects an answer in radio buttons and clicks on "Check Answer", the system displays either "Correct" (in green) or "Incorrect" (in red) in the first answer field. Additionally, th ...

javascripthtmlcssangularjs

Error message: "Property 'item' is not found within type 'P' - The property is inaccessible in the higher order component even though it is included in the props."

I am currently learning about typescript and exploring how to use Higher Order Components (HoCs) with React in a specific scenario. In my case, I am trying to wrap a component with an HoC that checks whether the "item" passed into the "wrapped" component ...

reactjstypescripthigher-order-components

The pictures in a <div> tag are not showing up

Functionality: I have set up 2 different <div> elements with unique IDs. Each of these <div> elements will make an ajax call to fetch a specific set of images for display. To summarize, both <div> elements are invoking the same ajax met ...

javascriptjqueryhtmlcssajax

excess margin running along the left side of each page

When visiting http://tadris3.ir/, one may notice a peculiar space on the left side of all pages. Can anyone assist in resolving this bothersome issue? ...

jqueryhtmlcssuser-interface

Difficulty encountered in displaying HTML within a React component

Struggling to display HTML in my React code, whenever I click 'signup' after starting the page, it shows the 'login' view instead. Could there be an issue with how I'm linking everything together? App.js class App extends Compon ...

javascriptreactjsrender

What is the best way to prevent an element from reaching the border of the screen?

As a JavaScript beginner, I am working on creating a simple game. My objective is to prevent the player (20px x 20px) box from causing the screen to scroll. I want a fixed screen where the player cannot go beyond the edges of the screen. Below are my previ ...

javascripthtmlcssscreengame-development

There are a few issues with certain Bootstrap elements such as the Navbar-collapse, p- classes, and small column images

I wanted to express my gratitude for all the incredible resources shared here. I have been working on sorting out some issues over the past few days. While Bootstrap seems to be functioning well in certain areas, it's not working as expected in oth ...

htmlcsstwitter-bootstrap

Generate steps using Material UI/React Stepper to create organized pages (similar to Table Pagination)

As I venture into using Material UI along with React, my goal is to create organized "pages" consisting of steps in sets of four for a specific process. My initial attempt displayed all 10 steps on a single view, despite having the pagination correctly ca ...

javascriptreactjspaginationmaterial-uiuistepper

I am experiencing issues with CSS functionality in my Ruby on Rails application

Currently, I am in the process of creating a blog based on Mackenzie Child's 12 in 12 RoR tutorials. I diligently followed all the steps in the tutorial and adhered strictly to his code. However, I encountered an issue with the CSS stylesheets not be ...

htmlcssruby-on-railsrubysvg

Creating a stunning HTML 5 panorama with GigaPixel resolution

Interested in creating a gigapixel panorama using HTML 5 and Javascript. I found inspiration from this example - Seeking advice on where to begin or any useful APIs to explore. Appreciate the help! ...

javascriptjqueryhtmlcss