2 column setup in the last row of a CSS grid

Can anyone help me troubleshoot an issue with aligning two buttons to the right in a form using CSS grid? I've attached a screenshot for reference.

https://i.stack.imgur.com/DFGrx.png **css **

.wrapper {
    width:75%;
    padding-top: 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 15px;
    margin: 0;
    background: white;
    display: grid;
    grid-template-columns: 35% 65%;

    .grid-item {
        font-size: 16px;
        font-weight: normal;
        color: #4D4D4D;
        background: #FFFFFF;
        border: 1px solid #828995;
        height: 20px;
    }
    label {
        font-size: 16px;
        font-weight: normal;
        color: #4D4D4D;
        padding: 14px 0 0 0;
        display: inline-block;
        font-family: "Corpid";
    } 

}

<form>
        <div className="wrapper">
          <label htmlFor="email">Email*</label>
          <input id="email" type="text" className="grid-item"/>
          <label htmlFor="name">Name*</label>
          <input id="name" type="text" className="grid-item"/>
          <BaseButton >{"Back"}</BaseButton>
          <BaseButton>{"Send"}</BaseButton>
        </div>
      </form>
cssgridcss-grid

Answer №1

.wrapper {
    width:75%;
    padding-top: 15px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 15px;
    margin: 0;
    background: white;
    display: grid;
    grid-template-columns: 35% 65%;
}
    .grid-item {
        font-size: 16px;
        font-weight: normal;
        color: #4D4D4D;
        background: #FFFFFF;
        border: 1px solid #828995;
        height: 20px;
    }
    label {
        font-size: 16px;
        font-weight: normal;
        color: #4D4D4D;
        padding: 14px 0 0 0;
        display: inline-block;
        font-family: "Corpid";
    } 
    .buttons-wrapper {
display: flex;
flex-direction: row;
justify-content: end;
color: red;
width: 100%;
grid-column: span 2;
}
<form>
        <div class="wrapper">
          <label htmlFor="email">Email*</label>
          <input id="email" type="text" class="grid-item"/>
          <label htmlFor="name">Name*</label>
          <input id="name" type="text" class="grid-item"/>
          <div class="buttons-wrapper">
           <div >{"Back"}</div>
           <div>{"Send"}</div>
          </div>
        </div>
</form>

I have included a new div element to wrap the two elements and adjust their display to flex with a row direction to keep them in the same row. Then, I aligned the content inside the buttons-wrapper to the right...
This modification should suit your requirement.

<form>
        <div className="wrapper">
          <label htmlFor="email">Email*</label>
          <input id="email" type="text" className="grid-item"/>
          <label htmlFor="name">Name*</label>
          <input id="name" type="text" className="grid-item"/>
          <div className="buttons-wrapper">
           <BaseButton >{"Back"}</BaseButton>
           <BaseButton>{"Send"}</BaseButton>
          </div>
        </div>
</form>

.buttons-wrapper {
display: flex;
flex-direction: row;
justify-content: end;
width: 100%;
grid-column: span 2;
}

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'm looking to display images in a designated React component using create react app. What is the best way to accomplish

Currently in the process of revamping an older website using react. Making progress, but encountering an issue with a new component where images are not displaying. Strangely, the images appear in the main class but not within the component class. Even whe ...

cssreactjs

The background image fails to display

