Aligning MaterialUI Grid items vertically within various Grid containers

Looking to implement a design that features three vertical columns. The first and last columns will display MaterialUI cards, while the middle column will showcase a vertical line with dots aligned vertically with the start of each card. The height of the cards may vary. Refer to the attached screenshot for a visual representation of the design.

Current layout structure:

<Grid container>
    <Grid item xs={5}>
        <Grid container direction={"column"}>
            // content of cards...
        </Grid>
    </Grid>
    <Grid item xs={2}>
        // vertical line with dots...
    </Grid>
    <Grid item xs={5}>
        <Grid container direction={"column"}>
            // content of cards...
        </Grid>
    </Grid>
</Grid>

The challenge is to align both the cards and the vertical divider line according to the layout shown in the screenshot provided. Integrating elements from different Grid containers can be quite complex.

Screenshot of the design:

htmlcssreactjsmaterial-ui

Answer №1

potentially functional...

// To insert a dot icon before in the CSS file
<style>
  leftColumns::before {
    display: ' ';
    position:absolute;
    background: '...';
    top: 0;
    left: 0;
  }
  leftColumns {
  position:relative;
  }
  /* Repeat for RightColumns */
  
</style>
<Grid container>
    <Grid item xs={6} style={{borderLeft: '1px solid #ccc'}}>
        <Grid container direction={"column"}>
        // for each item
           <div className="leftColumns" style={{padding: '0 10px'}}>
              <Card />
           </div>

    enter code here
        </Grid>
    </Grid>
    <Grid item xs={6} style={{borderRight: '1px solid #ccc'}}>
        <Grid container direction={"column"}>
           // for each item - Similar to LeftColumns
           <div className="RightColumns" style={{padding: '0 10px'}}>
              <Card />
           </div>
        </Grid>
    </Grid>
</Grid>

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

Ways to expand HTML input fields to fill the whole table cell

Currently working on a calculator project and I'm facing an issue with making a HTML button span the entire cell. I've managed to stretch the button horizontally but struggling to get it to fill the cell completely. Curious as to why setting widt ...

htmlcss

Creating a JQuery slider that efficiently loads and displays groups of elements consecutively

Currently, I am in the process of developing an infinite horizontal tab slider using jQuery. My main objective is to optimize loading time by having the slider display only the first 10 slides upon initial page load. Subsequent slides will be loaded as the ...

javascriptjqueryhtmlcssload

Is there a way to improve error readability in React when using webpack?

Attempting to solve the issue, I decided to make a change in my npm script. Initially, it was set to operate in production mode by default: The original script looked like this: "client": "webpack -w --config ./gen/config/webpack.config.js& ...

javascriptreactjsdebuggingnpmwebpack

The value entered is displaying as not defined

As a newcomer to the world of javascript, I am diving into creating a simple To Do list. The basic functionality is there, but I'm scratching my head trying to figure out why the input value in my code keeps returning undefined. The remove button is ...

javascripthtmlcsssass

I encountered the following error message: Unable to access properties of undefined (specifically 'header'). I am currently attempting to utilize middleware to retrieve user data

I recently set up a middleware folder and created fetchuser.js within it. The purpose of my fetchuser.js code is to create a getuser endpoint for user authentication. However, I encountered an error while trying to make a new post request using thunderclie ...

node.jsreactjsexpress

How to use AngularJS directives to replace text with stars (*) in HTML

I am in need of a textarea control that has the ability to be masked, meaning that the text displayed should appear as stars instead of the actual characters. Since I might have multiple textareas in my form, saving the actual text in one variable and usi ...

htmlangularjsinputangularjs-directivepasswords

What are the possible complications that could arise from implementing this system for designing web pages?

Feeling frustrated with the limitations and compatibility issues of CSS, I decided to create a new approach for structuring webpages. Instead of relying on CSS, I developed a javascript library that reads layout instructions from XML files and uses absolut ...

javascriptcssweb-applications

