在 Tailwind CSS 中将 CSS 网格孙子展开到其父级的宽度之外？
Explode CSS Grid grandchild out of the width of its parent in Tailwind CSS?
我想要一个 CSS 网格孙子超出其父级的宽度。
我的可重现演示 -> https://play.tailwindcss.com/jZdsHpPAad
我有以下 CSS 网格包装器：
<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) </h2>
<p class="sw-para">A surreal and almost grimy adaptation of <i>Alice In Wonderland, </i>Czech 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> 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/jf/946880113_3.jpg" alt="" class="load" />
<figcaption>Source: <a href="http://www.dailymotion.com/video/x2jjkww" target="_blank" rel="nofollow">dailymotion.com</a></figcaption>
</figure>
<h2>2. Hard To Be A God (2013)</h2>
<p class="sw-para">Based on the Arkady and Boris Strugatsky novel of the same name, <i>Hard To Be A God</i> is a Russian sci-fi film set in a retroesque dystopic alien planet where intellectual thought is outlawed and humans are basically still stuck in a world similar to the dark ages. This one's as brutal as it is dark and uneasy to watch.</p>
<figure class="sw-media">
<img src="https://image.scoopwhoop.com/w620/s3.scoopwhoop.com/anj/jf/64386347_3.jpg.webp" data-src="https://s3.scoopwhoop.com/anj/jf/64386347_3.jpg" alt="" class="load" />
<figcaption>Source: <a href="http://www.telegraph.co.uk/film/hard-to-be-a-god/review/" target="_blank" rel="nofollow">telegraph.co.uk</a></figcaption>
</figure>
<h2>3. Fear And Loathing In Las Vegas (1998)</h2>
<p class="sw-para">An easy pick; and, for those who haven't watched it, <i>Fear And Loathing</i> is a must on your epic mindfuck list. Starring Johnny Depp and Benicio del Toro in a hazed out and psychotropic drug infused journey through Las Vegas, this film is a tripped out experience.</p>
<figure class="sw-media">
<img src="https://image.scoopwhoop.com/w620/s3.scoopwhoop.com/anj/jf/126406619_3.jpg.webp" data-src="https://s3.scoopwhoop.com/anj/jf/126406619_3.jpg" alt="" class="load" />
<figcaption>Source: <a href="http://www.silverlakepictureshow.com/show/fear-and-loathing-in-las-vegas/" target="_blank" rel="nofollow">silverlakepictureshow.com</a></figcaption>
</figure>
<h2>4. El Topo (1970)</h2>
<p class="sw-para">Directed by Alejandro Jodorowsky, <i>El Topo</i> is an American-Western following the story of a violent gun slinger in the west on a journey to find enlightenment. <i>El Topo </i>is a fairly graphic and almost caricature like movie with an indirect plot and extremely twisted character play. </p>
<figure class="sw-media">
<img src="https://image.scoopwhoop.com/w620/s4.scoopwhoop.com/anj/jf/293987293_3.jpg.webp" data-src="https://s4.scoopwhoop.com/anj/jf/293987293_3.jpg" alt="" class="load" />
<figcaption>Source: <a href="https://www.youtube.com/watch?v=6Uqb4Jy0GTg" target="_blank" rel="nofollow">youtube.com</a></figcaption>
</figure>
</div>
</div>
它有 grid-cols-[1fr,70px,min(70ch,calc(100%-64px)),70px,1fr]
提到的 5 个网格列
我希望我的布局居中，即留在 min(70ch,calc(100%-64px)) 之内，只有图像留在外面，即 70px,min(70ch,calc(100%-64px)),70px
所有内容都在 3/4 列中。
我希望我的图像在 2/5 中，但它不起作用，因为它不是直接子级。是个孙子。
我需要这样做的原因是我想使用 @tailwindcss/typography 需要将 prose class 添加到顶部，因此，额外的 div .如果我将 prose class 放在父级 div 上，那么我的 h1 样式会改变，这是我不想要的。
我也无法删除具有 class prose 的 div，因为 post 是使用 mdx 动态插入的。这只是一个示例，但我的真实博客项目包含如下代码：
<div className="wrapper grid grid-cols-[1fr,70px,min(70ch,calc(100%-64px)),70px,1fr] gap-8 mb-24">
<div className="mt-24 col-[3/4]">
<dl>
<dt className="sr-only">Published on</dt>
<dd className="mb-2 font-medium text-gray-500 dark:text-gray-400">
<time dateTime={meta.date.toLocaleString()}>{formatDate(meta.date.toString())}</time>
</dd>
</dl>
<ShiftBy x={-2}>
<h1 className="text-5xl font-alegreya">{meta.title}</h1>
</ShiftBy>
<h2 className="text-xl font-medium text-gray-500 dark:text-gray-400">
{meta.description}
</h2>
</div>
<div className="prose dark:prose-light col-[2/5]">
<Component components={MDXComponents} />
</div>
</div>
如何让 figure 使用 2/5 列？理想情况下，我希望在知道我的约束的 CSS 网格中有一个解决方案，否则，如果不可能 flex 会做或任何其他黑客？
因为是孙子，所以不太可能。我建议将 post 分成两个网格。第一个是主要展示，第二个是文章正文。
这里肯定有一些奇怪的方法，但我相信这就是您想要的：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) </h2>
<p class="sw-para col-start-2">A surreal and almost grimy adaptation of <i>Alice In Wonderland, </i>Czech 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> is a complete trip.</p>
<figure class="sw-media col-span-3">
<!-- col-[2-5] doesn't work -->
<img class="w-full" src="https://image.scoopwhoop.com/w620/s3.scoopwhoop.com/anj/jf/946880113_3.jpg.webp" data-src="https://s3.scoopwhoop.com/anj/jf/946880113_3.jpg" alt="" class="load" />
<figcaption>Source: <a href="http://www.dailymotion.com/video/x2jjkww" target="_blank" rel="nofollow">dailymotion.com</a></figcaption>
</figure>
<h2 class="col-start-2">2. Hard To Be A God (2013)</h2>
<p class="sw-para col-start-2">Based on the Arkady and Boris Strugatsky novel of the same name, <i>Hard To Be A God</i> is a Russian sci-fi film set in a retroesque dystopic alien planet where intellectual thought is outlawed and humans are basically still stuck in a world similar to the dark ages. This one's as brutal as it is dark and uneasy to watch.</p>
<figure class="sw-media col-span-3">
<img class="w-full" src="https://image.scoopwhoop.com/w620/s3.scoopwhoop.com/anj/jf/64386347_3.jpg.webp" data-src="https://s3.scoopwhoop.com/anj/jf/64386347_3.jpg" alt="" class="load" />
<figcaption>Source: <a href="http://www.telegraph.co.uk/film/hard-to-be-a-god/review/" target="_blank" rel="nofollow">telegraph.co.uk</a></figcaption>
</figure>
<h2 class="col-start-2">3. Fear And Loathing In Las Vegas (1998)</h2>
<p class="sw-para col-start-2">An easy pick; and, for those who haven't watched it, <i>Fear And Loathing</i> is a must on your epic mindfuck list. Starring Johnny Depp and Benicio del Toro in a hazed out and psychotropic drug infused journey through Las Vegas, this film is a tripped out experience.</p>
<figure class="sw-media col-span-3">
<img class="w-full" src="https://image.scoopwhoop.com/w620/s3.scoopwhoop.com/anj/jf/126406619_3.jpg.webp" data-src="https://s3.scoopwhoop.com/anj/jf/126406619_3.jpg" alt="" class="load" />
<figcaption>Source: <a href="http://www.silverlakepictureshow.com/show/fear-and-loathing-in-las-vegas/" target="_blank" rel="nofollow">silverlakepictureshow.com</a></figcaption>
</figure>
<h2 class="col-start-2">4. El Topo (1970)</h2>
<p class="sw-para col-start-2">Directed by Alejandro Jodorowsky, <i>El Topo</i> is an American-Western following the story of a violent gun slinger in the west on a journey to find enlightenment. <i>El Topo </i>is a fairly graphic and almost caricature like movie with an indirect plot and extremely twisted character play. </p>
<figure class="sw-media col-span-3">
<img class="w-full" src="https://image.scoopwhoop.com/w620/s4.scoopwhoop.com/anj/jf/293987293_3.jpg.webp" data-src="https://s4.scoopwhoop.com/anj/jf/293987293_3.jpg" alt="" class="load" />
<figcaption>Source: <a href="https://www.youtube.com/watch?v=6Uqb4Jy0GTg" target="_blank" rel="nofollow">youtube.com</a></figcaption>
</figure>
</div>
</div>
基本上，我将文章的主体设为从第一个 70px 间距到另一个 col-[2/5] 的网格，然后给它自己的网格 grid grid-cols-[70px,1fr,70px]。它变得棘手的部分是你用散文包装它，这很好，但它有一个最大宽度设置，所以我需要用 max-w-full 覆盖它。从那里开始，您只需设置您希望文章比赛进行的栏目。所有文字应为 col-start-2，数字应为 col-span-3。在那之后，你需要你的图形图像是 100%，所以添加 w-full.
好了，Tailwind 网格与副本的图像分界线。
我想要一个 CSS 网格孙子超出其父级的宽度。
我的可重现演示 -> https://play.tailwindcss.com/jZdsHpPAad
我有以下 CSS 网格包装器：
<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) </h2>
<p class="sw-para">A surreal and almost grimy adaptation of <i>Alice In Wonderland, </i>Czech 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> 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/jf/946880113_3.jpg" alt="" class="load" />
<figcaption>Source: <a href="http://www.dailymotion.com/video/x2jjkww" target="_blank" rel="nofollow">dailymotion.com</a></figcaption>
</figure>
<h2>2. Hard To Be A God (2013)</h2>
<p class="sw-para">Based on the Arkady and Boris Strugatsky novel of the same name, <i>Hard To Be A God</i> is a Russian sci-fi film set in a retroesque dystopic alien planet where intellectual thought is outlawed and humans are basically still stuck in a world similar to the dark ages. This one's as brutal as it is dark and uneasy to watch.</p>
<figure class="sw-media">
<img src="https://image.scoopwhoop.com/w620/s3.scoopwhoop.com/anj/jf/64386347_3.jpg.webp" data-src="https://s3.scoopwhoop.com/anj/jf/64386347_3.jpg" alt="" class="load" />
<figcaption>Source: <a href="http://www.telegraph.co.uk/film/hard-to-be-a-god/review/" target="_blank" rel="nofollow">telegraph.co.uk</a></figcaption>
</figure>
<h2>3. Fear And Loathing In Las Vegas (1998)</h2>
<p class="sw-para">An easy pick; and, for those who haven't watched it, <i>Fear And Loathing</i> is a must on your epic mindfuck list. Starring Johnny Depp and Benicio del Toro in a hazed out and psychotropic drug infused journey through Las Vegas, this film is a tripped out experience.</p>
<figure class="sw-media">
<img src="https://image.scoopwhoop.com/w620/s3.scoopwhoop.com/anj/jf/126406619_3.jpg.webp" data-src="https://s3.scoopwhoop.com/anj/jf/126406619_3.jpg" alt="" class="load" />
<figcaption>Source: <a href="http://www.silverlakepictureshow.com/show/fear-and-loathing-in-las-vegas/" target="_blank" rel="nofollow">silverlakepictureshow.com</a></figcaption>
</figure>
<h2>4. El Topo (1970)</h2>
<p class="sw-para">Directed by Alejandro Jodorowsky, <i>El Topo</i> is an American-Western following the story of a violent gun slinger in the west on a journey to find enlightenment. <i>El Topo </i>is a fairly graphic and almost caricature like movie with an indirect plot and extremely twisted character play. </p>
<figure class="sw-media">
<img src="https://image.scoopwhoop.com/w620/s4.scoopwhoop.com/anj/jf/293987293_3.jpg.webp" data-src="https://s4.scoopwhoop.com/anj/jf/293987293_3.jpg" alt="" class="load" />
<figcaption>Source: <a href="https://www.youtube.com/watch?v=6Uqb4Jy0GTg" target="_blank" rel="nofollow">youtube.com</a></figcaption>
</figure>
</div>
</div>
它有 grid-cols-[1fr,70px,min(70ch,calc(100%-64px)),70px,1fr]
我希望我的布局居中，即留在 min(70ch,calc(100%-64px)) 之内，只有图像留在外面，即 70px,min(70ch,calc(100%-64px)),70px
所有内容都在 3/4 列中。
我希望我的图像在 2/5 中，但它不起作用，因为它不是直接子级。是个孙子。
我需要这样做的原因是我想使用 @tailwindcss/typography 需要将 prose class 添加到顶部，因此，额外的 div .如果我将 prose class 放在父级 div 上，那么我的 h1 样式会改变，这是我不想要的。
我也无法删除具有 class prose 的 div，因为 post 是使用 mdx 动态插入的。这只是一个示例，但我的真实博客项目包含如下代码：
<div className="wrapper grid grid-cols-[1fr,70px,min(70ch,calc(100%-64px)),70px,1fr] gap-8 mb-24">
<div className="mt-24 col-[3/4]">
<dl>
<dt className="sr-only">Published on</dt>
<dd className="mb-2 font-medium text-gray-500 dark:text-gray-400">
<time dateTime={meta.date.toLocaleString()}>{formatDate(meta.date.toString())}</time>
</dd>
</dl>
<ShiftBy x={-2}>
<h1 className="text-5xl font-alegreya">{meta.title}</h1>
</ShiftBy>
<h2 className="text-xl font-medium text-gray-500 dark:text-gray-400">
{meta.description}
</h2>
</div>
<div className="prose dark:prose-light col-[2/5]">
<Component components={MDXComponents} />
</div>
</div>
如何让 figure 使用 2/5 列？理想情况下，我希望在知道我的约束的 CSS 网格中有一个解决方案，否则，如果不可能 flex 会做或任何其他黑客？
因为是孙子，所以不太可能。我建议将 post 分成两个网格。第一个是主要展示，第二个是文章正文。
这里肯定有一些奇怪的方法，但我相信这就是您想要的：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) </h2>
<p class="sw-para col-start-2">A surreal and almost grimy adaptation of <i>Alice In Wonderland, </i>Czech 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> is a complete trip.</p>
<figure class="sw-media col-span-3">
<!-- col-[2-5] doesn't work -->
<img class="w-full" src="https://image.scoopwhoop.com/w620/s3.scoopwhoop.com/anj/jf/946880113_3.jpg.webp" data-src="https://s3.scoopwhoop.com/anj/jf/946880113_3.jpg" alt="" class="load" />
<figcaption>Source: <a href="http://www.dailymotion.com/video/x2jjkww" target="_blank" rel="nofollow">dailymotion.com</a></figcaption>
</figure>
<h2 class="col-start-2">2. Hard To Be A God (2013)</h2>
<p class="sw-para col-start-2">Based on the Arkady and Boris Strugatsky novel of the same name, <i>Hard To Be A God</i> is a Russian sci-fi film set in a retroesque dystopic alien planet where intellectual thought is outlawed and humans are basically still stuck in a world similar to the dark ages. This one's as brutal as it is dark and uneasy to watch.</p>
<figure class="sw-media col-span-3">
<img class="w-full" src="https://image.scoopwhoop.com/w620/s3.scoopwhoop.com/anj/jf/64386347_3.jpg.webp" data-src="https://s3.scoopwhoop.com/anj/jf/64386347_3.jpg" alt="" class="load" />
<figcaption>Source: <a href="http://www.telegraph.co.uk/film/hard-to-be-a-god/review/" target="_blank" rel="nofollow">telegraph.co.uk</a></figcaption>
</figure>
<h2 class="col-start-2">3. Fear And Loathing In Las Vegas (1998)</h2>
<p class="sw-para col-start-2">An easy pick; and, for those who haven't watched it, <i>Fear And Loathing</i> is a must on your epic mindfuck list. Starring Johnny Depp and Benicio del Toro in a hazed out and psychotropic drug infused journey through Las Vegas, this film is a tripped out experience.</p>
<figure class="sw-media col-span-3">
<img class="w-full" src="https://image.scoopwhoop.com/w620/s3.scoopwhoop.com/anj/jf/126406619_3.jpg.webp" data-src="https://s3.scoopwhoop.com/anj/jf/126406619_3.jpg" alt="" class="load" />
<figcaption>Source: <a href="http://www.silverlakepictureshow.com/show/fear-and-loathing-in-las-vegas/" target="_blank" rel="nofollow">silverlakepictureshow.com</a></figcaption>
</figure>
<h2 class="col-start-2">4. El Topo (1970)</h2>
<p class="sw-para col-start-2">Directed by Alejandro Jodorowsky, <i>El Topo</i> is an American-Western following the story of a violent gun slinger in the west on a journey to find enlightenment. <i>El Topo </i>is a fairly graphic and almost caricature like movie with an indirect plot and extremely twisted character play. </p>
<figure class="sw-media col-span-3">
<img class="w-full" src="https://image.scoopwhoop.com/w620/s4.scoopwhoop.com/anj/jf/293987293_3.jpg.webp" data-src="https://s4.scoopwhoop.com/anj/jf/293987293_3.jpg" alt="" class="load" />
<figcaption>Source: <a href="https://www.youtube.com/watch?v=6Uqb4Jy0GTg" target="_blank" rel="nofollow">youtube.com</a></figcaption>
</figure>
</div>
</div>
基本上，我将文章的主体设为从第一个 70px 间距到另一个 col-[2/5] 的网格，然后给它自己的网格 grid grid-cols-[70px,1fr,70px]。它变得棘手的部分是你用散文包装它，这很好，但它有一个最大宽度设置，所以我需要用 max-w-full 覆盖它。从那里开始，您只需设置您希望文章比赛进行的栏目。所有文字应为 col-start-2，数字应为 col-span-3。在那之后，你需要你的图形图像是 100%，所以添加 w-full.
好了，Tailwind 网格与副本的图像分界线。