Mismatched heights of grid elements

Currently, I am utilizing Tailwind CSS V3 and struggling to set the consistent height of grid items. The only way I can achieve uniform height is by assigning them a height of h-96. However, when I attempt to use breakpoints such as lg:h-80 and md:h-96, the issue of uneven heights persists.

Below is the code snippet for my section:

<!--! Service Section -->
<section class="bg-slate-900 text-white py-16">
  <div>
    <h2 class="text-3xl font-bold text-center text-gray-100 mb-4">Our Services</h2>
  </div>
  <div class=" md:grid-flow-col grid lg:grid-rows-2 lg:grid-cols-3 gap-4">

    <div class="grid-item">
      <div class="p-8 bg-slate-800 rounded-lg shadow-lg h-96 md:h-80 m-4">
        <i class="text-5xl mb-4 fas fa-laptop-code"></i>
        <h3 class="text-xl font-bold mb-4">Web Development</h3>
        <p class="text-gray-400 leading-loose">We develop custom, responsive websites tailored to your business needs using the latest technologies and best practices.</p>
      </div>
    </div>
    
    <!-- More grid-item entries here -->

  </div>
</section>

I am looking for a solution where grid items maintain the same height across different breakpoints.

htmlcsstailwind-css

Answer №1

Here is the revised code after applying the necessary fix:

<div class="bg-slate-900">
    <section class="mx-auto max-w-5xl px-4 py-16 text-white">
        <div>
            <h2 class="mb-4 text-center text-3xl font-bold text-gray-100">Our Services</h2>
        </div>
        <div class="grid justify-center gap-4 md:grid-cols-2 lg:grid-cols-3 [&>*]:max-w-lg">
            <div class="m-4 rounded-lg bg-slate-800 p-8 shadow-lg">
                <i class="fas fa-laptop-code mb-4 text-5xl"></i>
                <h3 class="mb-4 text-xl font-bold">Web Development</h3>
                <p class="leading-loose text-gray-400">We specialize in creating customized, responsive websites that cater to your specific business requirements by leveraging cutting-edge technologies and industry best practices.</p>
            </div>
            <div class="m-4 rounded-lg bg-slate-800 p-8 shadow-lg">
                <i class="fas fa-palette mb-4 text-5xl"></i>
                <h3 class="mb-4 text-xl font-bold">Graphic Design</h3>
                <p class="leading-loose text-gray-400">Our talented design team crafts compelling visual assets such as logos, branding materials, brochures, and more, to help your brand outshine competitors.</p>
            </div>
                <div class="m-4 rounded-lg bg-slate-800 p-8 shadow-lg">
                <i class="fas fa-mobile-alt mb-4 text-5xl"></i>
                <h3 class="mb-4 text-xl font-bold">Mobile Development</h3>
                <p class="leading-loose text-gray-400">We develop visually appealing mobile apps for iOS and Android that offer both intuitive user interfaces and engaging user experiences.</p>
            </div>
                <div class="m-4 rounded-lg bg-slate-800 p-8 shadow-lg">
                <i class="fas fa-search mb-4 text-5xl"></i>
                <h3 class="mb-4 text-xl font-bold">SEO Optimization</h3>
                <p class="leading-loose text-gray-400">Our SEO specialists enhance your website's search engine rankings, driving increased traffic and potential leads to your business.</p>
            </div>
            <div class="m-4 rounded-lg bg-slate-800 p-8 shadow-lg">
                <i class="fas fa-server mb-4 text-5xl"></i>
                <h3 class="mb-4 text-xl font-bold">Server Administration</h3>
                <p class="leading-loose text-gray-400">Our server administration services ensure smooth, efficient website operation with minimal downtime and maximum security.</p>
            </div>
            <div class="m-4 rounded-lg bg-slate-800 p-8 shadow-lg">
                <i class="fas fa-cogs mb-4 text-5xl"></i>
                <h3 class="mb-4 text-xl font-bold">IT Consulting</h3>
                <p class="leading-loose text-gray-400">Our IT experts offer consulting services to help businesses optimize technology usage, from automating tasks to implementing robust security measures.</p>
            </div>
        </div>
    </section>
</div>

For more information, refer to the documentation at: Tailwind documentation

To seek further assistance, join our Discord community via:

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

"Want to make a phone call with an extension? Just click here

The issue at hand is rather straightforward. Is there a way to create a link for mobile browsers that would automatically dial a phone number and input an extension without requiring any action from the user? I am familiar with using tel:, as well as spe ...

androidhtmltwilio

using angularjs to dynamically apply css styles

Below is the input I have: The HTML code is shown below: <input type="number" ng-class="{negative: amount < 0}" ng-model="amount"/> This is the corresponding CSS code: .negative { color: red; } If the amount is positive, no specif ...

javascripthtmlcssangularjsng-class

Personalizing the structure of a joomla template

Having some trouble customizing my Helix Framework template. I'm trying to adjust the width of the page to be 1140 px. When I make changes in the framework menu, it only adjusts the text field width and not the graphics. How can I achieve the layout s ...

htmlcssjoomlawidth

