Tailwind grid-template-areas

[LudvigAlmvaang]

Hello :)

I am trying to use grid-template-areas in order to populate the four columns at the top with a header.
Tailwind doesn't include a utility for this so I am using brackets to write some css code, but somehow it is not working as intended.
When I inspect the div container in my web browser I can not even see the grid-template-areas property, but I can see the grid-area-header property for the h2 container.

Relevant code snippet:

<div className="grid lg:grid-cols-4 min-h-[500px] text-black justify-items-center items-center lg:[grid-template-areas:'header header header header']">
   <h2 className="font-markazi text-5xl lg:[grid-area:header]">Header</h2>
   <p>Testimonial Section 1</p>
   <p>Testimonial Section 2</p>
   <p>Testimonial Section 3</p>
   <p>Testimonial Section 4</p>
</div>

Output:

[LudvigAlmvaang]

I kind of solved it by using traditional css.

snippet from index.css
.grid-cols-4-header { grid-template-areas:'header header header header' }

snippet from testimonials.tsx
<div className="grid lg:grid-cols-4 min-h-[500px] text-black justify-items-center items-center grid-cols-4-header">

But still, I would like to know why it didn't work the way I did it first.

[traez]

Yes, this approach is correct. Using Tailwind's arbitrary value syntax directly in the HTML

<div className="grid gap-4
grid-cols-2 grid-rows-2
lg:grid-cols-4 lg:grid-rows-1
[grid-template-areas:'aaa_bbb'_'ccc_ddd']
lg:[grid-template-areas:'aaa_bbb_ccc_ddd']">
<div className="[grid-area:aaa]">AAA</div>
<div className="[grid-area:bbb]">BBB</div>
<div className="[grid-area:ccc]">CCC</div>
<div className="[grid-area:ddd]">DDD</div>
</div>

Mobile view:
| AAA | BBB |
| CCC | DDD |

Desktop view: | AAA | BBB | CCC | DDD |

[lucatmedmij]

This should work. You need to replace space with underscore

[grid-template-areas:'header_header_header_header']