Ways to create a dual grid responsive design using Tailwind CSS

I am currently working on creating a responsive two-column layout using Tailwind CSS. The goal is for the first column to occupy 70% of the width, with both columns expanding to full width on mobile devices. However, my attempts so far have not yielded the desired results. I believe there may be a crucial element missing in my approach. If anyone could offer some assistance, it would be greatly appreciated.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />

<div class="grid grid-cols-5 md:grid-cols-1 lg:grid-cols-2 gap-3">
    <div class="col-span-4 flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100">2</div>
    <div class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100">4</div>
  </div>

htmlcsstailwind-css

Answer №1

If you're looking to change the layout of your parent div, you can utilize the grid-flow-row sm:grid-flow-col class and set the sm for col-span-4 class. Check out this example below:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />

<div class="grid grid-flow-row sm:grid-flow-col gap-3">
<div class="sm:col-span-4 flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100">2</div>
<div class="flex justify-center text-6xl border-2 border-gray-300 rounded-xl p-6 bg-gray-100">4</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

I encountered an error message that said: "Cannot assign '12': 'Cart.product' must be a 'Product' instance. Can someone please assist me in resolving this problem?"

[Included in the image of my code is the add-to-cart function where the error can be found on line 5] def add_to_cart(request): user = request.user product_id = request.GET.get('prod_id') product = Product.objects.get(id=product_id) ...

htmldjango

Aligning social icons to the right within the navigation bar

As I construct my website, my vision includes a collapsible navigation bar in the top left corner and a social media bar in the top right corner. It is imperative to me that the social icons remain aligned with the navigation links at all times. To achiev ...

htmlcssbootstrap-4navbar

Adjustable height for the absolute element

Having a bit of an issue with the height of the absolute div. About: .wrapper - I want the wrapper to automatically adjust its height but be limited by a max-height. (No scrolling for the wrapper) .title - Just a title .content - The problem aris ...

htmlcss

Error: Client encountered an issue where the data input on field number 9, CommentCreateInput.n, does not match the required type String! Also, on field number 10, the input for "name" is

Currently, I am working on a blog website using React, Next.js, GraphCMS, and TailwindCSS. One particular issue I am encountering is related to the API responsible for transmitting comments from the website to the CMS. Below is the code snippet for my com ...

reactjsnext.jstailwind-css

Adding custom fonts to DOMPDF: a step-by-step guide

First, I moved the dompdf library folder to /dompdf Next, I added a /fonts folder containing Roboto-Black.ttf Then, I created an index.php file <?php // Autoloader inclusion require_once 'dompdf/autoload.inc.php'; // Namespace reference ...

phpcssdompdf

Is it possible to obtain the index of a table row using querySelector?

Is it possible to find the rowIndex of the first occurrence of a table row within the #myTable using JavaScript? http://jsfiddle.net/bobbyrne01/fmj6np6m/1/ html .. <table id="otherTable"></table> <table id="myTable"></table> js ...

javascripthtml

Utilize multiple classes in inline styling within HTML

I'm trying to dynamically apply the "more" CSS class directly to an inline style tag, but I haven't had success with my current approach. Unfortunately, in my situation, I can't create a class. The method is working for <p> tags but no ...

javascriptjqueryhtmlcss

various designs for multi-location infrastructure in angular js

Our angular app is designed with a multi-site architecture, where the base URL of each domain varies. Each site requires a unique header and footer to be incorporated, along with custom CSS and links specific to that site. Is there a way to dynamically in ...

cssangularjstemplates

Creating an inverted curve or border-radius for a div element is a design technique that can add

I've been tackling a project that requires me to style the border of a div in an inverted manner. To achieve this, I'm limited to using only CSS and JS without any plugins. I've searched through various online resources and similar questions ...

javascriptjqueryhtmlcss

Use jQuery to dynamically update HTML content based on changes in a form field

Is there a way to update the value of an input field in real-time and display it in a DIV? Currently, I have this code: $("#page_name").change(function () { var new_val = $("#page_name").val(); $("#page_url").html(new_va ...

jqueryhtmlinputonchange

Synchronize MySQL database structure with HTML5 local storage to enable querying

After researching HTML5 local storage, I am considering mirroring a MySQL database's structure for use in an application that requires a large amount of data for a single user. Why would I want to do this? As a web game developer in my spare time, I ...

phpmysqlhtmllocal-storageabstraction

Is it possible to have a variable number of dynamic CSS Grid columns with the option of including a header or footer

Implementing a dynamic number of columns with CSS Grid is a breeze. .grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } // These .cells are beautifully aligned <div class="grid"> <div class="cell"></div> ...

htmlcsscss-grid

What is causing the hyperlink to fail to redirect to the specified URL upon being clicked?

I am facing an issue with a contact form where I have included a link to refresh a captcha code upon clicking. Additionally, there is jQuery code that ensures a div remains open by applying CSS styles to it. Both of these functionalities work independently ...

phpjquerycss

The scaling of the attribute element appears to be off-kilter

https://i.sstatic.net/QmE8k.png .customProgramTemplate { background-color: rgba(0, 0, 0, 0.75); width: 400px; height: 185px; border-radius: 8px; margin: auto; color: white; padding: 0; } .customProgramButton { text-decoration: none; t ...

htmlcsselement

Learn how to modify the condition in an 'if' template tag using JavaScript

I've been attempting to load a value obtained from clicking a button into an if statement within my HTML template, but have hit a roadblock. Perhaps I'm approaching this the wrong way. I tried utilizing the var tag and placing my variable inside ...

javascripthtmlcssdjango

How can you efficiently showcase multiple fetch functions on a single page by utilizing loops in PHP?

I am attempting to showcase the countries from each continent on a single page using buttons for each continent. When a user clicks on a button, I want the countries of the selected continent to be displayed. However, I am encountering an issue where only ...

phphtmlmysqlloops

"Troubleshooting: Issue with ng-click in AngularJS not triggering ng-show

I can't figure out why my ng-click isn't showing the ng-show message. I've tried searching for a solution but no luck. Here is my controller function: $scope.showLogoutMessage = function() { $scope.logoutmsg = true; }; This is my Logi ...

javascripthtmlangularjs

Creating a mandatory 'Select' dropdown field in Vue.js

Hello, I am a beginner in VueJS and I am trying to make a select element from a drop-down list required. I attempted to add the required attribute as shown in the code below. Any suggestions on how to achieve this? Thanks. <v-select ...

javascripthtmlvue.js

Placing HTML text on top of a three.js renderer

I have been attempting to overlay HTML text onto my three.js sketch, but adjusting the z-index does not seem to be working. While I know that I could utilize innerHTML, the issue arises when I need to also use the onclick attribute, which is not the main f ...

htmlcssthree.js

What is the best way to create a transparent effect over a solid color using CSS in the following situation?

I have been using the spinner on this website "". Specifically, I am referring to the third one in the first row. When I apply it to my system, a solid color appears in the center of the circle. However, I want to make it transparent, but when I attempt ...

htmlcssspinner