Lists are not limited to only <li> elements and elements that support scripts (<script> and <template>)

While testing my webpage's accessibility in Google Chrome Lighthouse, I encountered the following error. I am aware of the significance of properly structured lists in enhancing webpage accessibility. It is perplexing for me to receive this error desp ...

htmlangularaccessibilityhtml-lists

Django's background image remains static regardless of CSS changes

I recently downloaded an HTML template and am attempting to customize it by changing the background image within the CSS file. The current code in the CSS file is as follows: background: url(../img/background.jpg) Despite my efforts to replace it with t ...

pythoncssdjangopython-3.xstatic

What is the method for rearranging the order of Bootstrap 5 columns within nested elements without using hidden duplicates?

This snippet of code is designed to show blocks in different ways on mobile and desktop devices. <div class="col-12 col-sm-6 order-sm-1">TITLE</div> <div class="col-12 col-sm-6 order-sm-0">IMAGE</div> <div cla ...

htmlcsstwitter-bootstrapresponsivebootstrap-5

JSP generates unconventional HTML output

I'm encountering a strange issue with one of my JSP pages. It seems like the HTML is not being fully rendered. The output looks like this: <html> ... <table> ... </table> <div id= So, the last line is exactly what ...

javahtmljsprendering

Incorrect use of the jQuery .height() method

I am working on creating a responsive div with a sloped edge that needs to adjust according to the screen size. I have successfully maintained a consistent angle across all screen sizes, but I am facing an issue where the height calculation for $('#sl ...

javascriptjquerycssbootstrap-4

Tips for creating an editable div that can also incorporate a textarea and the option to upload or delete photos

On my website, users can upload images, names, and descriptions which are saved in a MySQL database. The information is then fetched to display on the website. The code below allows users to enter this information and see it displayed when they click the s ...

javascriptphphtmlcssmysql

What is the best approach to customize classes in material-ui with makeStyles and useStyles?

Imagine a scenario where there is a component responsible for rendering a button with a red background and yellow text color. A Parent component utilizes this child component but specifies that it wants the background color to be green while keeping the te ...

cssreactjsmaterial-uioverriding

The range input in HTML does not respond when attempting to adjust it

I am having an issue where the thumb on the slider does not move when I try to. This problem occurred after I inserted an img element inside the slider-cntnr div. View the code at http://codepen.io/danielyaa5/pen/xVEXvB HTML <div id="slider-cntnr"&g ...

javascripthtmlcss

What is the method for altering the background color of an input field upon entering text?

As a beginner in Javascript and jQuery, I am struggling to understand why my code is behaving the way it does. I have written two similar functions aimed at changing the background color of an input field. The objective is to set the background color of t ...

javascriptjqueryhtmlcss

Hide the Modal Content using JavaScript initially, and only reveal it once the Onclick Button is activated. Upon clicking the button, the Modal should then be displayed to

While trying to complete this assignment, I initially attempted to search for JavaScript code that would work. Unfortunately, my first submission resulted in messing up the bootstrap code provided by the professors. They specifically requested us to use Ja ...

javascripthtmlcssbootstrap-4

The Value Entered in Angular is Unsaved

I have encountered an issue with my app's table functionality. The user can enter information into an input field and save it, but upon refreshing the page, the field appears empty as if no data was entered. Can someone please review my code snippet b ...

javascripthtmlangulartypescript

currently experiencing layout discrepancies with Flexbox

Experimenting with flexbox has been challenging, but I am close to achieving my desired layout: Place a label in the top left of the first container Position a label in the top right of the first container Align a label in the bottom middle of the first ...

htmlcssflexbox

Issue with displaying the Bootstrap paginator stylingSomething seems to be

Currently, I am working on a PHP project that involves creating a table with Bootstrap styling. To achieve this, I referred to a tutorial which guided me through the process. After linking the necessary Bootstrap CSS file using the provided code snippet, ...

phphtmlbootstrap-5

Uninterrupted Carousel Experience in Bootstrap 4 (Seamless slide transition)

I'm having trouble figuring out how to make a carousel run continuously without pauses between slides. Here's an example of what I'm working with on codeply: .carousel-img-small { width: 80px; height: 80px; margin-right: 2%; } .car ...

htmlcssbootstrap-4

The element is not defined in the Document Object Model

There are two global properties defined as: htmlContentElement htmlContentContainer These are set in the ngAfterViewInit() method: ngAfterViewInit() { this.htmlContentElement = document.getElementById("messageContent"); this.htmlContentCont ...

javascripthtmlangulartypescript

Utilizing ngx-bootstrap Modal for Data Transfer to Component

I am currently dealing with an array called drivers in my component. When a button is clicked in the component, it triggers a ngx-bootstrap modal to display the fullname value from the drivers array. Now, I am looking for a way to retrieve the selected nam ...

htmlangularmodal-dialogngx-bootstrap

Sub-menu disappears upon resizing the screen

Currently, I am working on creating a unique responsive navigation system that transforms into a 100% width pulldown menu for mobile devices. To achieve this functionality, I have implemented some JavaScript code that hides any open sub-menu items when the ...

javascriptjqueryhtmlcssresponsive-design