Arranging three elements in a CSS grid for perfect alignment

I started with 3 elements and thought about making them adaptive by using css grid.

<div class="elements-wrapper">

  <div class="element-1"></div>
  <div class="element-2"></div>
  <div class="element-2"></div>

</div>

Can you provide the CSS code for this layout?

.elements-wrapper{
  position: relative;
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 60px;
  margin-bottom: 10%;
}

It's working well, but on smaller screens (around 1200px) the third element moves to the bottom and aligns to the edge. I want it to be centered. What modifications are needed?

 | element1 | | element2 |    or    | element1 | | element2 |
 | element3 |                                     | element3 |

I'd like the elements to be centered like this:

 | element1 |  | element 2 |
        |element 3 |
css

Answer №1

It's not entirely clear from the question whether the width of the elements is predetermined or not.

Based on your mention of a maximum width of 1200, I assume it is. In that case, you can address this issue by incorporating various styles within a media query.

Here is a potential solution:

.elements-wrapper{
  position: relative;
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 60px;
  margin-bottom: 10%;
}

.element-1 {
  background-color: tomato;
  height: 50px;
}

.element-2 {
  background-color: lightblue;
  height: 50px;
}

.element-3 {
  background-color: lightgreen;
  height: 50px;
  grid-column-start: 1;
  grid-column-end: 3;
  width: 300px;
  margin:  auto;
}
<div class="elements-wrapper">
  <div class="element-1"></div>
  <div class="element-2"></div>
  <div class="element-3"></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

Unable to customize the button color within the Bootstrap framework

This button was created using Bootstrap. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <lin ...

htmlcsstwitter-bootstrap

My mobile is the only device experiencing responsiveness issues

One challenge I'm facing is with the responsiveness of my React application, specifically on my Galaxy J7 Pro phone which has a resolution of 510 pixels wide. Interestingly, the app works perfectly on a browser at this width, as well as on my tablet ...

cssreactjsresponsive-design

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

Adaptable Text Title

Is there a way to make text headings responsive? When looking at the example provided here, we can see the heading is "The Swift List". How can I ensure that the words "THE" and "LIST" remain aligned with the edges of the word "SWIFT"? While I have managed ...

htmlcsstwitter-bootstrapresponsiveheading

How to eliminate the left padding in a list using CSS

When using chrome's "inspect element" tool, I noticed a padding-left:40px coming from the "user agent stylesheet". I am looking for a way to remove this specific styling without affecting the rest of my web layout code: http://jsfiddle.net/FranLegon/ ...

htmllistcss

Expanding images to fit the div's width in Bootstrap

I've encountered an issue with my grid of resized images - the original images are larger than what can be accommodated by the Bootstrap grid setup. The problem arises when I decrease the width of my window - instead of maintaining the resized size a ...

htmlcssimagetwitter-bootstrap

What is the best way to adjust for additional spacing created by a scrollbar using CSS?

Is there a way to maintain alignment between two elements on a webpage, even when a scrollbar disrupts the layout? This challenge arises when one element needs to be aligned with another, but the appearance of a scrollbar throws off the alignment. How can ...

javascripthtmlcssreactjssass

Ul list centered alignment appears misaligned to the left in Safari browser exclusively

I'm experiencing an issue with my menu alignment. It appears perfectly centered in FF, Chrome, and IE, but shifts to the left in the Safari browser. I'm not sure if there is a specific CSS property I need to use to correct this alignment. <d ...

htmlcss

What is the best way to integrate data-bs-toggle into my code?

I am currently exploring the use of data-bs-toggle with Bootstrap, but as a newcomer to the framework, I might be missing something essential in my setup. When attempting to implement data-bs-toggle, I notice that my autocomplete suggestions only include d ...

htmljquerycssbootstrap-5

The hover effect on MUI TableRows is being overshadowed by the background color of the TableCell

I'm currently using @mui/material version ^5.10.1. My challenge is applying the TableRow hover behavior as outlined in the documentation. However, I have also set a background color for the first TableCell in each row, which ends up overriding the ho ...

cssreactjsmaterial-uihovertablerow

Stack one image on top of another while maintaining their original proportions using HTML and CSS

I have two images, one is used as a background (A) and the other (B) is positioned over a portion of the background. The issue I am facing is that when the resolution changes, the image B moves and is no longer in the desired position. https://i.sstatic.ne ...

htmlcss

What is the best way to align my logo image and search field at the center of the page, similar to the layout of

Struggling with styling this webpage. I aim to have my logo and search bar centered on the page, surrounded by ample space above and below. You can check it out at NE1UP dot com. All I want is a Google-style layout for my page, but I'm facing difficu ...

htmlcsstwitter-bootstrap

Jquery CSS malfunctioning on Post's div element

After retrieving a div using jquery's post method on my page, I am encountering an issue when attempting to apply CSS to the divs. Strangely enough, applying CSS with jquery to divs that are already present on the page works perfectly fine. Javascrip ...

jquerycss

Troubleshooting: Twitter Bootstrap dropdown feature experiencing issues within navigation bar

I am facing an issue with getting the bootstrap dropdown to function properly. I have tested it on my mobile device and noticed that the menu does not drop down as expected. Here is a DEMO Below is the code snippet: <nav class="navbar navbar-inverse ...

jqueryhtmlcsstwitter-bootstrapdrop-down-menu

The pseudo class remains unaltered

I've been experimenting with creating pop up links that appear next to a button when the button is clicked. So far, I've tried using various CSS selectors like :active and :hover without success. Additionally, I attempted to use selectors such a ...

htmlcsscss-selectors

Assistance with themed implementation for single-page web applications in JavaScript

My goal is to incorporate theme support into my single page application. The catch is that the theme change needs to be done locally through JavaScript without making any server calls, in order to work in offline mode. Since I am using angularjs, the HTML ...

javascriptcssthemesangularjs

Personalized CSS designs within the <option> element in an expanded <select> menu

Are there alternative methods for customizing an expanded select list using HTML or a jQuery plugin? I am interested in rendering each option in the list with multiple styles, similar to this example where the number is displayed in red: <select size=" ...

jqueryhtmlcssdrop-down-menuitemscontrol

The process of making a pop-up modal instead of just relying on alerts

Attempting to change from using an alert to a pop-up with a simple if statement, but encountering some issues. Here is the current code: if(values == ''){ $('body').css('cursor','auto'); alert("Blah Blah..." ...

javascriptjqueryhtmlcss

"Create a unique visual layout with CSS using a four-grid

When utilizing four div grids and increasing the content size of table 2, it causes table 3 to align with table 4, creating a large gap between tables 1 and 3. Is there a way to adjust the responsive content sizing for tables 1, 3, 5... and 2, 4, 6... in o ...

htmlcss

Getting the checkbox count value in a treeview upon successful completion of an AJAX request

After successful JSON Ajax response, a treeview structure with checkboxes is displayed. I need to capture the number of checkboxes checked when the save button is clicked. @model MedeilMVC_CLOUD.Models.UserView <script type="text/javascript"> ...

javascriptjqueryhtmlcssajax