The grid elements are not in perfect alignment

I'm having trouble aligning the <p> element to the left and the image to the right. The image is not aligning properly with the fourth column, so I need to figure out how to fix that.

.content{
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  padding: 1cm;
  height: 500px;
}

#subcontent img {
  grid-column: 4;
  grid-row: 1;
}
<div class="content">
  <div id="subcontent">
    <h3>Lorem Ipsum</h3>
    <img src="https://i.imgur.com/6MJo1wH.png"/>
  </div>
</div>

htmlcsscss-grid

Answer №1

Is this the solution you are looking for? Keep in mind that your image is not directly nested within a grid, so applying grid-column to it may not produce the desired result.

.content{
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  padding: 1cm;
  height: 500px;
}

.content img {
  grid-column: 4;
  grid-row: 1;
  max-height: 100%;
  max-width: 100%;
}
<div class="content">
    <h3>Lorem Ipsum</h3>
    <img src="https://i.imgur.com/6MJo1wH.png"/>
</div>

Answer №2

I'm a bit uncertain about the design you had in mind for this section, but it seems like you indicated that the 4th column should span 2 rows. If we adjust this to have only 1 row, everything will align properly:

.references {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  padding: 1cm;
  height: 500px;
}

#subcontent {
  grid-column: 4;
  grid-row: 1;
}
<div class="references">
  <div>
    <h3>Lorem Ipsum</h3>
    <p>Nam volutpat pharetra velit in scelerisque. Etiam at dapibus justo. Ut porta enim massa, vel commodo nunc tincidunt eu. Sed sit amet eleifend turpis.</p>

  </div>
  <div>
    <h3>Lorem Ipsum</h3>
    <p>Nam volutpat pharetra velit in scelerisque. Etiam at dapibus justo. Ut porta enim massa, vel commodo nunc tincidunt eu. Sed sit amet eleifend turpis.</p>

  </div>
  <div>
    <h3>Lorem Ipsum</h3>
    <p>Nam volutpat pharetra velit in scelerisque. Etiam at dapibus justo. Ut porta enim massa, vel commodo nunc tincidunt eu. Sed sit amet eleifend turpis.</p>

  </div>

  <div id="subcontent">
    <h3>Lorem Ipsum</h3>
    <p>Nam volutpat pharetra velit in scelerisque. Etiam at dapibus justo. Ut porta enim massa, vel commodo nunc tincidunt eu. Sed sit amet eleifend turpis.</p>
  </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

generate a customized synopsis for users without storing any data in the database

In order to provide a summary of the user's choices without saving them to the database, I want to display it in a modal that has already been created. Despite finding some sources online, none of them have worked for me so far. Below is my HTML: &l ...

javascriptjqueryhtmlcss

Ways to obtain jquery object for replaced DOM element

Is there a way to select the new content after using the replaceWith function in my plugin? I want to chain my plugin for the new content. $.fn.customPlugin = function() { this.replaceWith('<div>New Content</div>'); }; So, ideal ...

jqueryhtml

Special html effects for scrolling

Recently, I've been noticing a trend of websites incorporating new and innovative scrolling effects. One great example is: As you scroll down the page, the initial section stays fixed in place (z-index of 1?) while the content scrolls over it seamles ...

htmlcssfragment-identifier

Tips for securely transmitting data via a hidden form using the POST method

I have a query that displays records of people, and I want to send the id_Persona using a hidden form through a post function to the idsPersonas.php page. However, when I try to do this, it redirects me to an undefined page. Here is the code snippet: < ...

javascriptphpjqueryhtmlmysql

Using Angular 2 to round a calculated number within HTML

In the HTML code, there is a calculated number associated with Component1. Component1 serves as a tab page within a Bootstrap tab panel. Below is the HTML code with the tab panel: <div id="minimal-tabs" style="padding:75px;padding-top:60 ...

htmlangulartypescriptangular-pipe

Steps for shaping the dialog of Material-UI to fit an image

