Attempting to troubleshoot a CSS grid layout for optimal functionality

I'm looking to achieve a unique layout where the image is on the left, but the content (title above meta, meta above text) is displayed on the right in a blog list style.

With the limitation of not being able to change the HTML structure, I am wondering how I can use CSS grid to accomplish this design?

<article>

<img src="https://dummyimage.com/300x200/000/fff" alt="Golden Meadow" width="180">

<h2 >Golden Meadow</h2>

<p>by <span>Jack</span> in <span>News</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc aliquam justo et nibh venenatis aliquet. 
Morbi mollis mollis pellentesque. Aenean vitae erat velit. </p>

</article>

https://jsfiddle.net/ch9n26sz/

csscss-grid

Answer №1

To create a grid layout, you must define the grid and specify where elements should be placed within it:

Example:

article {
  display: grid;
  grid-template-columns: auto 1fr;
}

:not(img) {
  grid-column: 2;
  /* other style */
  padding: 0.25rem;
  /* ... */
}
<article>
  <img src="https://dummyimage.com/300x200/000/fff" alt="Golden Meadow" width="180">
  <h2>Golden Meadow</h2>
  <p>by <span>Jack</span> in <span>News</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam justo et nibh venenatis aliquet. Morbi mollis mollis pellentesque. Aenean vitae erat velit. </p>
</article>

For more information or a tutorial, visit https://css-tricks.com/snippets/css/complete-guide-grid/

An image can also span multiple rows and be aligned within them:

article {
  display: grid;
  grid-template-columns: auto 1fr;
}

img {
  grid-row: span 5; /* Number of rows to span */
  margin: auto 0.5em; /* align-self property can also be used - refer to tutorials for more details */
}
<article>
  <img src="https://dummyimage.com/300x200/000/fff" alt="Golden Meadow" width="180">
  <h2>Golden Meadow</h2>
  <p>by <span>Jack</span> in <span>News</span></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam justo et nibh venenatis aliquet. Morbi mollis mollis pellentesque. Aenean vitae erat velit. </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam justo et nibh venenatis aliquet. Morbi mollis mollis pellentesque. Aenean vitae erat velit. </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc aliquam justo et nibh venenatis aliquet. Morbi mollis mollis pellentesque. Aenean vitae erat velit. </p>
</article>

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

My header has a video background that appears aesthetically pleasing on a desktop screen. However, when viewed on a mobile device, it is off-center and doesn't span the full

I am having an issue with a header that has a video background. It looks great on desktop, but on mobile devices, it is only taking up about 2/3 of the screen width and is aligned to the left side instead of filling the entire width. I have tried several ...

htmlcss

Hover effects using CSS3 transitions for the content before

Greetings everyone, I apologize for any language barriers. The title may not be clear at first glance, so let me explain what I am attempting to achieve. I have a navigation menu structured like this: <nav> <ul> <li>& ...

csscss-transitions

Unusual happenings detected in Magellan Fixed with Foundation 5

I need help creating a product summary sidebar similar to Apple's. I'm using Magellan but it seems to break the page when the width is below 960 pixels. It might be related to the table, but I'm not sure. Any suggestions or assistance would ...

javascriptcssresponsive-designzurb-foundationmagellan

What causes an absolutely positioned element to be positioned by its sibling rather than at the top corner of the page?

Can someone explain to me why my absolutely positioned element is displaying after my child_static div? I'm under the impression that absolutely positioned elements are removed from the normal flow. So why isn't child_absolute covering the child_ ...

htmlcsscss-positionabsolute

Passing the hex code value of the background-color to the .text() function

