How can I position a CSS Grid grandchild outside the boundaries of its parent using Tailwind CSS?

I'm looking to create a CSS Grid layout where the grandchild element stretches to fit the width of its parent.

Here's a demo showcasing my issue -> https://play.tailwindcss.com/jZdsHpPAad

The CSS Grid Wrapper I have is as follows:

<div class="wrapper grid grid-cols-[1fr,70px,min(70ch,calc(100%-64px)),70px,1fr] gap-8 mb-24">
  <div class="mt-24 col-[3/4]">
    <dl>
      <dt class="sr-only">Published on</dt>
      <dd class="mb-2 font-medium text-gray-500 dark:text-gray-400">
        <time datetime="2021-07-14T11:46:03.123Z">July 14, 2021</time>
      </dd>
    </dl>
    <ShiftBy x="{-2}">
      <h1 class="text-5xl font-alegreya">20 More Mindfuck Movies For The Brain Scrambling Experience</h1>
    </ShiftBy>
  </div>
  <div class="prose dark:prose-light col-[3/4]">
    <p class="sw-para">The predecessor to this list of mindfuck feature films showcased the average mind-numbing and quasi-discomposing stories from some great film makers. While you relished <a href="http://www.scoopwhoop.com/entertainment/20-mindfuck-hollywood-movies/" target="_blank">the previous list</a>, we felt we should explore different aspects and shades of an epic mindfuck. From the uneasy viewing to the unsettling, the 'what did I just watch' to the 'why did I just watch this', here's a renewed thought-blender list we compiled for you.</p>

    <h2>1. Neco Z Alenky/Alice (1988)&nbsp;</h2>
    <p class="sw-para">A surreal and almost grimy adaptation of <i>Alice In Wonderland, </i>Czech&nbsp;director Jan Svankmajer managed to come up with a low budget film with a unique perspective on retelling the story and far from elaborate filming devices like stop motion and dark lighting. <i>Alice</i>&nbsp;is a complete trip.</p>
    <figure class="sw-media col-[2/5]">
      <!-- col-[2-5] doesn't work -->
      <img src="https://image.scoopwhoop.com/w620/s3.scoopwhoop.com/anj/jf/946880113_3.jpg.webp" data-src="https://s3.scoopwhoop.com/anj/j...

The grid has 5 columns defined by 

grid-cols-[1fr,70px,min(70ch,calc(100%-64px)),70px,1fr]

I want to center my layout within min(70ch,calc(100%-64px)), with only images stretching outside it in 

70px,min(70ch,calc(100%-64px)),70px

All content is within the 3/4 column.

My goal is to have images span the 2/5 column, but due to being a grandchild element, it's not working as intended. I need this setup because I'm using @tailwindcss/typography, which requires the prose class at the top.

Any suggestions on how to make the figure use the 2/5 column effectively within the constraints? If a solution in CSS Grid isn't feasible, utilizing flex or other methods are also welcomed.

htmlcssnext.jscss-gridtailwind-css

Answer №1

Considering it's a grandchild element, achieving what you want may not be feasible directly. A suggestion would be to divide your post into two separate grids - one for the main display and another for the body of the article.

While unconventional, here is an approach that might align with your vision: https://play.tailwindcss.com/gfnljMCxJN?layout=horizontal

<div class="wrapper grid grid-cols-[1fr,70px,min(70ch,calc(100%-64px)),70px,1fr] gap-8 mb-24">
  <div class="mt-24 col-[3/4]">
    <dl>
      <dt class="sr-only">Published on</dt>
      <dd class="mb-2 font-medium text-gray-500 dark:text-gray-400">
        <time datetime="2021-07-14T11:46:03.123Z">July 14, 2021</time>
      </dd>
    </dl>
    <ShiftBy x="{-2}">
      <h1 class="text-5xl font-alegreya">20 More Mindfuck Movies For The Brain Scrambling Experience</h1>
    </ShiftBy>
  </div>
  <div class="prose dark:prose-light max-w-full wrapper col-[2/5] grid grid-cols-[70px,1fr,70px] gap-8 mb-24">
    <p class="sw-para col-start-2">The predecessor to this list of mindfuck feature films showcased the average mind-numbing and quasi-discomposing stories from some great film makers. While you relished <a href="http://www.scoopwhoop.com/entertainment/20-mindfuck-hollywood-movies/" target="_blank">the previous list</a>, we felt we should explore different aspects and shades of an epic mindfuck. From the uneasy viewing to the unsettling, the 'what did I just watch' to the 'why did I just watch this', here's a renewed thought-blender list we compiled for you.</p>
    <h2 class="col-start-2">1. Neco Z Alenky/Alice (1988)&nbsp;</h2>
    <p class="sw-para col-start-2">A surreal and almost grimy adaptation of <i>Alice In Wonderland, </i>Czech&nbsp;director Jan Svankmajer managed to come up with a low budget film with a unique perspective on retelling the story and far from elaborate filming devices like stop motion and dark lighting. <i>Alice</i>&nbsp;is a complete trip.</p>
    // Remaining content to follow...
  </div>
</div>

To achieve this layout, I structured the body of the article as a grid starting from the first 70px gutter to the other col-[2/5], then added its own grid grid grid-cols-[70px,1fr,70px]. To counteract the set maximum width in prose, I used max-w-full to override it. Ensure all text is within col-start-2 columns and figures span across 3 columns with col-span-3. Lastly, images within figures are styled at 100% width with w-full.

This setup allows for a Tailwind grid structure while ensuring images break out of the text seamlessly.

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

Tips for customizing icons when hovering in CSS

I'm trying to make a default icon light up on hover using CSS, but I'm having trouble getting it to work. Any suggestions on how I can achieve this effect? Thank you! HTML <ul class='nav nav-main nav-sidebar'> <li role=&apos ...