What causes images to unexpectedly expand to fill the entire screen upon switching routes in Next.js?

I'm in the process of creating a website using Next and Typescript, with some interesting packages incorporated: Framer-motion for smooth page transitions Gsap for easy animations One issue I encountered was when setting images like this: <Link&g ...

cssreactjstypescriptnext.jsvercel

Tips for eliminating the "must use restructuring props" task

I have been invoking the method in this specific manner: componentDidMount() { this.props.updateFoo({a: false,b : false, c: false,d : true, e: true }); } However, I am encountering a warning stating "Must use destructuring props assignment". ...

reactjs

Unable to load XML in Chrome using JQuery

Can anyone explain why the code below works in Firefox but not Chrome? I'm currently testing it on my local machine. Thanks for any insights you can provide! <html> <head> <script type="text/javascript" src="jquery.js"> ...

jqueryhtmlxmlajax

Learn the effective way to style ul elements within @mui/material/Menu using CSS

When the button is clicked, I want to apply the following styles to the ul: &.MuiList-root { padding-top: 0px; padding-bottom: 0px; } View the issue in action on this live sandbox: https://codesandbox.io/s/react-typescript-forked-tyd8n8?fil ...

cssmaterial-ui

Tips for customizing the appearance of a Link component while it is the active page in Next.js

I'm seeking advice on how to style an anchor component differently when it is active on a page. Here's the code I have so far: import Link from 'next/link'; import styled from 'styled-components'; const NavStyle = styled.nav` ...

javascriptnode.jsreactjsnext.jsstyled-components

Applying FAB (Material UI) to span across 2 columns in a CSS Grid: A step-by-step guide

Is there a way to make the zero button larger than the other buttons in its row by spanning 2 columns? I would like it to be an oversized oval shape. Appreciate any assistance you can provide. import "./styles.css"; import Button from '@mui/materia ...

cssreactjsmaterial-ui

The absence of a dependency array in useEffect results in the rendering of components

During a recent experiment, I noticed something interesting: the timer kept updating even without a dependency array. Here is the code snippet: import React, {useEffect, useState} from 'react'; export function App() { const [count, setCount] = ...

reactjs

conditional statement for manipulating data in javascript/html

I am working on appending results in an object as options in a datalist dropdown. While it is functioning correctly, the issue arises when not all elements have a specific level in the object consistently, impacting which results are added to the list. $( ...

javascriptjqueryhtml

Attempting to serialize a form using Ajax and jQuery

I am facing an issue with submitting user input from a modal using jQuery and AJAX. The problem is that the AJAX call is not capturing the user input. Even though the AJAX call is successful, when I check on the server side, the user input appears to be bl ...

javascriptjqueryhtmlajax

When trying to reference a vanilla JavaScript file in TypeScript, encountering the issue of the file not being recognized

I have been attempting to import a file into TypeScript that resembles a typical js file intended for use in a script tag. Despite my efforts, I have not found success with various methods. // global.d.ts declare module 'myfile.js' Within the re ...

javascriptreactjstypescriptreact-typescript

Customize styles for a specific React component in a Typescript project using MaterialUI and JSS

I'm currently exploring how to customize the CSS, formatting, and theme for a specific React component in a Typescript/React/MaterialUI/JSS project. The code snippet below is an example of what I've tried so far, but it seems like the {classes.gr ...

reactjstypescriptmaterial-uijss

Encountering a 500 error within a Passport JS and React application

I'm currently developing a chat application using React, and I've hit a roadblock while trying to authenticate users. The axios post request is throwing a 500 error that seems to be elusive. Even when the correct credentials are entered for a use ...

javascriptreactjsauthenticationaxiospassport.js

Using PHP to create a loop that generates a multi-radio form: a step-by-step guide

Despite coding it this way, the multiple radio form is still not functioning as intended. I attempted to utilize fieldset, but to no avail. How can I rectify this issue? Could using various ID's for fieldset assist in creating multiple forms correctly ...

phphtmlformsfor-loopradio-button