Is there a way to adjust the size of the dialog box to match that of the image? https://i.stack.imgur.com/pXtXg.png I've also tried changing the background color to transparent without success. https://i.stack.imgur.com/Hjx2x.png ...

htmlcssreactjsdialogmaterial-ui

Uncovering the hidden gems within a data attribute

Trying my best to explain this clearly. What I have is a data-attribute that holds a large amount of data. In this case, I need to extract each individual basket product ID and display them as separate strings. The challenging part for me is locating thi ...

javascriptjqueryhtml

Customizing the style of a dropdown menu in React Material UI using NativeSelect

In our previous projects, we have utilized the NativeSelect components. Now, the task at hand involves altering the appearance of the dropdown Menu within the NativeSelect. If we were to switch to using Select instead, employing the MenuProps property wo ...

cssreactjsmaterial-ui

The Google Chart is failing to show up on the screen

I'm having trouble implementing a feature that involves selecting a region from a dropdown list and requesting rainfall data to display in a Google Chart. Unfortunately, I've encountered some issues with it. Could you please help me identify ...

javascriptjqueryhtmlcssgoogle-visualization

Exploring the power of Vue element manipulation

I'm diving into the world of web development and starting my journey with Vue on an online learning platform. Check out the code snippet below: <div id="app"> <form @submit.prevent="onSubmit"> <input v-model="userName"&g ...

javascripthtmlvue.js

Button click event not triggering JavaScript execution

I am experimenting with HTML, PHP and JS and have encountered a problem. Here is my code: <html> <head> <title> Dummy Code </title> <script> sendMail(){ <?php $to = '<a href="/cdn-cgi/l/email-protection" class ...

phpjavascripthtml

Explanation for aligning anchors within an HTML <div>

I'm faced with this HTML snippet: <div class="row"> <div class="col-md-10 social-icons"> <a href="https://www.youtube.com/" target="_blank"><img src="/images/youtube-i.png"></a> <a href="https://gi ...

htmlcss

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

Having trouble accessing the height of a div within an Iframe

Here is the issue I am facing: I need my iFrame to adjust its size based on a div within it, but every attempt to retrieve the size of this div results in 0. var childiFrame = document.getElementById("myDiv"); console.log(childiFra ...

javascripthtmliframe

Stop text from overflowing when it reaches the maximum width in flexbox

A basic flexbox layout is displayed with an image next to text, aiming for this layout: #container { align-items: center; background: black; display: flex; justify-content: center; padding: 10px; width: 500px; /* Dynamic */ } #image { bac ...

htmlcssflexbox

Drop down menu alignment issue: unable to center menu on the page

My dropdown menu is misaligned and not centering on the page, even after multiple attempts to fix it using HTML and CSS only. I have refrained from using JavaScript or JQuery for this issue. CSS Code: <style type="text/css"> /* STYLING FOR DROPDOWN ...

htmlcssmenudrop-down-menu

Guide on changing image source using a function

I am looking to dynamically set the img src="" attribute using a JavaScript function that changes the image based on a variable and checks its values: Here is the JavaScript code in the file: function myFunctionstatus(){ var ledactual = document.getE ...

javascripthtmlimagebutton

Steps for incorporating the count() value in Django for web developmentTo embed the count() value while creating

I'm currently working on a web visual board project using Django. Here is the specific HTML section where I need to populate values from the database: <tbody> {% for obj in data_list %} <tr> <th>{{ ob ...

pythonhtmldjangofrontendbackend

What methods can be used to ensure a div reaches all the way down to a sticky footer?

I'm currently working on a layout with a sticky footer, and I have a specific div that needs to extend all the way down to the footer. However, simply setting the height to 100% doesn't achieve the desired result. I've also experimented with ...

htmlcsssticky-footer

Width of ListBox Item

How can I adjust the width of items in my RadListBox that are being inserted programmatically to prevent multiple items from displaying on a single line? Currently, the items are added to the listbox in C# code like this: rlbAssigned.Items.Add(new RadLis ...

asp.netcsstelerik