htmlcsshover

Python Application Engine - Streamlining Responses from HTML Control Arrays

In my attempt to use App Engine (Python), I am facing a challenge in sending POST values from a variable array of select controls within an HTML form. Each select control is associated with a text describing what the user is rating. For instance, let&apos ...

pythonhtmlgoogle-app-enginepost

Prisma is throwing an error because it is unable to access properties of an undefined variable

When attempting to configure Prisma in my Next.js 13 application, I encountered an error while trying to insert data. You can view the error image here. Below is the model code I am working with: generator client { provider = "prisma-client-js" } datas ...

next.jsprismanext.js13

Modifying the default text within a select box using jQuery

Within a select box identified as 'edit-field-service-line-tid', there is default text displayed as '-Any-'. This particular select field has been generated by Drupal. I am looking to use jQuery to change the text '-Any-' to ...

javascriptphpjqueryhtml

Can responsive images be utilized with a DIV's background-image property?

For my website, I want to incorporate a variety of Thumbnails that are retrieved from a database and displayed in different sizes within a Masonry grid. Typically, I would use background-image:url(image.jpg); background-size: 100% 100%:, but I am aiming t ...

htmlcssimageresponsive-design

Preventing the negative consequences of being colorblind through programming techniques

My experience as a web developer has taught me that poor color contrast on a website can severely impact revenue. I am determined to change this, but have encountered an issue. On my site, there is a section where users can select a color and see it displa ...

javascripthtmlcolorsaccessibility

There is currently no socket connection available in Apollo Server

I currently have a GraphQL server set up with Type-GraphQL + Apollo and I am looking to implement a subscription feature. On the frontend, I am using NextJS + Apollo's client but I have encountered the following error: WebSocket connection to: 'w ...

next.jsapolloapollo-clientapollo-servertypegraphql

The table is not properly displaying within the parent scrolled div due to issues with the fixed positioning

Apologies for any language barrier. I am encountering an issue with a PHP page that includes a table meant to be displayed as position:fixed; however, it consistently appears above the scrollbars and does not stay within the parent div. View screenshot he ...

htmlcss

Center alignment of text and images within the button's image

Can someone help me format my CSS properly? I have a button image where the text should be on the left side and another image on the right side. Currently, everything is centered. Thank you in advance. Here is the current code: button { /* padding- ...

htmlcss

UI experiencing issues with selecting radio buttons

When trying to select a radio button, I am facing an issue where they are not appearing on the UI. Although the buttons can be clicked, triggering a function on click, the selected option is not displayed visually. <div data-ng-repeat="flagInfo in avai ...

javascriptangularjscss

Running a continuous JQuery function loop

I need assistance with creating a continuous image fade in and out effect. Currently, my code looks like this: $(document).ready(function(){ $(".slider#1").delay(1000).fadeIn(2000); $(".slider#1").delay(1000).fadeOut(2000); $(".sli ...

jqueryhtml

Tips on optimizing website performance by implementing lazy loading for images and ensuring they are ready for printing

Many websites feature an abundance of images, prompting the use of lazy loading to enhance load times and reduce data consumption. But what happens when printing functionality is also required for such a website? One approach could involve detecting the p ...

javascripthtmlimageprintinglazy-loading

Error with the jQuery scrolling plugin

Currently, the script is set up this way: jQuery(document).ready(function(){ var windheight = jQuery(window).height(); var windTop = jQuery(window).scrollTop(); var windbottom = windheight + windTop ; jQuery.fn.revealOnScroll = function(){ return this.e ...

javascriptjqueryhtmlcss

JavaScript - Unable to Modify Select Value with Event Listener

It's interesting how I can change the selected option in a dropdown list using JavaScript without any issues. However, when I try to do the same thing within an event listener, the option does not seem to change. Here's the HTML code: <select ...

javascripthtml

Increase and decrease thumbnail size using an onclick event

https://i.sstatic.net/oDkB9.png I've been experimenting for hours to try and create a functionality where the thumbnail image on my HTML page enlarges when clicked, and then shrinks back down when clicked again. However, I'm encountering an issu ...

javascripthtmlcssthumbnailsimage-resizing

Looking to implement a condition that prevents the echoing of HTML code when a certain template ID is selected?

Struggling with inherited PHP MVC code for a website, I encounter an issue on a specific page where unwanted code is echoed out. To prevent this, I aim to skip the echoing when a specific templateID (which I set as default) is selected. However, I'm u ...

phphtmlsql

Achieving perfect alignment for CSS heading and floated controls in the center of the page

I seem to encounter situations where I need inline-block elements on opposite ends of the same "line" while also needing them to be vertically aligned. Take a look at this example: http://jsfiddle.net/96DJv/4/ (focus on aligning the buttons with the headi ...

cssvertical-alignment

How do I change the class of an element using $this?

Please review the code below: $(".nwe-cl-icontext").click(function () { $(this).parent().toggleClass("nwe-active"); }) .nwe-cl-c.nwe-active { background: red; } .nwe-cl-c { background: green; } <scrip ...

htmljquerycss

Choose a Vue filter according to the variable selected

My Current Table Dilemma Creating a table from a 2D array in Vue2 has been successful for me, as I've managed to display all the values correctly. However, I am facing issues with formatting. The template code is structured like this: <table> ...

javascripthtmlvue.jsvuejs2

Tips for displaying the product title of an item in the Woocommerce shopping cart

Is there a way for me to display the title of the product in my Woocommerce store's cart on the checkout page? My store only allows one product in the cart at a time, and I want to customize the checkout page to show the product title. I've tri ...

phphtmlcsswordpresswoocommerce