My goal is to dynamically read the hexadecimal code from the <span> tag and set it as the background color of the same tag using jQuery. Currently, I have code that achieves this with specific variables, but I want to make it more dynamic. $(docum ...

jquerycss

Ways to toggle the sliding of text on and off an image?

After spending some time experimenting with my code, I managed to get it working. Essentially, when a user hovers over an image, text now appears over the image. Since this is a gallery, I had to utilize $(this).children in order to target and display the ...

javascriptjqueryhtmlcss

On the same line, there are two divs with different characteristics - one dynamically changing width and the

I am facing an issue with arranging two divs under one parent div. The parent div is set to have a width of 100%: <div id="parent"> <div class="left"></div> <div class="right"></div> </div> The specific conditions ...

csshtml

Position a div relative to another div with a static position

I am attempting to create a site that is fullscreen and responsive, but I am having issues with elements in the container overflowing on smaller screens, causing it to not be 100% as desired. I have tried using: top:100%; position:relative; width:100%; he ...

javascriptjqueryhtmlcss

Connecting Documents and Organizing Folders

Currently, I am immersed in a web project leveraging java/ jsp/ servlets/ html/ css within Eclipse Tomcat. At the core of this project, all files are nestled neatly within the WebContent folder. Within my jsp files, I have encountered an issue when trying ...

javacsseclipsejsptomcat

exploring the contrast of css versus javascript selectors

Could you please explain the contrast between div#name and #name? Is there a significant difference when using class or id to position an element? Thank you for your help. ...

javascriptcss

HTML: attempting to align a quote image next to some text within the page

I want to add a quote to my website, but I'm having trouble positioning it correctly. https://example.com/quote-image.png Every time I try to adjust the position of the quote image, it moves when I zoom out. https://example.com/background.png I attem ...

htmlcss

Providing space for a two-line title

It's a bit tricky to explain, so if anyone has a better title in mind, feel free to change it. I'm trying to create a black box behind my headline. I'm using a span inside the h-tag for this purpose, but I need to add some padding to the le ...

csspaddinghtml

Creating Dynamic CSS Styling with Vendor Prefixes in Angular 2

I am exploring how to create a component in Angular 2 with two input arguments: colorOne and colorTwo. The goal is to fill a <div> with a gradient of these two colors. If I simply wanted to set the div background color to colorOne, I could achieve t ...

cssangular

Are all elements still displaying the menuBar style? Using the PHP include function, <?php include... ?>

Here is the Menu Bar code I am using: <!DOCTYPE html> <html> <link href = menuBarStyle.css rel = "stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <div class = "menu"> ...

htmlcss

The issue persists with Font-Awesome loading in Edge and IE browsers

I've been experimenting with using netdna.bootstrapcdn.com. So far, it's working perfectly in Firefox and Chrome but I'm encountering loading issues in IE - 11 and Edge. This is how I imported the CSS library: <link rel="stylesheet& ...

htmlcssbootstrap-4netdna-api

When applying the `display:block` and `width:100%` attributes to an HTML table cell, it may

My issue lies in the usage of DISPLAY:BLOCK for the td cells with a class of column. Despite applying it appropriately, the logo and CALL US td cells do not stack vertically when resized to mobile size. While they are supposed to take up 100% width, they ...

htmlcss

What is the best way to fit the text into a DIV row as efficiently as possible?

Looking for a solution to prevent a span from dropping down to the next line when text is too long within a fixed width and height row. The row consists of three elements, two with fixed widths and the third containing a span and text. Constraints include ...

htmlcss

Legend alignment issue in Firefox disrupting Flexbox functionality

My fieldset has a legend containing text and a button. I am attempting to use flexbox to right-align the button within the legend. This setup works correctly in Chrome, but encounters issues in Firefox. I have managed to replicate the problem with a simpl ...

htmlcssflexbox

Endlessly tapping through each tab with no direction

I am attempting to click on all unopened tabs (elements) randomly across this page. While the code below usually does the trick, it sometimes doesn't click on all elements. I suspect that there might be an issue with how it loads indexes or some othe ...

pythoncssseleniumxpathselenium-webdriver

The Ultimate Slider: Highlighting Custom Navigation Link as Active While Navigating with Arrows

I have implemented custom navigation links for my slick slider in order to navigate to specific slides. The functionality works perfectly, but I encountered an issue when I added the built-in arrows provided by the slider. Whenever I use these arrows to n ...

javascriptjquerycsssliderslick.js