Height specification in Tailwind Grid

Hi there! I'm currently working on implementing a grid system in NextJS using Tailwind CSS. However, I've hit a roadblock when it comes to automatically sizing the grids to fit the parent element.

Let me illustrate my issue with two images below:

  1. Here's a mockup wireframe of the container and grids. (Red = Wrapper, Pink = Layout, Purple = Grids)

https://i.stack.imgur.com/hBXcJ.png

  1. And this is what I have managed to code so far. (I'm aiming to resize the right-hand boxes to match the height of the window.)

https://i.stack.imgur.com/yGADv.png

<div className="bg-white dark:bg-custom05 md:fixed md:inset-y-0 md:left-0 md:flex md:items-start md:overflow-y-auto md:w-full ">
<div className="min-h-full md:flex md:w-16 md:flex-none md:items-center md:whitespace-nowrap md:py-12 md:leading-7 md:[writing-mode:vertical-rl]">
<div className="flex justify-between text-sm gap-12">
<div className="sm:w-14 sm:h-14 md:w-14 md:h-14 rounded-lg flex items-center justify-center bg-custom03 order-1">Avatar</div>
<div className="sm:w-60 sm:h-14 md:w-14 md:h-60 rounded-lg flex items-center justify-center bg-custom03 order-2">Author Tag Line</div>
<div className="sm:w-14 sm:h-14 md:w-14 md:h-14 rounded-lg flex items-center justify-center bg-custom03 order-3">03</div>
</div>
</div>
<div className="bg-white dark:bg-custom06 relative z-10 mx-auto p-10 md:max-w-md md:min-h-full md:flex-auto md:border-x md:border-custom07">
<div className="grid grid-row-3 grid-flow-row gap-12 text-sm text-center rounded-lg ">
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-6">01</div>
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-6">02</div>
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-6">03</div>
</div>
</div>
<div className="bg-white dark:bg-custom05 relative z-9 p-10 mx-auto md:max-h-full md:flex-auto ">
<div className="grid  grid-col-2 grid-flow-col gap-12 text-sm text-center rounded-lg ">
<div className="p-4 rounded-lg bg-custom03 grid place-content-center col-span-2">01</div>
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-2 col-span-2">02</div>
<div className="p-4 rounded-lg bg-custom03 grid place-content-center row-span-3">03</div>
</div>
</div>
csslayoutnext.jstailwind-csscss-grid

Answer №1

Utilize the flex properties to craft grid systems similar to this setup.

<script src="https://cdn.tailwindcss.com"></script>
<div className=" border-red-600 border-2 p-3 flex flex-row items-center space-x-2">
  <div className=" p-4 border-pink-500 border-2 h-screen space-y-2 items-center w-1/12 flex flex-col">
      <div className=" border-purple-500 border-2 h-20 ">Av</div>
      <div className=" border-purple-500 border-2 h-72">ot</div>
  </div>
  <div className=" p-4 border-pink-500 border-2 h-screen w-4/12 flex flex-col space-y-2">
      <div className="p-3 border-purple-500 border-2 h-48">Video</div>
      <div className="p-3 border-purple-500 border-2 h-24">Description</div>
      <div className="p-3 border-purple-500 border-2 h-48">Github, Socials</div>
  </div>
  <div className=" p-4 border-pink-500 border-2 h-screen w-7/12 space-x-4 flex flex-row items-center">
      <div className="flex flex-col space-y-2 w-1/2 h-full">
          <div className="border-purple-500 border-2 h-full p-4">Projects</div>
          <div className="border-purple-500 border-2 h-full p-4">Empty </div>
      </div>
      <div className="p-6 border-purple-500 border-2 w-1/2 h-full ">
        Study/Work
      </div>
  </div>
</div>

Note:

  • Replace class= with className= in Reactjs.
  • Check out the fullPage demo for a closer look.

Answer №2

Experiment with using h-screen or h-fit, or customize the sizing by adding your own values in the form of h-[size]. Get creative with different units such as pixels (px) or viewport height (vh).

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

highlight the selected option in the ng-repeat list of items

Looking for some assistance with a coding problem I'm having. I keep running into an error when trying to make a selected item in an ng-repeat list highlight. The CSS style is only applied on the second click, not the first. Additionally, I need to en ...

javascripthtmlcssangularjs

An error keeps popping up in the console saying "Module not found"

import React from 'react' import './sidebar.css' import logo from './images/' const sidebar = () => { return ( <div className='sideBar grid'> <div className='logoDiv flex&apo ...

cssnode.jsreactjsjsx

What is the process for setting up 127.0.0.1 with port 127.0.0.1:8000 in the .httaccess file?

Is there a way to set up a sub domain in Node.js while running on port 127.0.0.1:8000? Here is the .httaccess code: RewriteEngine On RewriteRule ^$ http://127.0.0.1:8080/ [P,L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d Rewrit ...

node.jsreactjsapachenext.js

Looking for straightforward tips on parsing CSS code

Seeking advice on how to extract rules and property/values from a .css file or <style></style>. I am not in need of an elaborate parser, as the validity of selector text, property name, or value is not important. My main focus is ensuring that ...

c#vb.netparsingcss

Encountering an issue where the sharp module fails to build during yarn install

After updating both Node and Yarn, I encountered an issue while trying to run yarn install on my NextJS project. The error message that showed up is as follows: ... ➤ YN0007: │ sharp@npm:0.29.3 must be built because it never has been before or the last ...

node.jsnext.jssharpyarn-v2

Include previous input as a "phantom" thumbnail to the slider element of type "range"

https://i.stack.imgur.com/JnuCN.png Using a tutorial from w3schools, I have customized a regular range slider. The objective is to send a new value command to an external MQTT-based home automation system and display the previous value as a ghost-thumb in ...

javascripthtmlcssinputrange

Using JSON as HTML data within Flexbox for interactive hyperlink rollovers

Utilizing JSON to extract HTML data with unique html tags within Flex has presented a challenge. The limited support for HTML in Flex has made it difficult to implement a basic font color rollover effect on links. While Flex only allows for a few HTML tags ...

htmlcssapache-flexjsonrollovers

Using curly brackets as function parameters

Can someone help me understand how to pass an emailID as a second parameter in curly braces as a function parameter and then access it in AccountMenuSidebar? I apologize for asking such a basic question, I am new to JavaScript and React. class Invoices ex ...

javascriptreactjsnext.js

Challenges with borders within a modal box

I am trying to create some spacing above and below the 'offer' button within my modal. Initially, I attempted to add a 30-pixel border to the bottom of the button, but it doesn't seem to be appearing. The end of the modal aligns directly wit ...

htmlcss

When using HTML select, text alignment may not be centered properly in the Chrome

Recently, I encountered an issue where the text in select options is not centered in Chrome. Interestingly, using text-align: center on the select element works perfectly fine on Firefox, but fails to do so on Chrome. I haven't had the chance to test ...

htmlcss

Why does the error "Unable to resolve 'react-big-calendar/lib/sass/styles'" occur when using react-big-calendar with sass on Next.js?

When I tried to import 'react-big-calendar/lib/sass/styles' for my project using SASS, it resulted in an error stating: Module not found: Can't resolve 'react-big-calendar/lib/sass/styles' import { Calendar, momentLocalizer } from ...

next.jssassreact-big-calendar

Having trouble applying styles to a component using forwardRef

I'm relatively new to React and still trying to wrap my head around the component's lifecycle. However, the issue at hand is proving to be quite perplexing. One thing that confuses me is why adding "setState(10);" causes the style of the "Test" ...

javascripthtmlcssreactjs

How to create a full-width and full-height background image in a div using CSS

When using a bootstrap template, I encountered an issue with adding an image as a background. Here is the CSS code: background:url(../images/banner.png) no-repeat; background-size: 100%; The problem with these CSS rules is that the image gets clipped and ...

jqueryhtmlcssimagetwitter-bootstrap

Get rid of the box-shadow on the Vuetify element

I currently have a special-table component that includes a box shadow when the row is expanded https://i.stack.imgur.com/8zgjp.png I am aiming for the removal of the box-shadow effect. After inspecting the console-style tab, I identified https://i.stac ...

cssvue.jsvuejs2vue-componentvuetify.js

Incorporating Image Caching Optimizations in CSS

My current dilemma I currently implement Cache Busting for my CSS files like this: echo "&lt;link href='stylesheet.css?" . filemtime('stylesheet.css') . "' />" My objective Now I want to achieve a similar approach for th ...

phpcsscache-controlfilemtime

Getting POST data in Next.js is a common task that requires understanding of how the

I am currently working on a form validation project using the App Router within Next.js. // app/register/page.tsx export default function Register(context: any) { console.log("Register page", context.params, context.searchParams); return ...

javascriptnext.js

Sorry, the next-auth middleware does not support the use of 'eval'

I am currently working on implementing a basic next-auth middleware to secure all api routes except for the /api/healthcheck route. The code I added is located in the /pages/api/_middleware file. import { withAuth } from 'next-auth/middleware'; ...

authenticationnext.jsmiddlewarenext-auth

Tips for successfully sending an API request using tRPC and NextJS without encountering an error related to invalid hook calls

I am encountering an issue while attempting to send user input data to my tRPC API. Every time I try to send my query, I receive an error stating that React Hooks can only be used inside a function component. It seems that I cannot call tRPC's useQuer ...

javascriptreactjstypescriptnext.jstrpc.io

Update the CSS styling of a parent div based on the active state of specific child divs

I have a class with 4 distinct columns. div class="mainContent"> <div class="left-Col-1" *ngIf="data-1"> </div> <div class="left-Col-2" *ngIf="!data-1"> ...

javascripthtmlcssangulartypescript

Easily showcase a limitless number of items within a 10-column grid using Bootstrap!

This is the code snippet: <div *ngFor="let minute of state.minutes.specificMinutes.selectedMinutes | keyvalue" class="col-sm-1 checkbox-container"> <div class="custom-control custom-checkbox"> <input type="checkbox" (click)="state.m ...

htmlcssangularbootstrap-4