Having some trouble with setting an image as the background using CSS. When I directly input the image URL, it shows up fine with this code: background: url('images/image1.jpg); However, I would prefer to use this CSS code instead: .masthead { m ...

htmlcssweb

Building a responsive CardMedia component with React Material UI

I am currently working on creating a gallery using React Material UI (utilizing Card, ...). I am facing some challenges in making the gallery responsive, especially with varying cover sizes: https://i.stack.imgur.com/2n6vf.png Here is the code snippet I ...

cssreactjsflexboxresponsive-designmaterial-ui

The hover effect on the menu button is not covering the entire button when the screen is resized

It appears that I am encountering a problem with the hover functionality. When my screen is at full size, hovering over a menu option causes the entire background color to change. However, upon resizing the screen, only a part of the background color chang ...

htmlcsshover

The JavaScript code that functions properly in Codepen is not functioning on my HTML page

Can you help me understand why this code is working fine in CodePen, but not on my HTML page? I'm unable to identify the error that may have occurred. Any assistance would be greatly appreciated! I suspect there's an issue with connecting some jQ ...

javascriptjqueryhtmlcsscoffeescript

Do Scss mixins have the ability to adapt to different screen sizes

In my CSS, I set different font sizes for different devices: For example: @media only screen and (min-width: 480px) and (max-width: 599px) { t-heading { font-size:14px; } } @media only screen and (min-width: 600px) { t-heading { font-size:24px; } } I ...

cssresponsive-designsass

What is the best way to align a modal with a layout when it appears far down the components hierarchy?

Struggling with creating a React modal and facing some issues. Let's consider the structure below: React structure <ComponentUsingModal> <Left> <ButtonToActivateModal> ... </ButtonToActivateModa ...

javascripthtmlcssreactjs

Is it possible to incorporate Google icons within Freemarker?

https://i.stack.imgur.com/Pv2T4.pngI'm having trouble using Google icons in my project. Can anyone help me figure out how to fix this? UPDATE: Here is a snippet of my HTML template: <?xml version="1.0" encoding="UTF-8"?> < ...

javacssfreemarker

Creating a triangle shape using Bootstrap to style a div element, similar to the image provided

Trying to achieve the look of the attached image with a few divs. I know I can use a background image like this: background:url(image.png) no-repeat left top; But I'm curious if there's another way to achieve this without using a background ima ...

javascripthtmlcsstwitter-bootstrap

Steps to insert a new row for a grid item using material-ui

When it comes to breaking a line of grid item like this, the image shown below illustrates how the rest space of the grid should be empty. https://i.stack.imgur.com/pvSwo.png <Grid container spacing={3} <Grid item xs={12}> "Grid Item xs ...

cssreactjsflexboxmaterial-uicss-grid

"Finding the Perfect Alignment: How to Center Legends in Firefox

The issue at hand An issue has been identified where the code functions as intended in Chrome, Opera, and IE but fails to work in Firefox: fieldset>legend { display: table; float: none; margin: 0 auto; } <fieldset> <legend>Legend ...

htmlcssfirefox

Exploring the Transition from React.js with Material UI to Next.js for Server-Side Rendering: A Comparison of Tailwind CSS, Material UI, and Chakra UI

Currently, I am in the process of moving my React.js application with Material UI components to Next.js for server-side rendering (SSR) while considering some UI changes. In my research, I have come across three UI frameworks: Material UI, Chakra UI, and T ...

cssreactjsnext.jsmaterial-uifrontend

Why do CSS media queries stop working at exactly 5 distinct resolution sizes? This seems odd

Just completed my first JavaScript project, a 3D website using three.js. However, right before publishing, I realized that the dimensions and contents were not optimized for viewing on browsers other than 1920x1080. So, I delved into setting DevicePixelRat ...

htmlcssmedia-queries

Capturing the action phase in Liferay to change the cursor to 'waiting' mode

I'm currently working on a large Liferay project and have encountered a specific issue: Whenever something in the system is loading or processing, I need to change the cursor to a waiting GIF. While this is simple when using Ajax, there are many inst ...

javajavascriptjquerycssliferay

Tips for concealing the top button on a mat calendar

I have a calendar for a month and year, but when I click on the top button it also displays the day. How can I hide that button or instruct the calendar not to show the days? Check out this image I was thinking of using a CSS class to hide that element. ...

cssangularangular-material

What is the best way to incorporate an image zoom-in effect into a flexible-sized block?

Having a fluid grid with 3 blocks in one row, each set to width:33.3%. The images within these blocks are set to width: 100% and height: auto. I am looking to implement a zoom-in effect on hover for these images without changing the height of the blocks. I ...

javascriptjqueryhtmlcss

The optimal method for selecting a button from a group of buttons on a calculator using pure JavaScript

I have developed an HTML/CSS code inspired by the Mac/Apple calculator design. It features buttons organized in 5 rows using flexbox. You can view my code on this codepen: <div class="wrapper"> <div class="calheader"> ...

javascripthtmlcss

Leveraging the ng-hide property of one controller to adjust the ng-style attribute of another controller through a centralized global controller

Seeking assistance with accessing the boolean value of ng-hide from one controller in order to alter CSS properties of another controller utilizing a global controller. Here is the jsfiddle link: https://jsfiddle.net/dqmtLxnt/ HTML <div ng-controller= ...

javascripthtmlcssangularjs

What could be causing my page width to only expand to 100% when using "fit-content"?

After searching extensively, I'm unable to find a solution that fits my current issue. My goal is to construct a practice ecommerce website using React. One of the components I have is a header which I'd like to occupy 100% of the screen width, c ...

javascriptcssreactjswidth

What is the best way to implement this design using CSS or JavaScript?

I would like to enhance the appearance of my school website during these challenging times of the pandemic by adding some CSS or JavaScript elements. However, I am unsure how to go about it. ...

javascripthtmljquerycssvue.js